使用Web SDK出现看得到画面但是听不到远端声音的情况

使用Web SDK出现看得到画面但是听不到远端声音以及可能无声又无图的现象需要检查是否由于浏览器的自动播放策略限制导致:音频轨道的自动播放会失败(视频轨道的播放一般不受限制),如何处理可以应对这种限制。

需要注意如下几点:

  • 主流的浏览器Safari、Chrome、firefox对Autoplay的具体策略实现,是不一样的,甚至不同的版本,也会不一样。其中,最严格的是Safari浏览器,需要特殊处理前端集成代码。

  • console中如有该报错则需要注意是否自动播放限制导致无声问题:NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

  • 所谓的用户交互,指的是触摸屏的触摸事件,键盘事件、鼠标事件等,即,需要有最终真实用户的实际交互。

  • 不论web sdk 3.x版本还是4.x版本,我们都无法“绕过”浏览器自动播放策略,只能“利用”浏览器自动播放策略。

解决方法:

一般情况下添加如下代码

let isAudioAutoplayFailed = false;
AgoraRTC.onAudioAutoplayFailed = () => {
if (isAudioAutoplayFailed) return;

isAudioAutoplayFailed = true;
const btn = document.createElement(“button”);
btn.innerText = “Click me to resume the audio playback”;
btn.onClick = () => {
isAudioAutoplayFailed = false;
btn.remove();
};
document.body.append(btn);
};

iOS Safari/WebView 的特殊处理

iOS Safari 只允许通过用户交互来 触发 有声媒体的播放,而不是在用户交互后就打开 Autoplay 限制。

如果你的应用需要兼容 iOS Safari/WebView,我们推荐对 iOS Safari/WebView 做特殊处理。

  • 为每个远端用户在播放界面上通过图标显示当前用户被静音,引导用户点击。
  • 当本地用户点击某个远端用户的音频播放按钮时,在按钮的点击/触摸事件的回调中播放这个用户的音频轨道,同时更改静音图标。
// HTML
<div id="user1-audio">已静音</div>
// JavaScript
document.getElementById("user1-audio").onClick = (e) => {
    if (user1.audioTrack.isPlaying) {
        user1.audioTrack.stop();
        e.target.innerHTML = "已静音";
        return;
    }
    user1.audioTrack.play();
    e.target.innerHTML = "播放中";
}