Media Stream Available APIによるパブリッシャーとサブスクライバーのMediaStreamオブジェクトへのアクセス

MediaStreamオブジェクトにアクセスするには mediaStreamAvailable イベントがディスパッチされます。Media Stream Available API は 2.27.7 で利用可能になりました。バージョン2.27.7以前のサブスクライバのMediaStreamオブジェクトへのアクセス下記リンクのガイドを参照。

重要な注意事項

PublisherオブジェクトとSubscriberオブジェクトは、ミュートや切断など、Video APIのあらゆる側面を制御するために使用されるべきである。
オーディオは、カスタム・エレメントとパブリッシャまたはサブスクライバ・ウィジェットの両方を通して再生されます。カスタムエレメントは、エコーを避けるためにミュートする必要があります。
シルエットやビデオコントロールなどのVonageビデオクロームは表示されません。
MediaStreamオブジェクトは、アダプティブ・メディア・ルーティングによって引き起こされるすべての変更をアカウントする。

以下は、Media Stream Available APIを使用したReact Session、Subscriber、Publisherコンテキストフックの例である。この例では React を使用していますが、Media Stream Available API はフレームワークに依存しません。リスナーは、コールバックの一部としてではなく、パブリッシャーとサブスクライバーが作成された直後にアタッチする必要があることに注意してください。

セッション・コンポーネント

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;