Skip to main content

Subscribe from Conference

To view and interact with media streams published within a conference, you can subscribe to these streams using the Twyng's subscribe method. Depending on when streams are published (before or after joining the conference), you'll handle subscriptions differently.

Subscribing to Pre-existing Streams:​

When streams are already published in the conference before joining, you can subscribe to them using the remote streams obtained from the response of the join method. Detailed instructions for joining a conference are available in the join method documentation.

    const joinResponse = await twyng.join(ConferenceJoinInfo);
    if (joinResponse.status) {
        const remoteStreams = joinResponse.streams;
        remoteStreams.forEach((stream) => {
            const subscription = await twyng.subscribe(stream);
        });
    }

Subscribing to New Streams:​

Streams that start publishing after you join the conference can be obtained by listening to the SDK.ON_NEW_PUBLISHER event on the SDK instance. This event notifies you when new streams become available for subscription.

    twyng.on(Twyng.ON_NEW_PUBLISHER, (stream) => {
        const subscription = await twyng.subscribe(stream);
    });

Handling Consistency Issues:​

To maintain consistency and handle any updates or changes in the conference, listen to the SDK.ON_CONFERENCE_INFO event. This event is triggered at intervals to provide updated information about remote streams and conference participants.

    twyng.on(Twyng.ON_CONFERENCE_INFO, (conferenceInfo) => {
          // Update subscription status or handle changes in remote streams
    });

Playback Subscription​

When subscribing to media streams in the conference using the Twyng's subscribe method, you receive a response object that includes a mediaStream property. This mediaStream is an instance of MediaStream, which can be directly assigned to the srcObject property of a media element for playback.


    const container = document.body

    twyng.on(Twyng.ON_NEW_PUBLISHER, (stream) => {
        const subscription = await twyng.subscribe(stream);


        const video = document.createElement('video')
        video.muted = true
        video.onloadedmetadata = () => {
            video.play()
        }
        video.srcObject = subscription.mediaStream
        container.appendChild(video)
    });

Manage Subscription​

The subscription instance provides methods to manage and control the subscription.

  1. Stop Subscription: The stop method allows you to terminate the subscription to a media stream. This can be useful when you no longer need to receive or display a particular stream.
    await subscription.stop()

Calling stop on the subscription instance ensures that resources associated with the subscription are released appropriately.

Events​

  1. ON_NEW_PUBLISHER: Fired when a new publishing session starts.
  2. ON_STREAM_ENDED: Signals when a stream has ended, possibly due to disconnection or other reasons.
  3. ON_STREAM_UPDATED: Notifies when a stream's status has been updated, such as being muted or unmuted.

ON_NEW_PUBLISHER​


    twyng.on(Twyng.ON_NEW_PUBLISHER, (info) => {
        console.log('ON_NEW_PUBLISHER:', info);
    });

ON_STREAM_ENDED​


    twyng.on(Twyng.ON_STREAM_ENDED, (info) => {
        console.log('ON_STREAM_ENDED:', info);
    });

ON_STREAM_UPDATED​


    twyng.on(Twyng.ON_STREAM_UPDATED, (info) => {
        console.log('ON_STREAM_UPDATED:', info);
    });