腾讯云 RTC SDK - 开启视频合流插件

功能描述

本文主要介绍如何使用合流插件将本地摄像头和共享屏幕画面合到主流上。

前提条件

TRTC Web SDK version >= 5.11.0.

兼容性：

浏览器	兼容性
桌面端 Chrome	✅
桌面端 Safari	✅
桌面端 Firefox	✅
桌面端 Edge	✅
iOS Safari	❌不支持屏幕分享
安卓 Chrome	❌不支持屏幕分享

实现流程

引入并注册插件

import { VideoMixer } from 'trtc-sdk-v5/plugins/video-effect/video-mixer';
let trtc = TRTC.create({ plugins: [VideoMixer] });

开启合流

await trtc.startPlugin('VideoMixer', {
    container: {
      width: 1920,
      height: 1080
    },
    camera: {
      x: 1280,
      y: 0,
      width: 640,
      height: 480
    },
    screen: {
      x: 0,
      y: 0,
      width: 1920,
      height: 1080
    }
  });

开启插件时，必须设置合流画布宽高，摄像头和屏幕的参数是可选的，不设置时画面默认从左上角开始，尺寸为视频原宽高。

开启摄像头和屏幕

开启插件后，摄像头和屏幕都会合流到主流上，因此需要调用：

await trtc.startLocalVideo({
  view: 'local-video'
});

然后打开共享屏幕，就会看到摄像头和屏幕画面合流到一起了。

await trtc.startScreenShare();

注意：开启合流插件后会自动停止推辅流，因为辅流已经合到主流上一起推流了。

更新合流

你可以更新合流画面的参数：

await trtc.updatePlugin('VideoMixer', {
  camera: {
    x: 50,
    y: 100,
    width: 960
  },
});

此处只设置了宽度，则摄像头画面高度会按照原视频比例拉伸。反之如果只设置高度则宽度按比例拉伸。

关闭合流

await trtc.stopPlugin('VideoMixer');

没有摄像头的情况下合流

如果合流开始时不会用到摄像头（比如先共享屏幕，后续才打开摄像头），需要指定startLocalVideo的capture参数为false：

await trtc.startLocalVideo({
  view: 'local-video',
  capture: false
});

后续要打开/关闭摄像头则通过更新 capture 参数：

await trtc.updateLocalVideo({
  capture: true
});

注意：开启合流后，开/关摄像头必须通过调用updateLocalVideo({ capture: true/false })。不要调用stopLocalVideo，因为这样会把主流关闭，导致屏幕画面无法合流。

API 说明

trtc.startPlugin('VideoMixer', options)

用于开启合流插件。

options

Name	Type	Attributes	Description
container	`Resolution`	必填	设置合流画布的宽高
camera	`LayerOption`	选填	摄像头画面参数
screen	`LayerOption`	选填	共享屏幕画面参数

LayerOption

Name	Type	Attributes	Description
x	`number`	选填	相对画布左上角的横向坐标，可以为负数，默认值：0
y	`number`	选填	相对画布左上角的纵向坐标，可以为负数，默认值：0
width	`number`	选填	画面呈现的宽度，需要 > 0 - 未指定 width，指定了 height 时，画面会根据 height 按原视频比例拉伸。 - width 和 height 都没指定时为原视频宽度。
height	`number`	选填	画面呈现的高度，需要 > 0 - 未指定 height，指定了 width 时，会根据 width 按原视频比例拉伸。 - width 和 height 都没指定时为原视频高度。

Resolution

Name	Type	Attributes	Description
width	`number`	必填	画布宽度
height	`number`	必填	画布高度

Example:

await trtc.startPlugin('VideoMixer', {
  container: {
    width: 1920,
    height: 1080
  }
});
await trtc.startPlugin('VideoMixer', {
  container: {
    width: 640,
    height: 1000
  },
  camera: {
    x: 0,
    y: 0,
    width: 640,
    height: 480
  },
  screen: {
    x: 0,
    y: 480,
    width: 640,
    height: 500
  }
});

trtc.updatePlugin('VideoMixer', options)

用于更新合流参数，除了 container 参数变成可选之外，其余传递参数同 startPlugin。

Name	Type	Attributes	Description
container	`Resolution`	选填	设置合流画布的宽高
camera	`LayerOption`	选填	摄像头画面参数
screen	`LayerOption`	选填	共享屏幕画面参数

Example

await trtc.updatePlugin('VideoMixer', {
  camera: {
    x: 500,
    y: 0,
    width: 640,
    height: 480
  }
});

trtc.stopPlugin('VideoMixer')

停止合流插件。