视频管理

1. 视频属性设置

设置请求分辨率

在会议中修改对端画面的分辨率，这个参数结合访客 SVC 来使用可以实现通话中切换设置的分辨率。

/**
 * 获取视频请求尺寸
 *
 * 影响自己看其他成员的视频分辨率
 *
 * @returns 视频请求尺寸
 */
public getRequestSize(): JRTCVideoSize;

/**
 * 设置视频请求尺寸
 *
 * 在渲染画面前设置才有效，建议在通话开始前设置。
 * @param requestSize 视频尺寸大小
 */
public setRequestSize(requestSize: JRTCVideoSize):void;

/**
 * 订阅通话中其他成员的视频流
 *
 * @param participant   成员对象
 * @param videoSize   视频请求的尺寸
 * @returns 接口调用结果
 * - true: 接口调用成功
 * - false: 接口调用异常
 */
public requestVideo(participant: JRTCRoomParticipant, videoSize: JRTCVideoSize): Promise<boolean | string | MediaStream>;

/**
 * 取消订阅通话中其他成员的视频流
 * @param participant 成员对象
 * @returns 接口调用结果
 * - true: 接口调用成功，会收到 {@link JRTCGuestCallback.onMemberUpdate} 回调，具体可关注 {@link 多方通话模块!JRTCRoomParticipantChangeParam.videoSize} 属性
 * - false: 接口调用异常
 */
public unRequestVideo(participant: JRTCRoomParticipant): boolean;

示例代码：

// 订阅视频流
guest.requestVideo(participant, {width: 360, height: 640});

//取消订阅视频流
guest.unRequestVideo(participant);

SVC 设置说明

根据实际订阅需求和网络状况动态调整视频发送分辨率是视频通话的特性之一，SVC 可用于设置通话视频的每一层编码分辨率。该参数在发起呼叫时设置，且全局统一。

具体使用详见 SVC 说明 (opens new window)。

可在访客发起呼叫时，通过呼叫参数 JRTCCallCenterCallParam (opens new window) 的 svcResolution (opens new window) 属性进行设置，通话全局属性，只有发起呼叫用户设置有效。

/**
 * 设置 svc 分辨率，默认为 "1 180 250 360 600 720 1400"
 *
 * @note 当参数 {@link videoDefinition} 为 {@link VideoDefinition.CUSTOM CUSTOM} 时有效
 *
 * 用于自定义分层参数和码率
 *
 * 格式:
 * 高度公约数 第一层高倍数 第一层码率 第二层高倍数 第二层码率 第三层高倍数 第三层码率 第四层高倍数 第四层码率 <br>
 * 说明 <br>
 * 1）默认宽高比16:9 <br>
 * 2）编码宽高最后被裁成16整除 <br>
 * 例如 "1 180 250 360 600 720 1400" <br>
 * 第一层 分辨率 宽320（180*1/9*16）高 180（180*1）； 码率250kbps <br>
 * 第二层 分辨率 宽640（360*1/9*16）高 360（360*1）； 码率600kbps <br>
 * 第三层 分辨率 宽1280（720*1/9*16）高 720（720*1）； 码率1400kbps <br>
 * 此情况下只有三层，若需要四层，则需补充为 "1 180 250 360 600 720 1400 1080 1600" <br>
 * 第四层 分辨率 宽1920（1080*1/9*16）高 1080（1080*1）； 码率1600kbps <br>
 */
public set svcResolution(svcResolution:string) {}

示例代码：

// 创建呼叫配置参数
let callParam = new JRTCCallCenterCallParam();
//配置SVC
callParam.svcResolution = "1 180 250 360 600 720 1400 1080 1600";       
// 发起呼叫
guest.call("10086",callParam);

设置房间视频清晰度

如果觉得设置 SVC 不好理解，可以直接调用 videoDefinition (opens new window) 来设置通话视频清晰度（一组已经定义的 SVC 和 帧率），VideoDefinition (opens new window) 详见 API 文档。

/**
 * 设置房间视频清晰度，主要通过修改 {@link svcResolution} 参数调整清晰度，
 * 默认为 {@link VideoDefinition.CUSTOM CUSTOM}
 */
public set videoDefinition(videoDefinition: VideoDefinition);

示例代码：

// 创建呼叫配置参数
let callParam = new JRTCCallCenterCallParam();
// 设置通话视频清晰为流畅模式，低帧率
callParam.videoDefinition = VideoDefinition.DEFINITION_FLUENCY_FRAME_LOW;       
// 发起呼叫
guest.call("10086",callParam);

2. 视频渲染管理

渲染视频画面

/**
 * 开始自身视频渲染
 * 
 * 获取本端视频预览对象 JRTCMediaDeviceVideoCanvas，通过此对象能获得视图用于UI显示
 * @param renderType 视频渲染模式
 * @param videoBox 需要包含视频视图的组件
 * @returns Promise
 */
public async startCameraVideo(renderType: RenderType, videoBox: HTMLElement): Promise<JRTCMediaDeviceVideoCanvas>;

/**
 * 开始远端的视频渲染
 * 
 * @param streamId 远端视频拉流地址
 * @param renderType 视频渲染模式
 * @param mediaStream 媒体流对象，可以通过订阅远端视频流获取
 * @param videoBox 需要包含视频视图的组件
 * @returns 
 * - JCMediaDeviceVideoCanvas 对象: 开始远端视频渲染成功
 * - undefined: 开始远端视频渲染失败
 */
public startVideo(streamId: string, renderType: RenderType, mediaStream: MediaStream, videoBox: HTMLElement): JRTCMediaDeviceVideoCanvas | undefined;

示例代码：

////渲染本地视频画面
let viewId = 'local-video';
let box = document.querySelector(`#${viewId}`);
mediaDevice.startCameraVideo(RenderType.RENDER_FULL_SCREEN, box)


//渲染成员视频画面
guest.requestVideo(participant, {width: 360, height: 640}).then((result) => {
	let viewId = 'remote-video';
	if (result) {
		let box = document.querySelector(`#${viewId}`);
		remoteCanvas = mediaDevice.startVideo(participant.streamId, RenderType.RENDER_FULL_CONTENT, result, box);
}
});

停止视频渲染

/**
 * 停止视频渲染
 * 
 * @param canvas JRTCMediaDeviceVideoCanvas 对象，由 {@link startVideo} 或 {@link startCameraVideo} 接口返回
 */
public stopVideo(canvas: JRTCMediaDeviceVideoCanvas): void;

注：开启渲染后必须在不需要时进行关闭，否则会造成内存泄漏。

示例代码：

//停止视频渲染
mediaDevice.stopVideo(localCanvas);

3. 视频截图

视频业务存在对当前通话截屏的业务操作，以便于记录用户的操作行为。

/**
 * 截图
 *
 * @param type         图片格式，如img/jpeg，img/png
 * @param quality      图片质量，0~1
 * @returns Promise
 * 截图成功后返回 Blob 类型图片数据
 */
snapshot(type: string = 'img/jpeg', quality: number = 1): Promise<Blob> {}

示例代码：

localCanvas.snapshot().then(blob => {
  document.getElementById('snapshot-preview').src = window.URL.createObjectURL(blob);
});