Acceso a objetos MediaStream para editores y suscriptores a través de la Media Stream Available API

Se puede acceder al objeto MediaStream escuchando el comando mediaStreamAvailable enviado por editores y suscriptores. La Media Stream Available API está disponible desde la versión 2.27.7; las versiones anteriores deberán utilizar la API Acceso a objetos MediaStream para abonados anteriores a la versión 2.27.7 guía enlazada más abajo.

Notas importantes:

• Los objetos Publisher y Subscriber deben seguir utilizándose para controlar todos los aspectos de la API de vídeo, como el silenciamiento, la desconexión, etc.
• El audio se reproducirá tanto a través del elemento personalizado como del widget Editor o Suscriptor. Los elementos personalizados deben silenciarse para evitar el eco.
• El cromo de video de Vonage, como la silueta y los controles de video, no estarán presentes.
• El objeto MediaStream tiene en cuenta los cambios provocados por el enrutamiento adaptativo de medios.

A continuación se ofrece un ejemplo de ganchos de contexto de sesión, suscriptor y editor de React que utilizan la Media Stream Available API. Aunque en el ejemplo se utiliza React, la Media Stream Available API es independiente del framework. Tenga en cuenta que el oyente debe adjuntarse inmediatamente después de que se creen el editor y los suscriptores, no como parte de la devolución de llamada.

Componente de la sesión

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;