使用場景

輸入外部音視頻數據推流

1. 獲取媒體流，可以通過以下方法實現：

   • 通過getUserMedia采集攝像頭和麥克風；

   • 通過getDisplayMedia采集屏幕分享流；

   • 通過captureStream采集頁面中正在播放的音視頻媒體標簽；

     • 說明

       Safari瀏覽器不支持媒體標簽調用captureStream。

   • 通過captureStream采集 canvas 畫布動畫流。

2. 通過createCustomVideoTrack()創建自定義視頻軌道，通過createCustomAudioTrack()創建自定義音頻軌道,例如

   const customAudioTrack = await DingRTC.createCustomAudioTrack({ mediaStreamTrack: audioTrack });
   const customVideoTrack = await DingRTC.createCustomVideoTrack({ mediaStreamTrack: videoTrack });

3. 調用publish()發布創建好的自定義音視頻軌道。

   說明

   在進行外部輸入推流時，無法同時進行本地攝像頭和麥克風設備采集的媒體數據推流，外部輸入推流在遠端就代表本端推流的視頻和音頻。若當前已經在推流的過程中，需要調用unpublish()取消掉之前推流的音視頻軌道，然后再進行外部音視頻的推流。

代碼示例：

    const audioRef = useRef<HTMLAudioElement>(null);
    const videoRef = useRef<HTMLVideoElement>(null);
    videoRef.current.onloadedmetadata = async () => {
      // @ts-ignore
      const stream = videoRef.current.captureStream();
      const videoTrack = await DingRTC.createCustomVideoTrack({
        mediaStreamTrack: stream.getVideoTracks()[0],
      });
      const tracksToPublish: LocalTrack[] = [videoTrack];
      if (enableAudio && stream.getAudioTracks().length) {
        const audioTrack = await DingRTC.createCustomAudioTrack({
          mediaStreamTrack: stream.getAudioTracks()[0],
        });
        tracksToPublish.push(audioTrack);
      }
      await publish(tracksToPublish);
    };
    audioRef.current.onloadedmetadata = async () => {
      // @ts-ignore
      const stream = audioRef.current.captureStream();
      const audioTrack = await DingRTC.createCustomAudioTrack({
        mediaStreamTrack: stream.getAudioTracks()[0],
      })
      await publish([audioTrack]);
    };

<video loop autoPlay controls={false} ref={videoRef} />
<audio loop autoPlay controls={false} ref={audioRef} />

完整參考代碼實現可查看 Web demo External 組件部分。