Web 端自动播放策略

大部分浏览器的自动播放策略（Autoplay policy），都要求用户至少进行一次交互操作才能播放带声音的视频。这是因为，用户通常不希望一个刚刚打开的网页毫无预警地发出声音。
此外，还有部分浏览器不允许纯视频自动播放。例如，低电量模式下的 iOS Safari 浏览器和 iOS 端的微信内嵌浏览器。详见浏览器厂商的自动播放策略。
这意味着，在用户交互前，自动播放或手动调用 play 接口播放音视频都可能失败，导致无声问题或看不到视频。
因此，在开发 Web 端 RTC 应用时，需要通过引导用户交互来处理浏览器的自动播放策略的限制，参考以下的两种方案。

方案一：监听播放失败回调，引导用户进行交互

创建 RTC 引擎后，默认自动播放音视频，即，无需手动调用 play 接口，音视频可在解码成功后自动播放。当监听到 onAutoPlayFailed 回调时，表示有自动播放失败的流。此时，创建按钮提示和引导用户与页面发生交互来恢复播放。

import VERTC from '@volcengine/rtc';
const engine = VERTC.createEngine('appId')
// ...
engine.on(VERTC.events.onAutoplayFailed, e => {
  const button = document.createElement("button");
  button.innerText = "Click to play";
  button.onclick = () => {
    button.remove();
    engine.play(e.userId); //不传 user ID 代表播放本地用户的媒体流
  };
  document.body.append(button);
});

方案二：引导用户在播放前进行交互

大部分浏览器在用户交互后，可解除自动播放限制。但由于无法通过 JavaScript 感知浏览器是否已经解除自动播放限制。此方案中，需要在开始播放前，引导用户进行交互，保证媒体流成功自动播放。

1. 根据不同的浏览器的自动播放限制，在调用 createEngine 时选择的 RTC SDK 的自动播放政策，并使用相应的 UI 设计文案。

• VIDEO_ONLY 只自动播放视频，不播放音频：例如 Chrome 浏览器，允许无声视频自动播放。交互按钮名称举例：“解除静音”。
• PLAY_MANUALLY 关闭自动播放：例如 iOS 端的 Safari 浏览器、微信浏览器和微信小程序的 Webview 这类对自动播放限制较为严格的浏览器，要求用户交互后才放音视频播放。交互按钮名称举例：“开始播放”。

2. 各浏览器厂商对于自动播放策略的实现存在差异，即使提前引导用户与页面产生交互，也不能确保不会出现自动播放失败错误。因此，监听播放失败回调后的处理也是不可缺少的。

对于手动播放策略，参考以下说明处理用户状态显示和交互请求。

3. 远端用户图标默认显示静音状态提示。

<div id="user1" data-user-id="{userId}">已静音</div>

4. 当用户点击某个远端用户的图标时，在按钮的点击/触摸事件的回调中播放这个用户的媒体流，并更改状态提示。

import VERTC, { RTCAutoPlayPolicy } from '@volcengine/rtc';
const engine = VERTC.createEngine('appId', { 
  autoPlayPolicy: RTCAutoPlayPolicy.PLAY_MANUALLY 
});
let playing = false;
// ...
//播放音频流
document.getElementById("user1").onclick = (e) => {
  if (playing) {
      return;
  }
  const userId = e.target.getAttribute('data-user-id')
  engine.play(userId);
  playing = true;
  e.target.innerHTML = "播放中";
}

参考文档

一些主流浏览器的自动播放策略：

• Chrome
• Safari
• Firefox