Accès aux objets MediaStream pour les éditeurs et les abonnés via l'API Media Stream Available

Il est possible d'accéder à l'objet MediaStream en écoutant la commande mediaStreamAvailable envoyé par les éditeurs et les abonnés. L'API Media Stream Available a été mise à disposition dans la version 2.27.7 ; les versions antérieures devront utiliser l'API Accès aux objets MediaStream pour les abonnés antérieurs à la version 2.27.7 dont le lien figure ci-dessous.

Remarques importantes :

• Les objets Publisher et Subscriber doivent toujours être utilisés pour contrôler tous les aspects de l'API Video, tels que la mise en sourdine, la déconnexion, etc.
• L'audio sera diffusé à la fois dans l'élément personnalisé et dans le widget de l'éditeur ou de l'abonné. Les éléments personnalisés doivent être mis en sourdine pour éviter l'écho.
• Le chrome vidéo de Vonage, comme la silhouette et les commandes vidéo, ne sera pas présent.
• L'objet MediaStream Account tient compte de tous les changements provoqués par Routage adaptatif des médias. Lorsque l'AMR assure la transition d'une session entre le relais poste-à-poste et le routeur de média, le système mediaStreamAvailable fournit automatiquement la mise à jour de la MediaStreamafin que votre rendu personnalisé reste synchronisé sans manipulation supplémentaire.

Vous trouverez ci-dessous un exemple de crochets contextuels React Session, Subscriber et Publisher utilisant l'API Media Stream Available. Bien que l'exemple utilise React, l'API Media Stream Available est indépendante du cadre. Notez que l'écouteur doit être attaché immédiatement après la création de l'éditeur et des abonnés, et non dans le cadre du rappel.

Composante de la session

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;