Tutorial: 开启视频合流插件

开启视频合流插件

功能描述

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

前提条件

  • 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');

没有摄像头的情况下合流

如果合流开始时不会用到摄像头(比如先共享屏幕,后续才打开摄像头),需要指定startLocalVideocapture参数为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')

停止合流插件。

Example:

await trtc.stopPlugin('VideoMixer');

常见问题

1.分辨率、码率怎么设置?

  • 分辨率就是画布宽高。
  • 码率通过控制主流参数的接口 start/updateLocalVideo 设置。