Web Player

本指南为开发人员提供了在Web应用程序中有效集成和利用WebRTC Player SDK的详细说明。它概述了设置、配置和使用步骤，以确保在各种平台上实现稳定的视频播放。

下载SDK

WebRTC H5 Player SDK和演示

如何使用SDK

1. 创建视频标签

在HTML中创建一个具有自动播放和控制功能的<video>标签，以支持现代浏览器中的HTML5视频播放。

<video id="videotest" class="centeredVideo" controls autoplay width="1024" height="576">
    您的浏览器过于陈旧，不支持HTML5视频。
</video>

2. 导入JavaScript文件

在HTML文档中包含SDK的JavaScript文件，以利用其功能。

<script src="wsrtcplayer.min.js"></script>

3. 设置事件回调函数

定义强大的事件回调函数，以有效管理播放事件。这些函数有助于处理关键情况，例如播放中断、数据接收和网络响应。

/***** 自定义回调函数
@argument arguments[0]: 事件类型:
0 - 从缓冲区恢复播放
1 - 发生缓冲事件
2 - 服务器响应会话描述协议（SDP）数据
@argument arguments[1]: 来自服务器的SDP字符串，仅在事件类型2时相关
*****/
function onEvent() {
    // 在此处添加强大的事件处理逻辑
}
window.wsrtcplayer.callback = onEvent;

4. 初始化播放器

使用指定的配置选项初始化播放器实例。

var option = {
    element: document.getElementById('videotest'),
    customerID: "XXXX",
    listener: onEvent
};
var player = window.wsrtcplayer.createWSRTCPlayer(option);

5. 开始播放

使用信令URL启动流播放。

// @param signal_url: 播放流的信令URL
player.open(signal_url);

在WebRTC中，信令是用于建立、管理和终止通信会话的过程。信令URL可以视为流URL，其格式如下：

signal_url: http(s)://domain/appName/streamName.sdp

• domain: 托管流服务的域名。
• appName: 应用程序名称，用于区分各种类型的直播流。这也是设置转码、截图和录制等配置的基本单位。
• streamName: 直播流名称，用于识别不同的流。

6. 停止播放

调用close函数以停止播放。

player.close();

示例

有关具体示例，请参见SDK中的demo.html。

WebRTC兼容性

以下是WebRTC兼容性的概述：

注意: 使用Chrome引擎的浏览器应参考相应的Chrome版本。Android设备上的浏览器兼容性各不相同，一些型号可能不支持H264解码。