Accessing MediaStream objects for Publishers and Subscribers via the Media Stream Available API

The MediaStream object can be accessed by listening for the mediaStreamAvailable event dispatched by publishers and subscribers. The Media Stream Available API was made available in 2.27.7; prior versions will need to use the Accessing MediaStream objects for Subscribers before version 2.27.7 guide linked below.

Important notes:

• The Publisher and Subscriber objects should still be used to control all aspects of the video API such as muting, disconnecting, and more.
• The audio will play through both the custom element and the Publisher or Subscriber widget. The custom elements should be muted to avoid echo.
• The Vonage video chrome such as silhouette and video controls will not be present.
• The MediaStream object accounts for any changes caused by Adaptive Media Routing.

The following provides an example of React Session, Subscriber, and Publisher context hooks using the Media Stream Available API. Although the example uses React, the Media Stream Available API is framework agnostic. Note that the listener should be attached immediately after the publisher and subscribers are created, not as part of the call back.

Session Component

const [subscriberStream, setSubscriberStreams] = useState([]);
async function subscribe(stream, session, options = {}) {
if (session) {
    const subscriber = session.current.subscribe(stream, null, { ...options, insertDefaultUI: false });
    subscriber.on('mediaStreamAvailable', ({ mediaStream }) => {
    setSubscriberStreams((prev) => [...prev, { mediaStream, subscriber }]);
    });
}
}

Subscriber Component

import { useEffect, useRef } from 'react';

const Subscriber = ({ subscriber, mediaStream }) => {
    const videoRef = useRef(null);

    useEffect(() => {
    if (mediaStream) {
        videoRef.current.srcObject = mediaStream;
    }
    }, [mediaStream]);

    return (
        
    );
}

export default Subscriber;

Publisher Component

import { useEffect, useRef } from 'react';

const Publisher = ({ publisher, mediaStream }) => {
    const videoRef = useRef(null);

    useEffect(() => {
    if (mediaStream) {
        videoRef.current.srcObject = mediaStream;
    }
    }, [mediaStream]);

    return (
        
    );
}

export default Publisher;