presentation

Pexip presentation (screen sharing)

Pexip's presentation flow is two media tracks (your camera + your screen) negotiated through the same peer connection, with separate content hints, separate quality settings, and a separate audio mix. It also has to survive ICE restart so a network blip doesn't terminate your screenshare.

This skill captures the working setup. Most of the heavy lifting is in @pexip/media-components's usePresentation hook — webapp3 wraps it with the few app-specific pieces.

The pieces

Quick start: the full setup

import {usePresentation} from '@pexip/media-components';
import {stopMediaStream} from '@pexip/media-control';

import {callSignals} from '../signals/Call.signals';
import {
    startPresentationSignal,
    endPresentationSignal,
} from '../signals/Meeting.signals';
import {
    getDisplayMedia,
    setCurrentDisplayMedia,
} from '../services/Media.service';
import {CallStage} from '../services/InfinityClient.service';
import {useMeetingContext} from './meeting';

export const usePresentationSetup = () => {
    const meeting = useMeetingContext();

    // ICE restart awareness: the hook needs to know if a restart is in progress
    // so it can keep the local stream alive across the gap
    const isCallRestarting = useCallback(
        () => meeting.getCallStage() === CallStage.Restarting,
        [meeting],
    );

    const presentation = usePresentation({
        presentationReceiveStreamSignal: callSignals.onRemotePresentationStream,
        presentationConnectionStateChangeSignal: callSignals.onPresentationConnectionChange,
        present: meeting.present,
        getPresentationCapability: () => ({
            send: meeting.ableToPresent(),
            recv: meeting.ableToReceivePresentation(),
        }),
        stopPresentation: meeting.endPresent,
        handleGetDisplayMedia: getDisplayMedia,
        handlaGetDisplayMediaError: error => {
            // see error mapping below
        },
        isCallRestarting,
    });

    // External "start presentation" trigger (e.g. from a CallStage.Restarting recovery)
    useEffect(
        () => startPresentationSignal.add(({stream}) =>
            presentation.startPresentation(stream)),
        [presentation],
    );

    // Wire the local stream lifecycle to the audio mixer + cleanup
    useEffect(() => {
        if (meeting.getEndedReason() === 'DirectMediaTransfer') return;
        setCurrentDisplayMedia(presentation.localMediaStream);

        return () => {
            if (meeting.getEndedReason() === 'DirectMediaTransfer') return;
            endPresentationSignal.emit?.();
            stopMediaStream(presentation.localMediaStream);
        };
    }, [meeting, presentation.localMediaStream]);

    return presentation;
};