WebRTC篇
一、基础环境问题
Web 端 SDK 支持哪些浏览器?
TRTC Web SDK 对浏览器的详细支持度。
浏览器兼容信息
操作系统 | 浏览器类型 | 浏览器最低 | SDK 版本要求 | 接收(拉流) | 发送(推流) | 屏幕分享 |
Windows | 桌面版 Chrome 浏览器 | 56+ | - | 支持 | 支持 | 支持 Chrome72+ 版本 |
桌面版 QQ 浏览器(极速内核) | 10.4+ | - | 支持 | 支持 | 不支持 | |
桌面版 Firefox 浏览器 | 56+ | v4.7.0+ | 支持 | 支持 | 支持 Firefox66+ 版本 | |
桌面版 Edge 浏览器 | 80+ | v4.7.0+ | 支持 | 支持 | 支持 | |
桌面版搜狗浏览器(高速模式) | 11+ | v4.7.0+ | 支持 | 支持 | 支持 | |
桌面版搜狗浏览器(兼容模式) | - | - | 不支持 | 不支持 | 不支持 | |
桌面版 Opera 浏览器 | 46+ | v4.7.0+ | 支持 | 支持 | 支持 Opera60+ 版本 | |
桌面版 360 安全浏览器(极速模式) | 13+ | v4.7.0+ | 支持 | 支持 | 支持 | |
桌面版 360 安全浏览器(兼容模式) | - | - | 不支持 | 不支持 | 不支持 | |
桌面版微信内嵌浏览器 | - | - | 支持 | 不支持 | 不支持 | |
桌面版企业微信内嵌浏览器 | 4.0.8+(企业微信版本) | - | 支持 | 支持 | 不支持 | |
Mac OS | 桌面版 Safari 浏览器 | 11+ | - | 支持 | 支持 | 支持 Safari13+ 版本 |
桌面版 Chrome 浏览器 | 56+ | - | 支持 | 支持 | 支持 Chrome72+ 版本 | |
桌面版 Firefox 浏览器 | 56+ | v4.7.0+ | 支持 | 支持 | 支持 Firefox66+ 版本(注意[3]) | |
桌面版 Edge 浏览器 | 80+ | v4.7.0+ | 支持 | 支持 | 支持 | |
桌面版 Opera 浏览器 | 46+ | v4.7.0+ | 支持 | 支持 | 支持 Opera60+ 版本 | |
桌面版微信内嵌浏览器 | - | - | 支持 | 不支持 | 不支持 | |
桌面版企业微信内嵌浏览器 | 4.0.8+(企业微信版本) | - | 支持 | 支持 | 不支持 | |
Android | 微信内嵌浏览器(TBS 内核) | - | - | 支持 | 支持 | 不支持 |
微信内嵌浏览器(XWEB 内核) | - | - | 支持 | 支持 | 不支持 | |
企业微信内嵌浏览器 | - | - | 支持 | 支持 | 不支持 | |
移动版 Chrome 浏览器 | - | - | 支持 | 支持 | 不支持 | |
移动版 QQ 浏览器 | - | - | 不支持 | 不支持 | 不支持 | |
移动版 UC 浏览器 | - | - | 不支持 | 不支持 | 不支持 | |
iOS 12.1.4+ | 微信内嵌浏览器 | - | - | 支持 | 不支持 | 不支持 |
iOS 14.3+ | 微信内嵌浏览器 | 6.5+(微信版本) | - | 支持 | 支持 | 不支持 |
iOS | 企业微信内嵌浏览器 | 4.0.8+(企业微信版本) | - | 支持 | 支持 | 不支持 |
iOS 11.0+ | 移动版 Safari 浏览器 | 11+ | - | 支持 | 支持 | 不支持 |
iOS 12.1.4+ | 移动版 Chrome 浏览器 | - | - | 支持 | 不支持 | 不支持 |
iOS 14.3+ | 移动版 Chrome 浏览器 | - | - | 支持 | 支持 | 不支持 |
对于上述没有列出的环境,可以在当前浏览器打开 TRTC 能力测试 测试是否完整的支持 WebRTC 的功能。
C++音视频开发全套进阶教程,让你少走弯路,避免盲目自学。教程包含(FFmpeg/H265/H264/RTMP/RTSP/WebRTC/SRS流媒体服务器)_哔哩哔哩_bilibili
页面访问协议说明
浏览器厂商出于对用户安全、隐私等问题的考虑,限制网页在 https 协议下才能正常使用 TRTC Web SDK(WebRTC)的全部功能。为确保生产环境用户顺畅接入和体验 TRTC Web SDK 的全部功能,请使用 https 协议访问音视频应用页面。
注:本地开发可以通过 http://localhost 或者 file:// 协议进行访问。
URL域名及协议支持情况请参考如下表格:
应用场景 | 协议 | 接收(拉流) | 发送(推流) | 屏幕分享 | 备注 |
生产环境 | https协议 | 支持 | 支持 | 支持 | 推荐 |
生产环境 | http协议 | 支持 | 不支持 | 不支持 | |
本地开发环境 | http://localhost | 支持 | 支持 | 支持 | 推荐 |
本地开发环境 | http://127.0.0.1 | 支持 | 支持 | 支持 | |
本地开发环境 | http://[本机IP] | 支持 | 不支持 | 不支持 | |
本地开发环境 | file:// | 支持 | 支持 | 支持 |
注意:
如果您的开发环境无法通过localhost访问,也没有 https 协议,建议您使用反向代理工具,将某个 https 域名的访问请求代理到您的开发环境,例如:whistle,fiddler
二、推拉流问题
Web 端 SDK 日志中报错 NotFoundError、NotAllowedError、NotReadableError、OverConstrainedError 以及 AbortError 分别是什么意思?
错误名 | 描述 | 处理建议 |
NotFoundError | 找不到满足请求参数的媒体类型(包括音频、视频、屏幕分享)。 例如:PC 没有摄像头,但是请求浏览器获取视频流,则会报此错误。 | 建议在通话开始前引导用户检查通话所需的摄像头或麦克风等设备,若没有摄像头且需要进行语音通话,可在 TRTC.createStream({ audio: true, video: false }) 指明仅采集麦克风。 |
NotAllowedError | 用户拒绝了当前的浏览器实例的访问音频、视频、屏幕分享请求。 | 提示用户不授权摄像头/麦克风访问将无法进行音视频通话。 |
NotReadableError | 用户已授权使用相应的设备,但由于操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。 | 根据浏览器的报错信息处理,并提示用户“暂时无法访问摄像头/麦克风,请确保当前没有其他应用请求访问摄像头/麦克风,并重试”。 |
OverConstrainedError | cameraId/microphoneId 参数的值无效。 | 请确保 cameraId/microphoneId 传值正确且有效。 |
AbortError | 由于某些未知原因导致设备无法被使用。 |
Web 端用宽高设置推流的分辨率是所有浏览器都适用吗?
由于设备和浏览器的限制,视频分辨率不一定能够完全匹配,在这种情况下,浏览器会自动调整分辨率使其接近 Profile 对应的分辨率。
Web端屏幕分享的样式支持修改吗?
屏幕分享的样式由浏览器控制,目前不能修改。
Web端支持混流吗?
Web端支持发起混流,点击查看如何调用混流转码接口 。
Web 端 SDK 在使用的过程中拔掉摄像头,怎么清除摄像头列表里面的数据?
可以尝试调用 TRTC.getCameras 方法是否能获取新的设备列表,如果仍然有拔掉的摄像头信息,说明浏览器底层也没有刷新这个列表,Web 端 SDK 也获取不到新的设备列表信息。
三、播放问题
音视频互通过程中出现有画面没有声音问题?
因浏览器自动播放策略限制,音频播放会出现 PLAY_NOT_ALLOWED 异常,此时业务层需要引 导用户手动操作 Stream.resume() 来恢复音频播放,自动播放受限处理建议 。
未知异常导致,请通过监控仪表盘查询收发两端的 audioLevel & audioEnergy。
Web通话画面显示不了?
检查一下 Web 页面上是否有获取到数据,在确认数据收发正常时,可以检查 <video> 元素的 srcObject 属性是否赋值了正确的 mediaStream 对象,如果赋值错误,肯定显示不了。
Web 通话过程中出现回声、杂音、噪声、声音小?
通话双方的设备相距太近的时候,属于正常现象,测试时请相互距离远一点。当其他端听到 Web 端的声音存在回声、噪声、杂音等情况时,说明 Web 端的 3A 处理没有生效。
若您使用了浏览器原生 getUserMedia API 进行自定义采集,则需要手动设置 3A 参数:
- echoCancellation:回声消除开关
- noiseSuppression:噪声抑制开关
- autoGainControl:自动增益开关? 详细设置参考 媒体追踪约束 。
若您使用 TRTC.createStream 接口进行采集,则无需手动设置 3A 参数,SDK 默认开启 3A。
四、其他
运行 Web 端 SDK 时,出现错误:“RtcError: no valid ice candidate found”该如何处理?
出现该错误说明 TRTC Web SDK 在建立媒体传输通道时失败,请检查防火墙配置。TRTC Web SDK 依赖以下端口进行数据传输,请将其加入防火墙白名单,配置完成后,您可以通过访问并体验 官网 Demo 检查配置是否生效。
请查看 应对防火墙限制相关
出现客户端错误:"RtcError: ICE/DTLS Transport connection failed" 或 “RtcError: DTLS Transport connection timeout”该如何处理?
出现该错误说明 TRTC Web SDK 在建立媒体传输通道时失败,请检查防火墙配置。TRTC Web SDK 依赖以下端口进行数据传输,请将其加入防火墙白名单,配置完成后,您可以通过访问并体验 官网 Demo 检查配置是否生效。
Web 端 SDK 可以获取当前音量大小吗?
可以通过 getAudioLevel 获取当前音量大小
什么情况会触发 Client.on(‘client-banned’)?
通过后台 RESTAPI 移除用户 会触发这个事件。需要注意的是同名用户同时登录不会触发这个事件,这种行为是业务逻辑错误,业务应当从逻辑上避免。若客户需要房间内成员互踢管理,建议客户使用 WebIM SDK实现相关逻辑。
粉丝福利, 免费领取C++音视频学习资料包+学习路线大纲、技术视频/代码+资料,内容包括(音视频开发,面试题,FFmpeg ,webRTC ,rtmp ,hls ,rtsp ,ffplay ,编解码,推拉流,srs),有需要的可以进企鹅裙702368736领取哦~
Web 端是否可以监听远端离开房间?
支持监听远端退房事件,建议使用客户端事件中的 client.on('peer-leave') 事件实现远端用户退房通知。
实时音视频的 Web 端、小程序端、PC 端是不是同步的?
是的,实时音视频支持全平台互通。
Web 端 SDK 怎么录制纯音频推流?为什么在控制台开启自动旁路和自动录制录制不成功呢?
需要设置 createClient 的 pureAudioPushMode 参数。
出现Client.on(‘error’)问题该如何处理?
这个表示 SDK 遇到不可恢复错误,业务层要么刷新页面重试要么调用 Client.leave 退房后再调用 Client.join 重试。
小程序和 Web 端支持自定义流ID吗?
Web端4.3.8以上版本已支持自定义流ID,可以更新SDK版本。 小程序当前暂不支持。
Web 端如何在屏幕分享的时候采集系统声音?
采集系统声音只支持 Chrome M74+ ,在 Windows 和 Chrome OS 上,可以捕获整个系统的音频,在 Linux 和 Mac 上,只能捕获选项卡的音频。其它 Chrome 版本、其它系统、其它浏览器均不支持。
Web 端如何切换摄像头和麦克风?
可以先获取到系统的摄像头和麦克风设备后,调用 switchDevice 来进行切换。