播放
该章节主要介绍和播放相关的功能。包括:播放本地音频、播放本地视频、播放远端音频、播放远端视频等功能,通过阅读本章节,您可以快速了解如何播放本地和远端的音频,如何调节音量大小,如何播放本地和远端视频,如何调节画面大小等。
预览本地摄像头
API介绍
- 成功开启摄像头(调用startDevice)之后,可以调用该方法进行本地预览
示例
var node = document.getElementById('localVideo')
netcall.startLocalStream(node)
停止预览本地摄像头
API介绍
- 点对点通话结束后,可以关闭设备,停止预览画面和播放音频,可以通过该方法停止预览本地画面(只是本地页面不展示,视频流还是在发送到对端,对端仍能够看到你本地画面)
- 多人会议中,如果自己离开了会议,可以关闭设备,停止预览画面和播放音频,可以通过该方法停止预览本地画面
示例
netcall.stopLocalStream()
- 参数说明
参数名 | 类型 | 说明 |
---|---|---|
node | dom | [可选]视频显示的dom容器 |
- 特殊说明
- 如果是顶对点通话并且在实例化Netcall的时候已经传入了参数
container
,此时可以不必再传入参数
- 如果是顶对点通话并且在实例化Netcall的时候已经传入了参数
预览远程视频流
API介绍
- 点对点通话时,在收到
callAccepted
通知后,可以开启设备,和预览本地视频流,预览远程视频流(PC Agent) - 多人会议中,在收到
joinChannal
通知后,可以预览对应的加入同学的远程视频流(PC Agent) - 点对点通话时,在收到
remoteTrack
通知后,预览远程视频流(webrtc) - 多人会议中,在收到
remoteTrack
通知后,可以预览对应的加入同学的远程视频流(webrtc) - 该方法会在
then
里抛出生成的video标签, 可以做自定义操作!
- 点对点通话时,在收到
示例
var node = document.getElementById('localVideo')
var param = {
account: 'testAccount',
node: node,
poster: 'http://dev.netease.im/images/logo2.png'
}
// 开启远程视频预览
netcall.startRemoteStream(param).then(function(video){
console.log('xxx的视频标签', video)
})
- 参数说明
param对象包含了需要开启视频流的账号和对应的dom容器节点
param参数属性 | 类型 | 说明 |
---|---|---|
account | string | [可选]对方的账号 |
node | dom | [可选]视频显示的dom容器 |
poster | string | [可选]当没有视频流时默认的视频海报图片 |
- 特殊说明
- 点对点通话并且在实例化Netcall的时候已经传入了参数
remoteContainer
,此时可以不必再传入参数 param - 多人会议中 param 为
必传参数
- 点对点通话并且在实例化Netcall的时候已经传入了参数
停止预览远程视频流
API介绍
- 点对点通话结束后,可以通过该方法停止预览远程画面
- 多人会议中,如果有参与者离开了会议,可以通过该方法停止预览对应目标的视频流画面
- 多人会议中,如果自己离开了会议,可以通过该方法停止预览对应目标的视频流画面,这里不需要传入account参数
示例
var account = 'testAccount'
netcall.stopRemoteStream(account)
- 参数说明
参数名 | 类型 | 说明 |
---|---|---|
account | string | 目标账号 |
- 特殊说明
- 点对点通话结束后,可以不用传account参数
- 多人会议中 account 为必传参数,如果不传,将默认停止预览所有当前参与会议的远程视频流
播放本地音频
API介绍
- 成功开启麦克风之后,可以调用该方法播放本地麦克风捕获的音频,并且会把捕获到的音频发送到对端
示例
netcall.startDevice({
type: Netcall.DEVICE_TYPE_AUDIO_OUT_LOCAL
}).catch(function(err) {
console.log('播放自己的声音失败', err)
})
停止播放本地音频
API介绍
- 点对点通话结束后,可以通过该方法停止播放本地音频,并且停止向对端发送音频流
- 多人会议中,如果自己离开了会议,可以通过该方法停止播放本地音频
示例
netcall.stopDevice(Netcall.DEVICE_TYPE_AUDIO_OUT_LOCAL)
播放对方音频
API介绍
- 通话开始后,如果对方成功开启了麦克风,我们可以通过该方法播放对方的声音
示例
netcall.startDevice({
type: Netcall.DEVICE_TYPE_AUDIO_OUT_CHAT
}).catch(function() {
console.log('播放对方的声音失败')
})
停止播放所有远程音频
API介绍
- 点对点通话结束后,可以通过该方法停止播放远程音频
- 多人会议中,如果自己离开了会议,可以通过该方法停止播放远程音频
示例
netcall.stopDevice(Netcall.DEVICE_TYPE_AUDIO_OUT_CHAT)
设置播放音量大小
API介绍
- 点对点通话中,可以通过该方法设置播放音量的大小,范围0-255, 必填
- 多人会议中,可以通过该方法设置播放音量的大小,范围0-255, 必填
示例
netcall.setPlayVolume(255)
监听房间里其他人的音量
API介绍
- 在每一通通话中每隔200ms都会把房间内远端用户的音量回调给本端用户,音量的范围在[0, 100]之间。
示例
netcall.on('speaker', data =>{
//data格式是Array格式,数组的元素是Objec格式,内部属性包括account(成员名称)、volume(音量大小)
data.forEach(item => {
console.log(`${item.account}的说话音量: ${item.volume}`)
})
})
设置本地视频画面大小
API介绍
- 开启预览本地摄像头捕获的视频流后,可以通过该方法动态调节预览画面的大小
示例
var param = {
width: 500,
height: 400,
cut: true
}
netcall.setVideoViewSize(param)
- 参数说明
param 对象包含了需要设置预览视频画面大小和是否进行裁剪
param参数属性 | 类型 | 说明 |
---|---|---|
width | number | 需要预览画面的宽度 |
height | number | 需要预览画面的高度 |
cut | bool | 是否进行裁剪 |
- 特殊说明
- cut设置为false时,设置的预览大小将按照捕获的原始视频宽高比进行等比缩放,会出现某一个方向撑不满容器,导致黑边的情况
- cut设置为true时,默认将原始画面按照1:1进行裁剪
- cut对WebRTC模式无效,仅对Agent模式有效。详见关于Web音视频setVideoViewRemoteSize接口cut参数的说明。
设置远程视频画面大小
API介绍
- 收到远程流并启动预览之后,可以通过该方法动态调节预览画面的大小,用法和上面的 设置本地视频画面大小 一样
示例
var param = {
account: 'testAccount',
width: 500,
height: 400,
cut: true
}
netcall.setVideoViewRemoteSize(param)
- 参数说明
param 对象包含了需要设置预览视频画面大小和是否进行裁剪
param参数属性 | 类型 | 说明 |
---|---|---|
account | string | 需要调节画面大小的目标账号 |
width | number | 需要预览画面的宽度 |
height | number | 需要预览画面的高度 |
cut | bool | 是否进行裁剪(默认不裁剪) |
- 特殊说明
- account 设置为空或者不传时,将默认设置所有远程流的预览画面大小(多人会议中)
- cut设置为false时,设置的预览大小将按照捕获的原始视频宽高比进行等比缩放,会出现某一个方向撑不满容器,导致黑边的情况
- cut设置为true时,默认将原始画面按照1:1进行裁剪
- cut对WebRTC模式无效,仅对Agent模式有效。详见关于Web音视频setVideoViewRemoteSize接口cut参数的说明。
视频和演示混频功能
API介绍
- 该接口可用于设置视频和演示混频功能
- 1、开启摄像头或者演示之前调用(即现在还没有开启过摄像头和演示),调用该接口sdk会记录该配置,此后用户在开启摄像头之后,如果有需要开启演示(或者先开启了摄像头,如果有需要开启演示),那么sdk会做混合视频和演示,将视频和演示一同传递到对端
- 2、开启摄像头或者演示之后调用,调用该接口sdk会记录该配置,后面再开启演示或者摄像头,那么sdk会做混合视频和演示,将视频和演示一同传递到对端
- 3、视频和演示混频之后调用,即当前已经在混频了,调用该接口可以修改相关参数,比如说摄像头的布局和压缩大小,sdk可以动态的更新
- 请注意:
webrtc版本SDK才支持该API
示例
var param = {
enableMixVideo: true,
videoLayout: Netcall.LAYOUT_TOP_RIGHT,
videoCompressSize: Netcall.CHAT_VIDEO_QUALITY_MEDIUM
}
netcall.setMixConf(param)
- 参数说明
param 对象包含了需要设置视频和演示混频的参数
param参数属性 | 类型 | 说明 |
---|---|---|
enableMixVideo | bool | 是否启动混频功能,如果想取消混频,这里设置false即可 |
videoLayout | number | 混频时摄像头的布局具体值请参照这里 |
videoCompressSize | number | 混频时摄像头压缩的比例,由于演示画面的大小是Netcall.CHAT_VIDEO_QUALITY_720P,为了防止混频时视频画面过大,建议采用Netcall.CHAT_VIDEO_QUALITY_HIGH及以下的画面大小具体值请参照这里 |
音视频播放状态检测
API介绍
- 该接口用于帮助用户检测音视频播放的状态,并且给出异常时的原因
- 请注意:
webrtc版本SDK才支持该API
示例
netcall.getPlayState(account).then(res => {
console.log('播放状态: ', res.audioState)
console.log('播放状态: ', res.videoState)
}).catch(err => {
console.log('播放状态失败: ', err)
})
- res参数说明
res 对象包含了检测到的结果
参数属性 | 类型 | 说明 |
---|---|---|
audioState | string | 音频播放状态 |
videoState | string | 视频播放状态 |
audioState参数属性 | 类型 | 说明 |
---|---|---|
isPlaying | string | 音频播放状态 |
playErrorReason | string | 音频播放异常原因 |
videoState参数属性 | 类型 | 说明 |
---|---|---|
isPlaying | string | 视频播放状态 |
playErrorReason | string | 视频播放异常原因 |
音频播放说明
各个浏览器都在限制声音的自动播放,这里以Chrome、Safari、Firefox为例说明
Chrome
sdk优化过音频播放逻辑,一般是用户再有页面刷新的业务场景时,才可能出现音频播放失败的问题,因为此时用户还没有交互
- 自动播放会报错
- chrome浏览器不允许声音自动播放,如果用户显式调用play进行播放会出现如下报错:DOMException: play() failed because the user didn't interact with the document first.(意思是说,用户还没有交互,不能调play)
解决方案
- 手动修改浏览器配置:用户可以手动修改浏览器的配置,来解决该问题graph TB A(打开chrome浏览器) --> B[输入chrome://flags/#autoplay-policy] B --> C[在配置页面找到Autoplay policy] C --> D[把 Default 修改为 No user gesture is required] D --> E[重启浏览器使配置生效]
用户手势触发:用户还没有交互,音频不能自动播放,用户的交互包括用户触发的touchend, click, doubleclick或者是 keydown事件,在这些事件里面音频就能够正常播放了。
因此开发者可以在web页面上加一个类似静音的标志按钮,在用户点击按钮时,调用sdk的音频播放接口(播放本地音频 、播放对方音频)
- 手动修改浏览器配置:用户可以手动修改浏览器的配置,来解决该问题
Safari
Safari浏览器可能出现音频无法播放的问题
- 自动播放会报错
- Safari的报错提示如下:NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
解决方案
- 手动修改浏览器配置:用户可以手动修改浏览器的配置,来解决该问题graph TB A(点击系统桌面左上角的Safari浏览器) --> B[选择此网站的设置] B --> C[在设置窗口中找到 自动播放 选项] C --> D[把 停止播放含声音的媒体 修改为 允许全部自动播放] D --> E[重启浏览器使配置生效]
用户手势触发:用户还没有交互,音频不能自动播放,用户的交互包括用户触发的touchend, click, doubleclick或者是 keydown事件,在这些事件里面音频就能够正常播放了。
因此开发者可以在web页面上加一个类似静音的标志按钮,在用户点击按钮时,调用sdk的音频播放接口(播放本地音频 、播放对方音频)
- 手动修改浏览器配置:用户可以手动修改浏览器的配置,来解决该问题
Firefox
Firefox浏览器可能出现音频、视频无法播放的问题
- 自动播放会报错
- Firefox的报错提示如下:NotAllowedError: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
- 解决方案
- 手动修改浏览器配置:用户可以手动修改浏览器的配置,来解决该问题graph TB A(打开Firefox浏览器) --> B[输入about:config] B --> C[在搜索栏搜索media.autoplay.default] C --> D[把 1 修改为 0] D --> E[重启浏览器使配置生效]
- 手动修改浏览器配置:用户可以手动修改浏览器的配置,来解决该问题
本篇文档内容是否对您有帮助?
有帮助
我要吐槽
此文档对你是否有帮助
×
有帮助
我要吐槽
×