有奖捉虫:办公协同&微信生态&物联网文档专题 HOT

功能描述

客户端支持在 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)。

代码示例

<!-- react\\vue等框架中 -->
<tm-live-video
id={"live-video-ctrl"}
userid={"xxxxx"}
msopenid={"xxxxx"}
streamtype={EmbeddedStreamType.VIDEO}
></tm-live-video>

<!-- 或者 -->
<tm-live-video
id="live-video-ctrl"
userid="xxxxx"
msopenid="xxxxx"
streamtype="0"
></tm-live-video>
注意:
需要在 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) 接口需要传入 <tm-live-video> 标签的 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 实例。