Zugriff auf MediaStream-Objekte für Publisher und Abonnenten über die Media Stream Available API

Auf das MediaStream-Objekt kann zugegriffen werden, indem auf den Befehl mediaStreamAvailable Ereignis, das von Herausgebern und Abonnenten ausgelöst wird. Die API "Media Stream Available" wurde in Version 2.27.7 verfügbar gemacht; frühere Versionen müssen die Zugriff auf MediaStream-Objekte für Abonnenten vor Version 2.27.7 unten verlinkten Leitfaden.

Wichtige Hinweise:

• Die Objekte "Publisher" und "Subscriber" sollten weiterhin zur Steuerung aller Aspekte der Video API verwendet werden, wie z. B. Stummschalten, Trennen der Verbindung und mehr.
• Der Ton wird sowohl über das benutzerdefinierte Element als auch über das Publisher- oder Subscriber-Widget abgespielt. Die benutzerdefinierten Elemente sollten stummgeschaltet werden, um ein Echo zu vermeiden.
• Die Vonage Video-Chrome-Funktionen wie Silhouette und Videosteuerung sind nicht vorhanden.
• Das MediaStream-Objekt berücksichtigt alle Änderungen, die durch Adaptives Medien-Routing. Wenn AMR eine Sitzung zwischen Peer-to-Peer-Relaying und dem Media Router umschaltet, wird die mediaStreamAvailable Ereignis liefert automatisch die aktualisierte MediaStreamso dass Ihr benutzerdefiniertes Rendering ohne zusätzliche Eingriffe synchronisiert bleibt.

Im Folgenden finden Sie ein Beispiel für React Session-, Subscriber- und Publisher-Kontext-Hooks unter Verwendung der Media Stream Available-API. Obwohl das Beispiel React verwendet, ist die Media Stream Available-API Framework-unabhängig. Beachten Sie, dass der Listener unmittelbar nach der Erstellung des Publishers und der Abonnenten angehängt werden sollte, nicht als Teil des Rückrufs.

Komponente der Sitzung

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;