Web SDK 支持通过 H5 实时直播组件的方式在移动端网页中实现播放音视频流的效果。RTS Web SDK 是通过 HTML 网页加载的 JavaScript 库，不包含普通直播 Web 播放器功能，且不依赖用户安装 App 实现直播播放。

背景信息

传统场景下，观众在移动端观看在线音视频直播时，通常需要登录对应的 App 或小程序，如果希望将该直播分享给其他好友，在对方未安装对应 App 的情况下，可能难以达到分享效果。

网易云信 H5 实时直播组件可以在移动端网页中播放音视频流，适用于直播推广的场景，例如在社交 App 中投放直播对应的网页链接，例如 QQ、微信、微博、钉钉等渠道，用户直接在移动端设备上打开链接就可以观看实时视频直播。H5 实时直播组件在保证画面清晰度和流畅度的同时，降低了多种场景下的直播活动推广和分享门槛，提升了投放的效率和效果。

功能简介

RTS Web SDK 是通过 HTML 网页加载的 JavaScript 库，不包含普通直播 Web 播放器功能，且不依赖用户安装 App 实现直播播放。该 SDK 只用于 RTS 实时拉流，解决在手机、微信和 PC 浏览器上播放音视频流的问题。

浏览器兼容性

SDK 视频播放能力不是通过网页代码实现的，而是靠浏览器支持，因此在使用 H5 实时直播之前，请先检查浏览器兼容性，判断目标平台的浏览器是否有能力符合预期表现。

iOS 微信使用系统内置的 WebView，因此对 H5 实时直播的支持情况与 iOS 系统版本强相关。

iOS 微信	iOS Safari
iOS 9.0 以前不支持	iOS 9.0 以前不支持
iOS 9.0 及以后支持	iOS 9.0 及以后支持

Android 平台支持自定义 WebView，Android 微信使用的是自研的 WebView，因此对 H5 实时直播的支持与应用版本有关。

Android 微信	Android Chrome	Android WebView
微信 6.0 以前不支持	Chrome 33.0 以前不支持	Android 5.0 以前不支持
微信 6.0 及以后支持	Chrome 33.0 及以后支持	Android 5.0 及以后支持

功能原理

Web SDK 基于 WebRTC 实现音视频通信，依赖于浏览器对 WebRTC 的支持。微信浏览器支持 WebRTC，但是在不同的平台上，微信浏览器对解码的支持存在一定限制，在无法解码的微信浏览器中无法观看接收的视频。

网易云信通过 H5 实时直播组件在移动端网页中实现软件解码，可以在 Android 和 iOS 12.1.4 及之前的版本中支持 H.264 解码。对于不支持解码的平台，您可以引入组件订阅 rtsStream，实现软件解码。对于其他暂不支持解码的平台版本，建议维持原有的订阅方式。

rtsStream 对象是一个特殊的用于接收和播放软解码流的对象，与 SDK 原有的 Stream 对象不同。

• 原有 SDK 中的 Stream 对象实际是封装了 WebRTC 的 MediaStream 音视频流。
• rtsStream 通过已实现的软件解码器输出音视频流，不支持 MediaStream 相关的方法和功能。
• rtsStream 不会抛出任何事件。

注意事项

• 使用 H5 实时直播组件时，请勿调用任何可能导致主线程长时间阻塞的方法，例如 Window.alert()。
• 发送端的视频分辨率请控制在 480P、240P 或 120P。
• 在移动端通过网页形式观看视频，支持最多订阅两路 480P 或者四路 240P 的视频流。
• 受浏览器策略影响，在 iOS 平台所有的网页端以及 Android 平台的 Chrome 70+ 浏览器上，音频不会自动播放，建议通过用户手势触发播放订阅的流。
• H5 实时直播组件配合使用的 RTC Web SDK 的版本必须为 V4.0.1 及以上。

实现方法

H5 组件包结构

SDK 包中除了最新版本的 neRTC.js 以外，还包含以下文件：

• neRTS RTS.js：H5 实时直播组件的 JS 文件，是 Web SDK 的一个组件，依赖 neRTC.js 运行。
• neRTS RTS.asm：H5 实时直播组件使用的解码库文件，JavaScript 编码。

下载并集成 SDK

1. 将最新版 Web SDK 集成到本地项目中。

   操作步骤请参考集成SDK（Web）。

2. 联系技术支持获取 H5 实时直播组件及示例项目。

3. 在浏览器上实现软件解码。

   在浏览器上实现软件解码要求支持 WebAssembly 模块，该模块可以让网页加载并使用二进制编码的解码库。SDK 会根据浏览器的支持情况自动加载合适的解码库。

   如果浏览器支持 WebAssembly，H5 实时直播组件会使用 neRTS.wasm 解码库。

检查系统兼容性

调用 checkSystemRequirements 方法，检查系统是否支持 H5 实时直播。

返回 true 表示支持，返回 false 表示不支持。

neRTS.checkSystemRequirements()

引入 H5 实时直播组件

在创建 Client 后，需要调用 neRTS.init 和 neRTS.proxy 方法来引入 H5 组件。

请确保在创建 Client 之后立即引入 H5 实时直播组件。

1. 调用 neRTS.init 方法，初始化 H5 实时直播组件。

   注意：建议在页面加载后立即调用 neRTS.init 方法。调用后 SDK 会立刻开始预加载解码器和解码线程，可以缩短首帧出图时间。

   在 neRTS.init 方法中，需要设置解码库文件的线上访问地址。

   参数	说明
   asmDecoderPath:neRTS.asm	解码库文件的线上访问地址。
   bufferDelay	可选，播放器缓冲区延迟。 整数，取值范围 [0,10000]，默认值为 0，即没有缓冲区延迟。单位为毫秒。

   在弱网环境下，您可以通过配置该参数增加 H5 实时直播的稳定性。例如，将 bufferDelay 设为 5000，延迟会拉大到 5 秒，可以保证网络较差时直播的流畅度。 |

2. 调用 neRTS RTS.proxy 方法，通过代理 Client 中订阅相关的方法，实现对订阅的流软件解码。

   注意：由于解码库文件较大，建议在服务端配置好解码库文件的缓存策略。

   var client = WebRTC2.createClient({ mode: "live", codec: "vp8"});
   neRTS.init(WebRTC2, {
     // 设置 SDK 文件夹中的解码库文件的线上访问地址。
     // SDK 会根据这里填写的路径来动态请求相应的解码库文件。
   wasmDecoderPath: "./xxx/neRTS.wasm",
     asmDecoderPath: "./xxx/neRTS.asm",
     // 保证流畅度，拉大延迟到 5s
     bufferDelay: 5000,
   });
   neRTS.proxy(client);
   

3. 引入组件之后，按照原来的方法初始化 Client 并加入房间。

   在订阅流相关事件中，SDK 返回的音视频流都是 rtsStream 对象，例如：

   • 新增远端流

     client.on("stream-added", function(e) {
       var stream = e.stream; // 该 stream 为 rtsStream
       client.subscribe(stream, { video: true, audio: true});
     });
     

   • 已订阅远端流

     client.on("stream-subscribed", function (e) {
       var stream = e.stream; // 该 stream 为 rtsStream
     });
     

订阅 rtsStream

在订阅 rtsStream 对象时，设置 subscribe 方法的 options 参数。

示例代码：

client.subscribe(stream, { video: true, audio: true, highOrLow: 1 }, console.log);

API参考

rtsStream 对象中的 API 和 NERTC Web SDK 原有 Stream 的 API 基本相同，但是只实现了与订阅流相关的方法。

rtsStream 支持的方法如下：

API	说明
init	初始化 RTS SDK，并且和 NERTC 的 SDK 联系在一起。
play	播放远端视频流。
stop	停止播放个远端视频流。
isPlaying	判断当前是否正在播放。
unmuteAudio	恢复发送音频流。
muteAudio	暂停发送音频流。
hasAudio	是否有音频源。
getAudioLevel	获取播放的音量。
setAudioVolume	设置播放的音量。
unmuteVideo	恢复发送视频流。
muteVideo	暂停发送视频流。
hasVideo	是否有视频源。
getId	获取 ID。
getStats	获取媒体接收、解码状态。