订阅并显示视频

功能介绍

本节介绍如何在房间内订阅并显示视频画面，包括：

订阅指定成员、指定摄像头的视频
使用视频 UI 组件显示画面

注意：

须在成功进入房间后，方可订阅并显示视频。

订阅：创建 CRVideo_CreatVideoObj，将 handler() 返回的 DOM 挂入页面后，再调用 setVideo(UID, camID, level) 绑定要观看的成员与摄像头。SDK 会按需拉流并显示画面（他人视频从服务器订阅，本端自己的画面从本地采集获取）。
取消订阅：调用 setVideo('', 0) 退订该组件上的视频；或调用 destroy() 销毁组件，SDK 会退订相关流以节省带宽。

camID（摄像头 ID）说明：

不传或传 -1：订阅该成员的默认摄像头；
传具体 videoID：订阅指定摄像头，ID 来自 CRVideo_GetDefaultVideo 或 CRVideo_GetAllVideoInfo；
同时观看对方多路画面：须对方已开启多路推送（参见同时推送多路视频流）。本端可为每一路分别创建视频 UI 组件，对各组件调用 setVideo(同一 UID, 不同 camID)；camID 可取 CRVideo_GetAllVideoInfo 中的 videoID。

观看远端画面时，远端成员须已开启视频推送（参见推送视频流）；本端一般只需创建视频 UI 组件并 setVideo，无需再调用 CRVideo_OpenVideo(远端 UID)。

示例：

// 创建视频 UI 组件并订阅远端成员默认摄像头
var videoUI = CRVideo_CreatVideoObj();
document.getElementById('videoContainer').appendChild(videoUI.handler());
videoUI.setVideo(remoteUID);

// 订阅指定 videoID（单组件观看一路）
var camID = 2;
videoUI.setVideo(remoteUID, camID);

// 同时观看对方多路：多个组件，分别订阅不同 camID
var openedIDs = CRVideo_GetOpenedVideoIDs(remoteUID);  // 或 GetAllVideoInfo
openedIDs.forEach(function (id, index) {
    var ui = CRVideo_CreatVideoObj();
    document.getElementById('box' + index).appendChild(ui.handler());
    ui.setVideo(remoteUID, id);
});

// 退订（针对某个组件）
videoUI.setVideo('', 0);

2. 显示画面

Web SDK 通过 视频 UI 组件完成解码与显示，由 SDK 内部处理，使用简单。组件默认宽高为父容器的 100%，一般通过父盒子 CSS 控制显示区域。

典型步骤：创建组件 → 将 handler() 挂入父容器 → setVideo 订阅。

var videoUI = CRVideo_CreatVideoObj();
document.getElementById('videoBox').appendChild(videoUI.handler());
videoUI.setVideo(remoteUID);

常用能力：

显示/隐藏：show()、hide()
清除画面：clear() 仅清除组件上的图像，不会退订；再次显示需重新调用 setVideo
暂停/恢复绘制：pause()、play()
昵称：setVisibleNickName、setNickNameContent、setNickNameStyle
调试：showVideoSize 可在组件上显示当前视频尺寸

也可在 CRVideo_OpenVideo 后通过 CRVideo_NotifyVideoStream 获取 MediaStream 自行绑定到 <video> 标签，一般不建议，优先使用视频 UI 组件。

订阅并显示视频

功能介绍

1. 订阅与取消订阅

2. 显示画面