2022「音视频Web SDK」常见FAQ

Q1:如何处理常见的 Web 浏览器控制台报错?

将 Agora Web SDK 集成到你的 Web 应用后,遇到问题时可以通过浏览器控制台打印的日志进行调试。本文列出控制台日志中常见的错误和原因。

官网参考: https://docs.agora.io/cn/All/faq/console_error_web


Q2:如何在网页端通话中切换音视频输入设备?

音视频输入设备通过设备 ID(deviceId) 标识,每个音视频设备均有一个唯一的设备 ID,可以通过 getDevices 方法获取。设备 ID 是随机生成的,部分情况下同一个设备的 ID 可能会改变,因此我们建议每次切换设备时都先调用 getDevices 获取设备 ID。

官网参考: https://docs.agora.io/cn/All/faq/switchdevice_web


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

Agora Web SDK 3.x 及之前版本: https://docs.agora.io/cn/All/faq/switch_screen_camera_webAgora Web

SDK 4.x 版本: https://docs.agora.io/cn/live-streaming-premium-4.x/screensharing_web_ng?platform=Web


Q4:setEnabled 和 setMuted 有什么区别?

官网链接: https://docs.agora.io/cn/live-streaming-premium-legacy/faq/differences_between_setenabled_and_setmuted?platform=Web

Web SDK 4.x 和 3.x 均提供 API 用于控制本地音视频的采集和发送,这些 API 的区别详见下表。

API采集发送恢复时间
(3.x) Mute 相关方法:
Stream.muteAudio
Stream.unmuteAudio
Stream.muteVideo
Stream.unmuteVideo
Mute 后 SDK 不会停止音视频采集。
摄像头的指示灯不会关闭。
Mute 视频后 SDK 发送黑帧。Mute 音频后 SDK 发送静音包。被 Mute 的用户也会被算为发流用户,单个频道内最多 17 位用户同时发流。Mute 后再 Unmute,恢复时间较快。
(4.x) LocalTrack.setEnabled调用 setEnabled 禁用轨道后 SDK 会停止音频或视频采集。摄像头的指示灯会关闭。调用 setEnabled 禁用轨道后 SDK 不发送任何数据。轨道被禁用的用户不会被算为发流用户。禁用轨道后再启用,音视频恢复时间较慢。
(4.x) LocalTrack.setMuted调用 setMuted Mute 轨道后,SDK 不会停止音视频采集。摄像头的指示灯不会关闭。调用 setMuted Mute 轨道后 SDK 不发送任何数据。被 Mute 的用户不会被算为发流用户。Mute 轨道后再 Unmute,恢复时间较快。

⚠️注意:setEnabled 和 setMuted 不能同时调用。


Q5:Web SDK支持的浏览器

官网链接:浏览器支持 - 视频通话 - 文档中心 - 声网Agora桌面端

Web SDK 对桌面端浏览器的支持情况详见下表:

操作系统浏览器收流发流
macOSChrome
Firefox
Safari
Edge
支持支持
WindowsChrome
Firefox
Edge
支持支持
ChromeOSChrome支持支持

为保证最佳的用户体验,Agora 建议在最新版本的操作系统中使用上述浏览器的最新版本:

下载 Chrome 官方最新版本 :https://www.google.com/intl/zh-CN/chrome/

下载 Firefox 官方最新版本: https://www.mozilla.org/firefox/new/

下载 Edge 官方最新版本: https://microsoft.com/edge

下载 Safari 官方最新版本: https://support.apple.com/en-hk/HT201541

移动端自 4.6.0 起,Web SDK 优化了在移动端浏览器上的体验。

如你想提升在移动端的体验,Agora 建议你升级到 4.x 最新版本。

AndroidAndroid 支持自研 WebView 或引入第三方 WebView,不同设备、不同应用的 WebView 可能实现不同,因此对 Web SDK 的支持与应用版本和设备硬件有关。

浏览器或应用
收流发流
Chrome 浏览器官方最新版本支持支持
微信最新版本支持支持

iOS

iOS 只支持系统 WebView,因此对 Web SDK 的支持只与 iOS 系统版本有关。

浏览器和应用功能
VP8H.264
内嵌 WebView 的应用,如微信内置浏览器和 Chrome 浏览器收流iOS 12.2 及以后版本
iOS 12.1.4 及以后版本
内嵌 WebView 的应用,如微信内置浏览器和 Chrome 浏览器发流iOS 14.3 及以后版本iOS 14.3 及以后版本
Safari 浏览器发流和收流iOS 12.2 及以后版本iOS 11 及以后版本


Q6:移动端如何使用 Agora Web SDK?

Agora Web SDK 是基于 WebRTC 实现音视频通信的,因此依赖于浏览器对 WebRTC 的支持。

尽管移动端主流的浏览器都支持 WebRTC,但是由于平台和一些应用内置浏览器的实现各不相同,移动端对音视频编解码的支持情况比较复杂,您需要额外关注移动端各种应用场景下对发送和接收音视频流的支持。

具体支持情况请参考文档: https://docs.agora.io/cn/All/faq/web_on_mobile


Q7:如何将指定用户移出频道?

官网链接: https://docs.agora.io/cn/video-legacy/faq/kick_user

在实时音视频互动场景中,通常会有将指定用户移出频道的需求。Agora 根据实际场景需求,提供如下三种解决方案:

方案一

场景:通话结束后,用户(多见于 Web 用户)忘记离开频道。虽然没有实际通话,但会产生用量。

方案:为防止这种情况发生,可以使用音量提示回调(onAudioVolumeIndication),或在 app 层监测用户在一段时间内是否发布音频流,来确定用户是否在通话中。如否,则在 app 逻辑中,调用 leaveChannel 主动下线。

方案二

场景:有些日程安排类 app 需要按设定时间结束通话或会议。如会议定于 10 点开始,时长 1 个小时,则 app 需要在 11 点左右结束当前会议。

方案:你可以选择如下任意一种方案实现:使用 Token 的有效时间戳 (privilegeExpiredTs 参数)。将 Token 的有效时间戳设为会议结束的时间,超过了这个时间,用户就自动被移出频道。详见在服务端生成 Token。使用服务端 RESTful API 实现踢人功能。在 app 逻辑中记住用户 ID 以及频道名,然后使用创建踢人规则 API 将指定用户移出频道。你可以将封人时间(time 参数)设为 0,保证用户离开当前频道后,可以加入其他频道。详见创建踢人规则。

方案三

场景:在直播间,如果遇到连麦用户发表不良言论等情况,房主需要让该用户离开直播间。

方案:你可以搭配使用 RTM 的点对点消息功能。通过 sendMessageToPeer 发送下线通知,对方通过 onMessageReceived 回调收到该消息后,主动调用 RTC SDK 的 leaveChannel 方法离开频道。


Q8:如何解决 Web 端屏幕共享的质量问题?

官网链接: https://docs.agora.io/cn/video-legacy/faq/web_screen_share_issues

问题描述Web 端用户共享屏幕时,共享画面卡顿、模糊。

解决方案根据你使用的 Web SDK 版本查看解决方案。

Web 3.x 版本按照以下步骤依次排查问题:建议用户使用桌面端 Chrome 浏览器最新正式版本。

在 createClient 时将 codec 设置为 vp8。确认用户共享的是否为应用窗口。

如果是,建议用户改为共享浏览器标签页或者共享整个屏幕。如果不是,检查你在 setScreenProfile 方法中设置的屏幕编码配置是否正常。

将 SDK 升级至 3.2.0 或之后版本,在创建屏幕共享流时设 optimizationMode,根据屏幕共享的内容选择合适的传输优化模式:如果屏幕共享的内容主要为幻灯片、文字或者静态的图片,将 optimizationMode 设置为 "details"。如果屏幕共享的内容主要为视频、游戏等动态画面,将 optimizationMode 设置为 "motion"。

Web 4.x 版本按照以下步骤依次排查问题:建议用户使用桌面端 Chrome 浏览器最新正式版本。在 createClient 时将 codec 设置为 vp8。确认用户共享的是否为应用窗口。

如果是,建议用户改为共享浏览器页签或者共享整个屏幕。如果不是,检查你在 createScreenVideoTrack 方法中设置的屏幕编码配置是否正常。在创建屏幕共享的视频轨道时设置 optimizationMode,根据屏幕共享的内容选择合适的传输优化模式:如果屏幕共享的内容主要为幻灯片、文字或者静态的图片,将 optimizationMode 设置为 "details"。如果屏幕共享的内容主要为视频、游戏等动态画面,将 optimizationMode 设置为 "motion"。

自 4.2.0 版本起,你还可以通过 setOptimizaitonMode 方法在屏幕共享过程中动态调整传输优化模式。


Q9:为什么网页端禁用自己的视频后摄像头灯还是亮着?

官网链接: https://docs.agora.io/cn/video-legacy/faq/web_camera_light

问题描述使用 Agora RTC Web SDK 时,调用 muteVideo 禁用本地视频成功后,摄像头的指示灯仍然亮着。

问题原因Web SDK 不支持单独开启/关闭采集视频,对本地流调用 muteVideo 实际上是将 MediaStreamTrack.enabled 属性设为 false,调用 muteVideo 后仍会发送视频黑帧,并未关闭视频采集,因此摄像头的指示灯不会熄灭。

解决方案:调用 close 方法关闭本地流可以关闭视频采集,此时摄像头指示灯会熄灭。但是调用 close 方法会同时取消摄像头和麦克风的访问权限,即本地的音频和视频采集都会关闭。这是因为 Web SDK 发布的对象是流,包含音频轨道和视频轨道,因此对流的操作会同时影响音频和视频。如果想要方便快速地关闭本地视频的采集和发送,而不影响音频功能,我们推荐你使用下一代 Agora Web SDK (Agora Web SDK NG)。

在下一代 Web SDK 中,发布的对象是音频轨道和视频轨道,因此可以直接关闭 (close) 视频轨道来关闭本地视频的采集和发送,这样摄像头的指示灯也会熄灭。


Q10:如何解决 Web 端和 Native 端互通时出现的黑屏、绿屏、花屏等画面异常问题?

Web 端用户接收 Native 端用户的视频,或者 Native 端用户接收 Web 端用户的视频,接收端看到的画面为黑屏、绿屏、花屏等。

官网参考: https://docs.agora.io/cn/All/faq/web-native_video_issues


Q11:如何处理音频或视频轨道停止导致的无声或黑屏?

通话或直播过程中,Web 发送端突然无声或黑屏。查阅日志发现是由音频或视频轨道停止 (Audio Track Ended/Video Track Ended) 导致的。

官网参考: https://docs.agora.io/cn/All/faq/track_ended

音视频设备管理 (Web SDK 4.x): https://docs.agora.io/cn/live-streaming-premium-4.x/test_switch_device_web_ng?platform=Web


Q12:为什么在调用 Stream.init 时设备会报错?

以下为初始化音视频流时常见的设备错误:

NotAllowedError: 用户拒绝授予对应的摄像头或麦克风权限。

NotReadableError: 尽管用户已经授权使用相应的设备,操作系统、浏览器或者网页层面发生的硬件错误导致该设备无法被访问。你可以尝试刷新页面或者更新设备驱动。部分 Windows 10 笔记本电脑上使用 Chrome 浏览器时,需要以兼容 Windows 7 的模式运行 Chrome 才能使用摄像头。

NotFoundError: 找不到指定的媒体流。检查你的麦克风和摄像头是否正常工作。

MEDIA_NOT_SUPPORT:没有使用 HTTPS 协议。如果需要打开摄像头,请务必使用 HTTPS 协议或者 localhost。

OverConstrainedError:某个指定的采集参数无法被任何可用设备满足,一般是由于采集设备被占用或者不支持指定的分辨率。

更多的错误请参考 Stream.init 中的描述: https://docs.agora.io/cn/Interactive%20Broadcast/API%20Reference/web/v3.3.1/interfaces/agorartc.client.html#init


Q13:Web平台如何开启云代理?

大型企业、医院、高校、银行等安全需求较高的机构会部署防火墙将办公环境与外网隔离开来,保护内部信息安全。

为避免这些企业用户因防火墙无法使用 Agora 的服务,Agora 提供云代理服务。

各版本SDK使用云代理方法:

使用云代理服务 (Web SDK 4.x): https://docs.agora.io/cn/live-streaming-premium-4.x/cloud_proxy_web_ng?platform=Web

使用云代理服务 (Web SDK 3.x): https://docs.agora.io/cn/live-streaming-premium-legacy/cloud_proxy_web?platform=Web


Q14:实时音视频通话如何计费?

本文介绍 Agora 如何按月统计使用语音通话、视频通话、互动直播的费用: https://docs.agora.io/cn/live-streaming-premium-4.x/billing_rtc?platform=Web

本文介绍 Agora 如何按月统计使用极速直播的费用: https://docs.agora.io/cn/live-streaming-standard-4.x/billing_live_standard_ng?platform=Web


Q15:使用Web SDK 应该注意哪些问题?

本链接列出使用 Web SDK 的已知问题和限制: https://docs.agora.io/cn/live-streaming-standard-4.x/web_sdk_known_issues?platform=Web