自定义视频采集

更新时间: 2024/09/18 16:26:13

在云游戏场景或直播过程中,用户往往需要共享非摄像头采集的外部视频源,比如希望露脸的同时还可以进行屏幕录制。为了支持用户使用自定义视频源, NERTC SDK 为用户提供传输通道,并进行编码推流。

功能描述

一般情况下,App 通常采用本设备的摄像头模块采集视频数据。但在部分场景下可能需要使用自定义的视频源,例如:

  • 由第三方美颜 SDK 负责视频数据采集和视频数据的前处理,NERTC 负责视频数据编码和云端推流。
  • 某些视频采集设备被系统独占。为避免与其它业务产生冲突,需要灵活的设备管理策略。例如,直播过程中需要录制短视频。
  • 需要使用外部视频源,即非摄像头采集的数据,例如播放本地视频文件、屏幕共享、游戏直播等。

基于以上场景,NERTC SDK 支持开发者使用自定义的视频源,以实现业务场景中的相关需求。本文将介绍如何实现自定义视频采集功能。

自定义视频采集功能支持的数据源包括:

  • 通过 navigator.mediaDevices.getUserMedia 接口获取的实时音视频数据。
  • 本地或者云端的音视频文件。
  • webAudio、canvas 生成的音视频数据源。
  • 自定义美颜库或前处理库,您可以用前处理库内资源对编码前获取的原始视频数据进行修改。

示例项目

网易云信在 GitHub 上提供自定义视频采集的开源示例项目 ExternalVideo,您可以前往下载体验,也可以在线体验此功能。

注意事项

  • 自定义视频采集场景中,您需要自行管理音视频数据的采集和处理。
  • 自定义视频采集目前可以通过两种方式实现,即分别通过主、辅流通道将采集的自定义音视频流发送至云信服务器。

自定义主流通道

若您选择自定义主流通道的视频源,有以下两种配置方法:

  • 在加入房间后,调用 createStream 方法创建音视频流。调用该方法时,您需要设置 audio 和 video 参数为 true,并设置 audioSource 和 videoSource 指定自定义的主流音视频源,即将 getUserMedia 返回的数据传入 MediaStreamTrack 对象来创建本地音视频媒体流轨道。
// 本地流初始化前开启自定义主流
navigator.mediaDevices.getUserMedia(
    {video: true, audio: true}
).then(function(mediaStream){
    var audioSource = mediaStream.getAudioTracks()[0];
    var videoSource = mediaStream.getVideoTracks()[0];
    rtc.localStream = NERTC.createStream({
        video: true,
        audio: true,
        audioSource: audioSource,
        videoSource: videoSource
    });
    rtc.localStream.init()
});
  • 在加入房间并调用 createStream 方法成功发布音视频流后,您可以再次调用 open 方法创建自定义主流通道。调用该方法时,您需要设置 type 参数为 video, 并设置 videoSource 参数指定自定义的辅流视频源,即将 getUserMedia 返回的数据传入 MediaStreamTrack 对象来创建本地音视频媒体流轨道。
// 本地流初始化后开启自定义主流
let options = {
    type: 'video',
    videoSource, //  自定义主流的 MediaStreamTrack
  }
rtc.localStream.open(options).then(async ()=>{
    console.log('打开自定义主流成功')
    await rtc.localStream.play(document.getElementById('local-video-wrapper'))
    rtc.localStream.setLocalRenderMode(localViewConfig) // 本地视频容器尺寸
  }).catch(err =>{
    console.log('打开自定义主流 失败: ', err)
  })

自定义辅流通道

若您选择自定义辅流通道的视频源,有以下两种配置方法:

  • 在加入房间后,调用 createStream 方法创建音视频流。调用该方法时,您需要设置 screen 和 screenAudio 参数为 true, 并设置 screenAudioSource 和 screenVideoSource 参数指定自定义的辅流音视频源,即将 getUserMedia 返回的数据传入 MediaStreamTrack 对象来创建本地音视频媒体流轨道。
// 本地流初始化前开启自定义辅流
navigator.mediaDevices.getUserMedia(
    {video: true, audio: true}
).then(function(mediaStream){
    var audioSource = mediaStream.getAudioTracks()[0];
    var videoSource = mediaStream.getVideoTracks()[0];
    rtc.localStream = NERTC.createStream({
        screen: true,
        screenAudio: true,
        screenAudioSource: audioSource,
        screenVideoSource: videoSource
    });
    rtc.localStream.init()
});
  • 在加入房间并调用 createStream 方法成功发布音视频流后,您可以再次调用 open 方法创建自定义辅流通道。调用该方法时,您需要设置 type 参数为 screen, 并设置 screenVideoSource 参数指定自定义的辅流视频源,即将 getUserMedia 返回的数据传入 MediaStreamTrack 对象来创建本地音视频媒体流轨道。
// 本地流初始化后开启自定义辅流
let options = {
    type: 'screen',
    screenVideoSource, //  自定义辅流的 MediaStreamTrack
  }
rtc.localStream.open(options).then(async ()=>{
    console.log('打开自定义辅流成功')
    await rtc.localStream.play(document.getElementById('local-video-wrapper'))
    rtc.localStream.setLocalRenderMode(localViewConfig) // 本地视频容器尺寸
  }).catch(err =>{
    console.log('打开自定义辅流 失败: ', err)
  })

API 参考

此文档是否对你有帮助?
有帮助
去反馈
  • 功能描述
  • 示例项目
  • 注意事项
  • 自定义主流通道
  • 自定义辅流通道
  • API 参考