互动直播 Web 端开发指南
SDK 概述
网易云信 SDK 为移动提供完善的音视频直播与实时互动开发框架,屏蔽其内部复杂细节,对外提供较为简洁的 API 接口,方便第三方应用快速集成互动直播功能,主要有:
- 支持主播和观众实时互动连麦,合并直播;
- 支持视频连麦和音频连麦;
- 支持互动直播过程中动态切换推流地址。
目前web端有两种方式支持互动直播
- PC Agent: 此版本依赖于 PC 插件进行视频的采集传输和音频的播放, 请下载并安装 PC 插件, 然后启动 PC 插件.
- WebRTC: 此版本无需依赖任何插件,浏览器即开即用, 但是需要开启https, http模式下无法捕捉摄像头和麦克风
SDK 兼容性要求:
- PC Agent: 方案基于webgl技术进行视频渲染,请注意浏览器兼容性情况。推荐最新和次新的版本。
- WebRTC: WebRTC API目前还处于完善的过程中,请注意浏览器兼容性情况,推荐使用最新稳定版本chrome(其他国内使用chrome内核的浏览器由于内核版本,自身支持条件不同,可能接通WebRTC,也可能失败,目前我们没有做验证)。
开发准备
互动直播能力作为网易云信 IM SDK 的 plugin 与 IM SDK 一起发布,并且依赖 IM SDK 的帐号系统。在接入互动直播时,开发者需要参考 IM 即时通讯开发指南 的 以下几个章节:
互动直播相关概念
房间 互动直播房间与云通信音视频多人会议的房间概念一致,以房间名称为唯一标识。互动直播房间需要先创建成功后才能加入,当所有用户都离开房间后,可以复用该房间名重新创建。
主播 是互动直播房间的主用户,推流地址的指定者,直播的主画面源。主播需要首先加入房间。一个互动直播房间同时只能有一个主播。
连麦者 是互动直播房间的次用户,直播辅画面源,与主播加入同一房间,即能实现实时连麦互动。需要主播在房间后才能加入。
观众 互动直播中除了主播和连麦者,观看直播画面的其他用户。可以通过停止播放直播并加入互动房间转变为连麦者。
互动直播与音视频多人会议 云通信互动直播基于音视频多人会议开发,通过将多人会议中用户的音视频数据处理后推送给视频流服务器实现直播和实时连麦。在功能的提供上,互动直播复用多人音视频接口,增加互动开关、推流地址指定与切换、直播角色指定等扩展设置。
互动直播接入
云通信提供简单的互动直播和连麦接口,只需要创建并加入互动房间即可以实现直播推流;连麦者使用相同的房间名加入互动房间即可以实现实时连麦互动。
音视频模块初始化
因为互动直播是基于音视频模块实现的,如果要使用互动直播,需要引入音视频SDK
首先需要初始化音视频SDK, 请参考音视频模块的内容。
创建互动直播房间
用创建接口创建一个互动直播房间:
netcall.createChannel({
channelName: channelName //必填
custom: custom //可选
webrtcEnable: webrtcEnable // 是否支持WebRTC方式接入,可选,默认为不开启
}).then(obj => {
// 创建房间成功后的上层逻辑操作
// eg: 初始化房间UI显示
// eg: 加入房间
}).catch(err => {
// 创建房间失败的处理
})
需要先创建房间,本人和其他人才能加入房间。
会议通过 channelName 字段做标识;可以通过扩展字段 custom 在会议的创建和加入之间传递自定义的额外信息。
如果需要与 WebRTC 客户端互通,需要指定 WebRTC 兼容开关 webrtcEnable
为 true, 该 WebRTC 为 Beta 版,如果没有 WebRTC 客户端参与, 不要打开该开关。
同一个房间名称,只在房间使用完以后才可以重复使用,开发者需要保证不会出现重复预订某房间名称而不使用的情况。
- 加入互动直播房间
WebRTC方式如下:
// 主播加入房间
netcall.joinChannel({
channelName: this.channelName,
type: WebRTC.NETCALL_TYPE_VIDEO,
liveEnable: true, // 开启互动直播,可选 true / false(默认不开启)
sessionConfig: {
isHost: true, //是否是主播,
bypassRtmp: true, //是否开启推流开关
rtmpRecord: true, //是否开启推流录制开关
rtmpUrl: '推流地址', // 推流地址, 主播必须设置, 请填写自己申请的推流地址
splitMode: WebRTC.LAYOUT_SPLITLATTICETILE, //主播和连麦者的布局模式, 主播必须设置
layout: '自定义布局模式'
}
}).then(obj => {
console.log('joinChanel', obj)
}, err => {
console.log('joinChannelErr', err)
})
// 连麦者加入房间
netcall.joinChannel({
channelName: this.channelName,
type: WebRTC.NETCALL_TYPE_VIDEO,
liveEnable: true, // 开启互动直播,可选 true / false(默认不开启)
sessionConfig: {
isHost: false, //非主播,必须设置false,
bypassRtmp: true, //是否开启推流开关
rtmpRecord: true //是否开启推流录制开关
}
}).then(obj => {
console.log('joinChannel', obj)
}, err => {
console.log('joinChannelErr', err)
})
PC Agent方式如下:
// 主播加入房间
netcall.joinChannel({
channelName: this.channelName,
type: WebRTC.NETCALL_TYPE_VIDEO,
webrtcEnable: true, // 是否开启WebRTC通话的支持, 对于WebRTC beta版,在有 webrtc 客户端参与的房间中需要打开该开关,如果没有 webrtc 客户端参与,不要打开该开关。
liveEnable: true, // 是否开启互动直播,可选 true / false(默认不开启)
sessionConfig: {
videoQuality: Netcall.CHAT_VIDEO_QUALITY_480P, // 视频分辨率,实际效果因画面采集频率和机器性能限制可能达不到期望值
videoFrameRate: Netcall.CHAT_VIDEO_FRAME_RATE_NORMAL, // 视频帧率,实际效果因画面采集频率和机器性能限制可能达不到期望值
videoBitrate: 100000, // 视频码率, >=100000 <= 5000000 有效
recordVideo: true, // 视频录制开关, 默认关闭
recordAudio: true, // 音频录制开关, 默认关闭
highAudio: false, // 高清语音开关, 默认关闭
bypassRtmp: true, // 推流开关, 默认关闭,推流相关配置前提开关打开
rtmpUrl: '推流地址', // 推流地址, 主播必须设置, 请填写自己申请的推流地址
rtmpRecord: true, // 推流服务端录制开关, 默认关闭
splitMode: Netcall.LAYOUT_SPLITLATTICETILE // 推流的布局, {@link Netcall.LAYOUT_*|布局类型}默认平铺
}
}).then(obj => {
console.log('joinChanel', obj)
}, err => {
console.log('joinChannelErr', err)
})
// 连麦者加入房间, 备注:连麦者请不要设置推流地址!
netcall.joinChannel({
channelName: this.channelName,
type: WebRTC.NETCALL_TYPE_VIDEO,
liveEnable: true, // 是否开启互动直播,可选 true / false(默认不开启)
sessionConfig: {
videoQuality: Netcall.CHAT_VIDEO_QUALITY_480P, // 视频分辨率,实际效果因画面采集频率和机器性能限制可能达不到期望值
videoFrameRate: Netcall.CHAT_VIDEO_FRAME_RATE_NORMAL, // 视频帧率,实际效果因画面采集频率和机器性能限制可能达不到期望值
videoBitrate: 100000, // 视频码率, >=100000 <= 5000000 有效
recordVideo: true, // 视频录制开关, 默认关闭
recordAudio: true, // 音频录制开关, 默认关闭
highAudio: false, // 高清语音开关, 默认关闭
bypassRtmp: true, // 推流开关, 默认关闭,推流相关配置前提开关打开
rtmpRecord: true, // 推流服务端录制开关, 默认关闭
splitMode: Netcall.LAYOUT_SPLITLATTICETILE // 推流的布局, {@link Netcall.LAYOUT_*|布局类型}默认平铺
}
}).then(obj => {
console.log('joinChannel', obj)
}, err => {
console.log('joinChannelErr', err)
})
- 互动直播过程中切换推流地址
主播可以调用如下接口,实时切换推流地址,实现某些视频流平台的防盗链功能。
netcall.updateRtmpUrl(url)
互动直播过程中己方音视频控制,可以调用音视频网络通话提供的接口,灵活控制互动直播过程:
开关己方麦克风、摄像头
静音 停止发送自己的音频数据有2种方式
- 调整自己的音频采集音量为0
- 关闭麦克风
视频画面屏蔽 停止发送自己的视频数据有3种方式,用户可根据自己的场景选择。
- 切换通话模式为音频模式,底层会停止发送视频数据:
netcall.switchVideoToAudio
- 关闭摄像头
- 角色设置为观众模式,这时将不再发送视频和音频数据:
netcall.changeRoleToAudience
- 切换通话模式为音频模式,底层会停止发送视频数据:
互动直播过程中对方音视频控制,可以调用音视频网络通话提供的接口,灵活控制互动直播过程(注意:多人请指定目标account或者uid):
屏蔽、放开对方的音频
- 屏蔽:保存当前对方音量,设置对方的播放音量为0
- 放开:恢复对方播放音量为之前保存的值
屏蔽、放开对方的视频
- 屏蔽:关掉对方视频流画面显示
- 放开:开启对方视频流画面显示
离开房间
netcall.leaveChannel().then(()=>{ // todo }).catch(()=>{ // todo })
当所有加入的人都离开了某房间以后,该房间对应的名称才可以被重复预订。
用户加入房间通知
// 有人加入多人房间
netcall.on('joinChannel', obj => {
// 通知上层有其他用户加入了房间。
})
- 用户离开房间通知
// 有人离开多人房间
netcall.on('leaveChannel', obj => {
// 通知上层有其他用户离开了房间。
})
音视频设备
提供麦克风、扬声器(听筒)、摄像头等设备的遍历、启动关闭、监听的接口
遍历设备
在启动设备前可以遍历设备获取本地设备列表用以选择性的开启音视频设备
netcall.getDevicesOfType(WebRTC.DEVICE_TYPE_VIDEO).then((devices) => {
console.log('视频设备列表', devices)
})
netcall.getDevicesOfType(WebRTC.DEVICE_TYPE_AUDIO_IN).then((devices) => {
console.log('音频设备列表', devices)
})
启动设备
可以启动麦克风、摄像头、本地采集音频播放器、对方语音播放器等,device填空的时候会启动系统首选项
netcall.startDevice({
type: WebRTC.DEVICE_TYPE_VIDEO, // 开启类型:音频、视频
device: deviceId // 设备id,选填(默认设备列表的第一项)
}).then(()=>{
// todo
}).catch(()=>{
// todo
})
结束设备
netcall.stopDevice({
type: WebRTC.DEVICE_TYPE_VIDEO // 结束类型:音频、视频
})
监听设备状态
通过设置设备监听,可以定时获知设备状态
netcall.on('deviceStatus', obj => {
console.log('on deviceStatus', obj)
})
由于开启设备监听后会定时检查设备状态,在不需要时结束监听
监听音频数据(音量)
netcall.on('audioVolume', obj => {
console.log('on audioVolume', obj)
})
设置音量采集大小
实时设置己方音频采集大小, 0-255
netcall.setCaptureVolume(100)
设置音量播放大小
设置对方音量播放大小, 0-255 多人房间需要传入目标account或者uid
netcall.setPlayVolume({
account: 'testaccount'
volume: 100
})