腾讯会议渲染原生视频组件（tm-live-video）_办公协同解决方案

腾讯会议

12 月 25, 2023

171 0

功能描述

客户端支持在 Webview 上渲染原生视频组件（v3.9.0 起支持同层渲染）。渲染原生视频组件上限数量：PC 端（Window、Mac）上限为 25个，移动端（iOS、Android）上限为20个。说明：需要先完成接口鉴权才能调用，包括调用 binduser 或者创建自定义标签，否则会鉴权失败，无法展示视频（鉴权请查看 JS-API 接口鉴权）

属性说明

属性	类型	默认值	必填	说明
id	String	–	否	ID 定义了一个全文档唯一的标识符（ID）。其规定 HTML 元素的唯一的 ID。
userid	String	–	否	用户 ID。
msopenid	String	–	否	用户在当前会议中的临时 openId，同一个用户在不同的会议该参数不同。
streamtype	EmbeddedStreamType	EmbeddedStreamType.VIDEO	否	视频流类型：EmbeddedStreamType.VIDEO：视频EmbeddedStreamType.SCREEN_SHARING：屏幕共享

说明：userid 和 msopenid 这两个参数必须有一个参数存在不为空值。tm-live-video 标签的属性值皆为小写英文（例如：userid、msopenid、streamtype）。EmbeddedStreamType：0：VIDEO（会议中用户的视频）1：SCREEN_SHARING（会议中用户的屏幕共享）

相关JS-API接口

wemeet.createLiveVideoContext

接口描述：创建 tm-live-video 上下文 LiveVideoContext 对象。参数描述：

参数名称	参数类型	参数描述
id	String	tm-live-video，组件的 ID

LiveVideoContext

接口描述：LiveVideoContext 实例，可通过 wemeet.createVideoContext 获取。LiveVideoContext 通过 id 跟一个 tm-live-video 组件绑定，操作对应的 tm-live-video 组件。

LiveVideoContext 方法

接口描述：liveVideoContext.bindUser（option：object）功能说明：切换另外一个会议中用户的视频或者屏幕共享。参数说明：option：object

属性	类型	默认值	必填	描述
userId	String	–	否	用户 ID。
msOpenId	String	–	否	用户在当前会议中的临时 openId，同一个用户在不同的会议该参数不同。
streamType	EmbeddedStreamType	EmbeddedStreamType.VIDEO	否	视频流类型：EmbeddedStreamType.VIDEO：视频EmbeddedStreamType.SCREEN\_SHARING：屏幕共享

说明：liveVideoContext.bindUser 接口参数值为驼峰（例如：userId、msOpenId、streamType）。

代码示例

注意：需要在 js-api 接口鉴权成功之后，才能在页面中添加 tm-live-video、tm-video 和 tm-audio 等自定义标签。否则自定义标签在调用 wemeet.createLiveVideoContext、wemeet.createVideoContext、wemeet.createAudioContext 初始化接口会报“Need to call JSAPI config first.”的错误。通过 js-api 去设置修改为其他用户的视频：

import * as wemeet from '@tencent/wemeet-js-sdk';import { EmbeddedStreamType } from '@src/wemeet-js-sdk';
// wemeet.createLiveVideoContext(id) 接口需要传入  标签的 id.const liveVideoContext = await wemeet.createLiveVideoContext("live-video-ctrl");
liveVideoContext.bindUser({  userId: 'xxxxx',  msOpenId: 'xxxxx',  streamType: EmbeddedStreamType.VIDEO, // or EmbeddedStreamType.SCREEN_SHARING});

说明：调用 wemeet.createLiveVideoContext(id) 接口时会与 html 页面中 id 所对应的 tm-live-video 标签进行绑定，然后返回对应的 liveVideoContext 实例去调用 tm-live-video 标签的 js-api。但是若 html 页面中的 tm-live-video标签发生过被 html 销毁（移除）再重新创建，这时就需要重新调 wemeet.createLiveVideoContext(id) 接口获取新的 liveVideoContext 实例。

对腾讯办公协同的解决方案有疑惑？想了解解决方案收费？联系解决方案专家

腾讯云限时活动1折起，即将结束：马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？：点击对比阿里云的解决方案