【Web SDK】常见集成问题集锦

此贴总结了目前用户集成 Agora Web SDK 过程中遇到的各类常见问题,希望能够帮助开发者们更简单地去集成 Web 端 SDK。也欢迎各位开发者们在本帖中讨论和补充。

更多 Web SDK 相关链接:
Agora Web SDK API Reference
快速集成 Agora Web SDK 并在 app 里实现音视频互动直播
SDK/Demo 下载

12个回答
H 回复于 2019-12-03 09:20

Agora Web SDK 支持哪些浏览器?

https://docs.agora.io/cn/faq/browser_support

回复·0
H 回复于 2019-12-03 09:22

Agora Web SDK 如何与 Agora Native SDK 互通?

  • 在通信模式下,Agora Web SDK 和 Agora Native SDK 默认互通,无需额外设置。
  • 在直播模式下,PC 或移动端用户(使用 Agora Native SDK 的用户)必须调用 enableWebSdkInteroperability 打开互通功能,详见移动、桌面、Web 端互通
回复·0
H 回复于 2019-12-03 09:23

如何在移动端使用 Web SDK?

Agora Web SDK 新增 H5 实时直播组件,支持在移动端网页播放音视频流。该功能可以实现通过在社交 app 内(如微信群、微信公众号、钉钉)分享网页链接,让用户在 app 中打开链接就能直接观看实时视频,降低了分享门槛,方便扩大目标受众范围。详情请参考:
https://docs.agora.io/cn/Interactive%20Broadcast/web_in_app?platform=Web

回复·0
H 回复于 2019-12-03 09:37

调用 API 常见报错


  • User is not in the session 报错原因: websocket 未建立连接。基本都是调用 API 时序不正确导致的。例如连接释放了还在调用 API,或者连接尚未建立就调用部分 API。

  • cannot read property “appendChild” of null: 这个报错一般是 play 指定的 dom 不存在或者 id 没有找到,基本都是业务逻辑处理的问题,例如 play 之前没有及时生成相应的父容器。

  • Invalid elementID :play 时指定的容器不符合参数规则。

  • UID_CONFLICT :同一个 uid 多次加入同一个频道导致互踢。请保持频道内 uid 的唯一性。

  • Failed to execute ‘addStream’ on ‘RTCPeerConnection’: parameter 1 is not of type ‘MediaStream’ :本地 stream 没有 init 成功就 publish 导致的。

  • media access MEDIA_NOT_SUPPORT: video/audio streams not supported yet /enumerateDevices() not supported :没有使用可支持的浏览器。或者没有使用 https / localhost 打开页面(由于浏览器的安全策略对除 127.0.0.1 以外的 HTTP 地址作了限制,Agora Web SDK 仅支持 HTTPS 协议或者 http://localhosthttp://127.0.0.1),请勿使用 HTTP 协议部署你的项目),导致没有权限调用底层的获取设备 API。

  • Cannot read property ‘stringUid’ of undefined : 一般都是由于没有 join 成功就 publish 导致的报错。

  • Uncaught TypeError: Failed to execute ‘createObjectURL’ on ‘URL’: No function was found that matched the signature provided / Uncaught DOMException: Failed to execute ‘addTransceiver’ on ‘RTCPeerConnection’: This operation is only supported in ‘unified-plan’. 在浏览器上开启了手机模拟调试导致。

  • INVALID_VENDOR_KEY:鉴权失败。appid 填写的不正确。以及,请检查是否有启用 APP 证书,若有启用,必须使用动态密钥鉴权方式,即 join 时需要传入正确的 Token 值。

  • video 标签的 status 是 paused 或 aborted
    paused 可能的原因:
    1)频繁操作 dom 导致浏览器暂停播放器;
    2)无法解码视频流;
    3)视频包需要等待音频包同步播放,而音频包播放不了,需要手动触发播放。关于自动播放策略的更多信息,请参考 Autoplay Policy Changes
    aborted 可能的原因:
    video 标签在 play 前被删除了。

  • Failed to set remote answer sdp: Called in wrong state: kStable: 这个错误是因为调用 switchDevice 导致的,该报错没有任何影响,在 2.9.0 及之后的版本不会再出现此报错。

  • cannot read property ‘stringuid’ of undefined:没有 join 成功就调用 publish 导致
回复·0
H 回复于 2019-12-03 09:43

针对 chrome 70+ 上出现的因 autoplay 策略改动导致本地订阅流无法自动播放音频和视频的问题,有以下几种方式可以规避:

1、在 play 的回调里面做处理,当 err.status!==aborted 时,创建一个按钮让用户手势点击,然后触发 resume,此时就可以播放音视频了;

// 引导用户点击按钮恢复视频播放
stream.play("agora_remote"+ stream.getId(), function(err){
        if (err && err.status !== "aborted"){
               // 播放失败,一般为浏览器策略阻止。引导用户用手势触发恢复播放            
            var r = confirm("显示远端视频");
            if (r == true) { 
                        stream.resume().then(
                        function (result) {
                              console.log('恢复成功:' + result);
                        }).catch(
                        function (reason) {
                              console.log('恢复失败:' + reason);
                       });
           } else { 
                console.log("未知原因导致无法播放,请联系技术支持!");
           }
        }
});

2、本地创建流,在本地流 init 成功后,再去 play 远端流,此时可以规避 autoplay 策略导致的问题;

// 观众端直接创建流来恢复视频播放
stream.play("agora_remote"+ stream.getId(), function(err){
        if (err && err.status !== "aborted"){
               // 播放失败,一般为浏览器策略阻止。引导用户用手势触发恢复播放            
             localStream = AgoraRTC.createStream({ audio: true, video:false,screen:false});
             localStream.init(function() {
                        stream.resume().then(
                        function (result) {
                              console.log('恢复成功:' + result);
                        }).catch(
                        function (reason) {
                              console.log('恢复失败:' + reason);
                       });
           }, function (err) {
                    console.log("getUserMedia failed", err.msg);
                     });
        }
});

此外,在 360 浏览器上可能会遇到一个特殊的 autoplay 现象:能看见远端流听不到远端流。此时也需要按照上述方式做相应的处理。

回复·0
H 回复于 2019-12-03 09:50

如何切换摄像头视频流和屏幕共享流?

请参考:https://docs.agora.io/cn/faq/switch_screen_camera_web

回复·0
H 回复于 2019-12-03 10:26

设备报错问题


NotAllowedError

用户拒绝了获取音视频设备的请求


OverConstrainedError

指定的要求无法被设备满足,此异常是一个类型为0verconst rainedError的对象,拥有一个constraint属性,这个属性包含了当前无法被满足的constraint对,如果你开启了多个Tab页同时推流,请确定分辨率采集是一致的。


NotFoundError

找不到满足请求参数的媒体类型。

一类已知问题:用户采用第三方的虚拟摄像头软件,会导致 chrome 识别不了这个摄像头,但是 360 浏览器能识别,原因: 该虚拟摄像头软件是 32 位的软件 ,只有 32 位的应用才能使用,所以需要安装 32 位的 chrome 才可以识别。


NotReadableError

尽管用户已经授权使用相应的设备,操作系统上某个硬件、浏览器或者网页层面发生的错误导致设备无法被访问。

一类已知问题:部分 win10 的笔记本需要用 Chrome 兼容 win7 的模式打开才能使用摄像头,不然会报错:could not start video source


AbortError

尽管用户和操作系统都授予了访问设备硬件的权利,并且也没有出现 NotReadableError 这类硬件引起的问题,但仍然有一些其它问题的出现,导致了设备无法被使用。


TypeError

constraints 对象未设置[空],或者都被设置为 false。


SecurityError

没有使用 HTTPS 或 localhost 协议。

回复·0
H 回复于 2020-04-08 03:11

为什么有时候 QQ、微信可以正常通话,Web SDK 却不行?

QQ、微信是应用层的直接调用,而 Agora Web SDK 依赖于浏览器开放的 WebRTC 技术,相比 QQ 和微信 中间隔了一层 WebRTC 的封装。可以理解为浏览器自己把音视频采集能力封装一层之后兼容性做的不够好,导致我们上层的应用出现这种情况。
对于这类问题,一般建议按照以下步骤进行排查:
1、检查声音驱动,尝试卸载或者升级;
2、更换录音设备,比如换个耳机;
3、更换通话设备,看下有没有问题。

回复·0
H 回复于 2020-04-08 03:18

Web 端常见视频相关问题

1、视频黑屏
一般都是设备导致的问题,这个时候可以先用 Agora Video Call app 试试。如果 AVC 也不行的话,转战 WebRTC 原生 demo,打开之后看看 console 里面有什么报错。
一般错误:

  • could not start video source
  • navigator.getUserMedia error: {name: “NotReadableError”, …}

建议的解决方案:

  • 尝试在设备管理器里面卸载相机或者图像驱动,然后点击操作中的扫描检测硬件改动,会自动重装驱动,之后再检测是否可用。
  • 如果还是不行的话,用第三方工具(360驱动大师等)更新相应驱动,重启电脑后再行测试。

2、视频采集帧率低
先使用 Agora Web Demo 或者 WebRTC 原生 demo 测试一下,看下几个主流分辨率配置下,是否都会采集帧率低。有可能是因为某些摄像头本身就存在一些问题,导致不适配某种分辨率。

回复·0
H 回复于 2020-04-08 03:26

使用 Web SDK,听不到声音,怎么排查?

发送端排查步骤:
建议用户做以下紧急处理:
1、如果持续 10 秒听不到,让用户刷新浏览器页面再看看。不行的话请关闭浏览器再重新打开,进入频道。

2、如果还是不行,请打开这个 demo,然后看 console 里面是否有报错或者警告信息。音频设备的报错一般都是 could not start the audio source,有这个报错的话说明浏览器通过驱动调查设备的时候出错了,很可能是这个设备有异常或者驱动有问题,这个时候可以直接跳到第三步排查步骤。如果没有这个报错的话,说明浏览器可以调用输入音频设备,但是未知的原因导致拿不到音量数据,这个时候打开 demo,然后对着听筒说话,instant(瞬间音量)和 slow(持续音量)会有波动(instant 能变化到绿色就表明老师采集没有问题)。
如果用上述 WebRTC 官方 demo 测试音量就有问题,那么问题基本就是浏览器和设备的交互异常,这个时候先参考第三步的方式测试一下,然后跳到第四步。

3、打开 windows 中的声音控制面板,点击声音录制设备,看看用户设备里面有几个输入音频设备并且默认用的是哪一个,建议把麦克风阵列设置为默认设备/默认通信设备(可以的话把其他录制设备都禁用掉),然后刷新页面,重新测试看下是否能恢复采集。
如果还不行的话,根据已有经验,可以检查用户端的声卡驱动:windows 用 chrome60 以上版本的浏览器可能会出现采集没有声音的问题,建议用软件( 360 驱动大师、驱动精灵等软件)查看本地的声卡驱动是否能够更新、以及声卡驱动发布的时间点,一般声卡驱动都是 2015 年之前或者更老的版本,建议用户自行升级声卡驱动,然后重启电脑之后测试是否采集恢复正常。

4、如果用户调用设备没有问题,但是音量就是很小很小,检测驱动也是最新版本,这个时候可以查看输入音频设备的详细信息,看一下驱动版本更新历史:
1)在某些电脑上,回退驱动版本,设备采集可能可以恢复正常;
2)很大可能用户那边有几个音频输入设备,默认都麦克风阵列不可用,但是其他的比如混音可以用,但是我们要的结果是把麦克风调试成可用的。按照现在的经验来看,设备音频突然出现问题,99.9% 和音频驱动相关,好好琢磨驱动的调整基本都能解决问题。

5、对于经常出现问题的用户,使用前一定一定一定要做好自检,这样才可以保证通话质量。
inputelevel 查看方式:
打开 chrome://webrtc-internals/ 点击相应的连接,点击 Stats graphs for ssrc_*********(随机id)_send (ssrc) (audio) ,里面会显示音频采集发送的所有信息

回复·0
H 回复于 2020-04-17 09:21

调用 getTransportStats 返回的数据都是 undefined

数据可能需要耗费 0-3 秒时间返回。试下循环调用:

setInterval(() => {
    rtc.client.getTransportStats(stats => {console.log(JSON.stringify(stats))})
}, 1000)
回复·0
用户177484 回复于 2023-07-10 10:23 · IP属地山东

我在web3.6.1的sdk中找到了switchDevice,但是4.13中没有,为什么官网api还有这个方法。官网最新的sdk也没有这个方法

回复·1