音视频通话 2.0
Web
新手接入指南
产品简介
产品介绍
功能特性
产品优势
应用场景
基本概念
使用限制
产品计费
按量计费
资源包
体验 Demo
更新日志
下载 SDK 和示例代码
快速开始
快速跑通 Sample Code
接入流程
创建应用
开通服务
集成 SDK
实现音视频通话
Token 鉴权
高级 Token 鉴权
基础功能
设置音频属性
设置视频属性
设置通话音量
屏幕共享
音频共享
监测发言者音量
通话中质量监测
进阶功能
音频管理
客户端音视频录制
自定义音频采集与渲染
音效与伴音
视频管理
视频截图
基础美颜
水印
自定义视频采集
设备管理
音视频设备检测
音频设备管理
媒体流加密
云端录制
使用云代理
媒体插件
虚拟背景
高级美颜
AI 降噪
最佳实践
音视频参数配置推荐
浏览器自动播放受限处理
通话前网络质量探测和设备检测
实现在线教育
API 参考
Web API 参考
服务端 API
错误码
控制台指南
常见问题处理
FAQ
错题集
音频常见问题排查
视频常见问题排查
服务协议

浏览器自动播放受限处理

更新时间: 2022/11/25 11:55:00

为了防止网页在用户非自愿的情况下自动播放声音,通常情况下浏览器会闲置自动播放功能(Autoplay),在没有用户交互操作之前,不允许播放有声媒体。为解决浏览器限制导致的自动播放问题,本文为您介绍处理自动播放受限的方案。

网易云信推荐以下方式处理浏览器自动播放受限问题:

  • 播放失败时引导用户手动恢复播放
  • 直接解除自动播放受限

注意事项

  • 由于 iOS Safari/WebView 只允许通过用户交互来触发有声媒体的播放,对于 iOS Safari/WebView,推荐参考播放失败时手动恢复处理自动播放受限问题。
  • 使用 Android 端微信浏览器先入会的用户可能无法正常播放其他后入会用户的音视频, 推荐参考直接解除自动播放受限处理自动播放受限问题。

播放失败时手动恢复

在使用 stream.play 接口播放视频时,如果出现浏览器自动播放策略导致的音视频播放失败,可以使用 client.on 监听 41030 错误。在 Web SDK 中,41030 表示。

监听到 41030 错误之后,您可以引导用户进行手势交互,调用 stream.resume 恢复音视频正常播放。

本地流不会触发自动播放受限问题,通常情况下只需要处理远端流的错误事件。

//若您已集成 4.6.10 及之后版本的 SDK,可以参考如下代码快速实现:
stream.play('remoteElement').catch(error => {});
stream.on('notAllowedError', error => {
    const errorCode = error.getCode();
    if(errorCode === 41030) {
        // AUTO_PLAY_NOT_ALLOWED, 引导用户进行手势交互
        // 调用 stream.resume() 恢复音视频正常播放
    }
});
//以下为各版本 SDK 通用的实现方法:
stream.play('remoteElement').catch(error => {});
client.on('NotAllowedError', error => {
    const errorCode = error.getCode();
    if(errorCode === 41030) {
        // AUTO_PLAY_NOT_ALLOWED, 引导用户进行手势交互
        // 调用 stream.resume() 恢复音视频正常播放
    }
});

直接解除自动播放受限

大部分浏览器在用户交互之后就放开了 AutoPlay 限制,通过提前引导用户和页面产生交互行为的方式,可以有效的规避桌面端以及安卓设备上的自动播放受限问题。此时确保在调用 stream.play 之前,通过弹窗指引或者按钮点击等方式,要求用户和页面发生交互行为即可。

也可以通过 audio: false 直接解除自动播放限制,先静音播放远端视频流,等到用户与页面发生交互后再解除静音。操作流程如下:

  1. 在代码开始处,为页面添加交互监听事件。例如监听点击操作或监听触摸操作。

    • 监听点击操作

      document.addEventListener('mousedown', replay) // 监听点击操作
      
    • 监听触摸操作

      document.addEventListener('touchstart', replay) // 监听触摸操作
      
  2. 获取远端流,在调用 stream.play 接口时,通过 audio 参数设置静音播放视频。

    stream.play('remoteElement', playOptions:{audio: false})
    
  3. 当页面监听到 mousedown 或者 touchstart 事件后,执行回调函数。

    let replay = () => {
        stream.stop();
        stream.play('remoteElement', playOptions:{audio: true};
        // 移除鼠标/触屏监听事件
        // document.removeEventListener('mousedown', replay);
        // document.removeEventListener('touchstart', replay)
    }
    
此文档是否对你有帮助?
有帮助
我要吐槽
  • 注意事项
  • 播放失败时手动恢复
  • 直接解除自动播放受限