Zugriff auf MediaStream-Objekte für Verleger und Abonnenten über die API für verfügbare Medienströme

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 durch Adaptive Media Routing verursachten Änderungen.

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;