在Web端使用自定义轨道推流外部音视频-音视频通信-阿里云

阿里云RTC为您提供了输入外部音视频流的功能。通过阅读本文，您可以了解输入外部音视频流的方法。

使用场景

使用场景包括但不限于以下：

需要将本地媒体文件（视频/音频）及第三方音视频数据，通过SDK传输到远端播放渲染，可使用音视频外部输入推流实现。

输入外部音视频数据推流

获取媒体流，可以通过以下方法实现：
- 通过getUserMedia采集摄像头和麦克风；
- 通过getDisplayMedia采集屏幕分享流；
- 通过captureStream采集页面中正在播放的音视频媒体标签；
  - 说明
    Safari浏览器不支持媒体标签调用captureStream。
- 通过captureStream采集 canvas 画布动画流。

通过createCustomVideoTrack()创建自定义视频轨道，通过createCustomAudioTrack()创建自定义音频轨道,例如

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

调用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 组件部分。