文档

Web

更新时间:

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

使用场景

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

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

输入外部音视频数据推流

  1. 获取媒体流,可以通过以下方法实现:

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