Acesso a objetos do MediaStream para emissores e assinantes por meio da API do Media Stream Available

É possível acessar o objeto MediaStream monitorando o mediaStreamAvailable evento disparado por editores e assinantes. A API “Media Stream Available” foi disponibilizada na versão 2.27.7; as versões anteriores precisarão usar a Acesso a objetos MediaStream para assinantes em versões anteriores à 2.27.7 guia cujo link está abaixo.

Observações importantes:

• Os objetos Publisher e Subscriber ainda devem ser usados para controlar todos os aspectos da Video API, como silenciar, desconectar e outros.
• O áudio será reproduzido tanto pelo elemento personalizado quanto pelo widget do Editor ou do Assinante. Os elementos personalizados devem estar com o som desativado para evitar eco.
• Os recursos de vídeo do Vonage no Chrome, como a silhueta e os controles de vídeo, não estarão disponíveis.
• O objeto MediaStream leva em conta quaisquer alterações causadas por Roteamento Adaptativo de Mídia. Quando o AMR faz a transição de uma sessão entre o retransmissor ponto a ponto e o Media Router, o mediaStreamAvailable O evento entrega automaticamente a versão atualizada MediaStream, de modo que sua renderização personalizada permaneça sincronizada sem a necessidade de intervenção adicional.

A seguir, apresentamos um exemplo dos hooks de contexto Session, Subscriber e Publisher do React utilizando a API Media Stream Available. Embora o exemplo utilize o React, a API Media Stream Available é independente de framework. Observe que o ouvinte deve ser acoplado imediatamente após a criação do publisher e dos subscribers, e não como parte do callback.

Componente de sessão

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;