# 视频管理
# 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;/**
* 获取视频请求尺寸
*
* 影响自己看其他成员的视频分辨率
*
* @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);// 订阅视频流
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} 时有效
*
* 用于自定义分层参数和码率
*
* 格式:
* 高度公约数 第一层高倍数 第一层码率 第二层高倍数 第二层码率 第三层高倍数 第三层码率 第四层高倍数 第四层码率 <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) {}/**
* 设置 svc 分辨率，默认为 "1 180 250 360 600 720 1400"
*
* @note 当参数 {@link videoDefinition} 为 {@link 多方通话模块!VideoDefinition#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";
// 发起呼叫
this.guest.call("10086",callParam);// 创建呼叫配置参数
let callParam = new JRTCCallCenterCallParam();
//配置SVC
callParam.svcResolution = "1 180 250 360 600 720 1400 1080 1600";
// 发起呼叫
this.guest.call("10086",callParam);
# 设置房间视频清晰度
如果觉得设置 SVC 不好理解，可以直接调用 videoDefinition (opens new window) 来设置通话视频清晰度（一组已经定义的 SVC 和帧率），VideoDefinition (opens new window) 详见 API 文档。
/**
* 设置房间视频清晰度，主要通过修改 {@link svcResolution} 参数调整清晰度，
* 默认为 {@link 多方通话模块!VideoDefinition.CUSTOM}
*/
public set videoDefinition(videoDefinition:VideoDefinition) {}/**
* 设置房间视频清晰度，主要通过修改 {@link svcResolution} 参数调整清晰度，
* 默认为 {@link 多方通话模块!VideoDefinition.CUSTOM}
*/
public set videoDefinition(videoDefinition:VideoDefinition) {}
示例代码：
// 创建呼叫配置参数
let callParam = new JRTCCallCenterCallParam();
// 设置通话视频清晰为流畅模式，低帧率
callParam.videoDefinition = VideoDefinition.DEFINITION_FLUENCY_FRAME_LOW;
// 发起呼叫
this.guest.call("10086",callParam);// 创建呼叫配置参数
let callParam = new JRTCCallCenterCallParam();
// 设置通话视频清晰为流畅模式，低帧率
callParam.videoDefinition = VideoDefinition.DEFINITION_FLUENCY_FRAME_LOW;
// 发起呼叫
this.guest.call("10086",callParam);
# 2. 视频渲染管理
# 渲染视频画面
/**
* 开始本端视频渲染
*
* 获取本端视频预览对象 JRTCMediaDeviceVideoCanvas，通过此对象能获得视图用于UI显示
* @param renderType 视频渲染模式
* @param viewId 本端视频视图组件（local-stream）id
* @param pageTarget 页面节点
* @param enableMic 是否打开麦克风，默认打开
* @returns Promise
*/
public async startCameraVideo(renderType: RenderType, viewId: string, pageTarget: WechatMiniprogram.Component.TrivialInstance, enableMic?: boolean): Promise<JRTCMediaDeviceVideoCanvas> {}
/**
* 开始远端视频渲染
*
* @param streamUrl 远端视频拉流地址
* @param renderType 视频渲染模式
* @param viewId 视频视图组件（remote-stream）id
* @param pageTarget 页面节点
* @returns
* - JCMediaDeviceVideoCanvas 对象: 开始远端视频渲染成功
* - undefined: 开始远端视频渲染失败
*/
public startVideo(streamUrl: string, renderType: RenderType, viewId: string, pageTarget: WechatMiniprogram.Component.TrivialInstance): JRTCMediaDeviceVideoCanvas | undefined {}
/**
* 开始本端视频渲染
*
* 获取本端视频预览对象 JRTCMediaDeviceVideoCanvas，通过此对象能获得视图用于UI显示
* @param renderType 视频渲染模式
* @param viewId 本端视频视图组件（local-stream）id
* @param pageTarget 页面节点
* @param enableMic 是否打开麦克风，默认打开
* @returns Promise
*/
public async startCameraVideo(renderType: RenderType, viewId: string, pageTarget: WechatMiniprogram.Component.TrivialInstance, enableMic?: boolean): Promise<JRTCMediaDeviceVideoCanvas> {}
/**
* 开始远端视频渲染
*
* @param streamUrl 远端视频拉流地址
* @param renderType 视频渲染模式
* @param viewId 视频视图组件（remote-stream）id
* @param pageTarget 页面节点
* @returns
* - JCMediaDeviceVideoCanvas 对象: 开始远端视频渲染成功
* - undefined: 开始远端视频渲染失败
*/
public startVideo(streamUrl: string, renderType: RenderType, viewId: string, pageTarget: WechatMiniprogram.Component.TrivialInstance): JRTCMediaDeviceVideoCanvas | undefined {}
示例代码：
// 本端视频视图组件（local-stream）ID
let viewId = 'local-stream';
// 传入viewId
mediaDevice.startCameraVideo(RenderType.RENDER_FULL_SCREEN, viewId, this, true)
.then((canvas) => {});
//渲染成员视频画面
guest.requestVideo(participant, { width: 100, height: 100 }).then((result) => {
// 视频视图组件（local-stream）ID
let viewId = 'remote-stream';
remoteCanvas = mediaDevice.startVideo(result, RenderType.RENDER_FULL_CONTENT, viewId, this);
});
// 本端视频视图组件（local-stream）ID
let viewId = 'local-stream';
// 传入viewId
mediaDevice.startCameraVideo(RenderType.RENDER_FULL_SCREEN, viewId, this, true)
.then((canvas) => {});
//渲染成员视频画面
guest.requestVideo(participant, { width: 100, height: 100 }).then((result) => {
// 视频视图组件（local-stream）ID
let viewId = 'remote-stream';
remoteCanvas = mediaDevice.startVideo(result, RenderType.RENDER_FULL_CONTENT, viewId, this);
});
# 停止视频渲染
/**
* 停止视频渲染
*
* @param canvas JCMediaDeviceVideoCanvas 对象，由 {@link #startVideo} 或 {@link #startCameraVideo} 接口返回
*/
public stopVideo(canvas: JRTCMediaDeviceVideoCanvas): void/**
* 停止视频渲染
*
* @param canvas JCMediaDeviceVideoCanvas 对象，由 {@link #startVideo} 或 {@link #startCameraVideo} 接口返回
*/
public stopVideo(canvas: JRTCMediaDeviceVideoCanvas): void
注：开启渲染后必须在不需要时进行关闭，否则会造成内存泄漏。
示例代码：
mediaDevice.stopVideo(localCanvas);mediaDevice.stopVideo(localCanvas);
# 3. 视频截图
视频业务存在对当前通话截屏的业务操作，以便于记录用户的操作行为。
/**
* 截图
*
* @param type 图片的质量，默认原图。有效值为 raw（原图）、compressed（压缩）
* @returns Promise
* 截图成功后返回 base64 编码图片数据
*/
snapshot(type?: string): Promise<string | ArrayBuffer>{}/**
* 截图
*
* @param type 图片的质量，默认原图。有效值为 raw（原图）、compressed（压缩）
* @returns Promise
* 截图成功后返回 base64 编码图片数据
*/
snapshot(type?: string): Promise<string | ArrayBuffer>{}
示例代码：
localCanvas.snapshot('raw').then(res => {
const fileManager = wx.getFileSystemManager();
let imgBase64 = res;
//将base64数据写入到相册
var filePath = wx.env.USER_DATA_PATH + '/test.png';
fileManager.writeFile({
filePath: filePath,
data: imgBase64,
encoding: 'base64',
success: res => {
//保存图片到相册
wx.saveImageToPhotosAlbum({
filePath: filePath,
success: function (data) {
console.log('图片已保存到相册');
},
fail: function (err) {
console.log('截图失败',err);
}
})
}
})
}).catch(e => {
console.log('截图失败',e);
});
localCanvas.snapshot('raw').then(res => {
const fileManager = wx.getFileSystemManager();
let imgBase64 = res;
//将base64数据写入到相册
var filePath = wx.env.USER_DATA_PATH + '/test.png';
fileManager.writeFile({
filePath: filePath,
data: imgBase64,
encoding: 'base64',
success: res => {
//保存图片到相册
wx.saveImageToPhotosAlbum({
filePath: filePath,
success: function (data) {
console.log('图片已保存到相册');
},
fail: function (err) {
console.log('截图失败',err);
}
})
}
})
}).catch(e => {
console.log('截图失败',e);
});