返回文档中心
Low Latency Streaming
文档中心 Low Latency Streaming WebRTC Players Web Player

Web Player

更新时间：2025-09-15 15:48:49

本指南将为您全面介绍如何将我们的低延迟 WebRTC 播放器集成到您的 Web 应用中。我们将以提供的演示包为起点，详细讲解其工作原理，助您自信地在您的项目中进行适配。

前置条件

在开始之前，请先下载 Demo 包，该包包含所有必要文件，您可立即开始使用。

该安装包包含：

  • demo.html: 一个功能完善的示例页面，所有 HTML 和 JavaScript 集成在同一个文件中。
  • wsrtcplayer.min.js: 核心软件开发工具包（SDK）。
  • css/: 存放该示例页面样式表的文件夹。

快速入门：基础实现

下面我们将详细解析 demo.html 文件，了解如何实现点击播放播放器。

第一步：搭建 HTML 结构

您的HTML文件需要包含以下几个关键元素以便开始使用：

  1. SDK脚本：这一行用于加载播放器库，使其在您的页面中可用。
  2. <video> 元素：这是用于显示视频流的区域。请为其设置唯一的 id。
  3. 控制组件：提供一个用于输入流地址的输入框，以及用于开始和停止播放的按钮。
  4. 内联脚本块：在文件底部添加 <script> 标签，用于编写JavaScript逻辑。

以下是 demo.html 文件中结构的简化版本：

<!DOCTYPE html>
<html>
<head>
    <title>WebRTC Player</title>
    <link rel="stylesheet" href="css/main.css" />
</head>
<body>
    <!-- 用于流播放的视频元素 -->
    <video id="video-player" controls muted playsinline></video>
    <!-- 我们建议包含 `controls`、`muted` 和 `playsinline` 属性。`muted` 和 `playsinline` 是确保大多数移动端浏览器实现自动播放的必要条件，而 `controls` 在需要时可为原生播放控件提供兜底方案。 -->


    <!-- 播放器控制组件 -->
    <input id="signal_url" type="text" value="http://webrtc-pull.test.cdnetworks.com/live/stream1.sdp">
    <button id="playButton">播放</button>
    <button id="stopButton">停止</button>


    <!-- 核心SDK -->
    <script src="wsrtcplayer.min.js"></script>


    <!-- 用于控制播放器的自定义脚本 -->
    <script>
// JavaScript 逻辑在此编写
    </script>
</body>
</html>

步骤 2：在 JavaScript 中初始化播放器

在 <script> 标签中，您将添加用于控制播放器的逻辑。以下代码实现了与 demo.html 相同的功能。

<script>
    document.addEventListener('DOMContentLoaded', function () {


        const playBtn = document.getElementById('playButton');
        const stopBtn = document.getElementById('stopButton');
        const videoElement = document.getElementById('video-player');
        let player = null; // 用于存储播放器实例


// 1. 定义回调函数以处理播放器事件
function onEvent(type, data) {
const timestamp = (window.performance.now() / 1000).toFixed(3);
console.log(`${timestamp}s: 收到事件 - 类型: ${type}, 数据: ${data || 'N/A'}`);
}


// 2. 设置“播放”按钮
playBtn.onclick = function() {
// 最佳实践：在新建播放器实例前务必销毁旧的播放器实例
            if (player) {
                player.destroy();
            }


            const playerOptions = {
                element: videoElement,
                customerID: "YOUR_UNIQUE_ACCOUNT_NAME", // 重要提示：请务必使用您真实的Account Name
                listener: onEvent
            };


            player = window.wsrtcplayer.createWSRTCPlayer(playerOptions);


            const signalUrl = document.getElementById('signal_url').value;
            if (player && signalUrl) {
                player.open(signalUrl);
            }
        };


        // 3. 设置“停止”按钮
        stopBtn.onclick = function() {
            if (player) {
                player.close();
            }
        };
    });
</script>

高级自定义

页面加载时启用自动播放

要实现页面加载时自动播放视频，可以使用以下脚本。此版本无需用户交互即可开始播放。

<script>
    document.addEventListener('DOMContentLoaded', function () {


        function onEvent(type, data) {
            const timestamp = (window.performance.now() / 1000).toFixed(3);
            console.log(`${timestamp}s: 已接收到事件 - 类型: ${type}, 数据: ${data || 'N/A'}`);
        }


        const videoElement = document.getElementById('video-player');
        const signalUrl = 'http://webrtc-pull.test.cdnetworks.com/live/stream1.sdp'; // 请替换为您的直播流地址


        const playerOptions = {
            element: videoElement,
            customerID: "YOUR_UNIQUE_ACCOUNT_NAME", // 请使用您的真实主账号名称
            listener: onEvent
        };


        const player = window.wsrtcplayer.createWSRTCPlayer(playerOptions);


        if (player) {
            player.open(signalUrl);
        }


        // 可选：添加用户离开页面时的清理逻辑
        window.addEventListener('beforeunload', () => {
            if (player) {
                player.destroy();
            }
        });
    });
</script>

显示播放器状态

您可以使用 onEvent 监听器为用户提供实时反馈。首先，在您的 HTML 中添加一个 <div>，用于显示状态消息：

<div id="status-display" style="padding: 10px; font-weight: bold;">正在连接...</div>

接下来，请修改您的 onEvent 函数，根据播放器状态更新此元素的文本。下方示例展示了如何将状态显示逻辑集成到完整的自动播放脚本中。

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const statusDisplay = document.getElementById('status-display');
        const videoElement = document.getElementById('video-player');
        const signalUrl = 'http://webrtc-pull.test.cdnetworks.com/live/stream1.sdp'; // 请替换为您的流地址


// 此函数用于处理播放器的状态更新并更新界面。
 function onEvent(type, data) {
 switch (type) {
 case 0:
 statusDisplay.innerText = '状态：播放中';
 statusDisplay.style.color = 'green';
 break;
 case 1:
 statusDisplay.innerText = '状态：缓冲中...';
 statusDisplay.style.color = 'orange';
 break;
 case 2:
 statusDisplay.innerText = '状态：已连接';
 break;
 }
 }


 const playerOptions = {
 element: videoElement,
 customerID: "YOUR_UNIQUE_ACCOUNT_NAME", // 请使用您的真实主账号名称
            listener: onEvent
        };


        const player = window.wsrtcplayer.createWSRTCPlayer(playerOptions);


        if (player) {
            player.open(signalUrl);
        }
    });
</script>

自定义播放器外观（CSS）

该演示使用了 rtc_main.css 和 main.css 进行样式设置。若需自定义界面外观，建议创建你自己的样式表，并在 HTML 文件中于默认样式表之后进行引入。这样可以确保你自定义的样式覆盖默认样式。

  1. 在你的 css 文件夹下新建一个名为 my-styles.css 的文件。

  2. 添加你自定义的 CSS 规则。例如：

    /* /css/my-styles.css */
#video-player {
  border: 3px solid #007bff;
  border-radius: 5px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

  3. 在您的HTML文件中引入新样式表：

    <link rel="stylesheet" href="css/rtc_main.css" />
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="css/my-styles.css" />

API 参考

方法 参数 描述
createWSRTCPlayer(options) options (Object)：
• element (HTMLVideoElement) [必填]：用于播放的 <video> 元素。
• customerID (String) [选填]：您的唯一账号名称。
• listener (Function) [选填]：用于接收播放器事件的回调函数。		 创建一个播放器实例。
player.open(signal_url) signal_url (String)：用于流播放信号的 URL。 连接信令服务器，建立 WebRTC 对等连接，并开始播放视频流。
player.close() (无) 停止视频播放并断开流连接。
player.destroy() (无) 停止播放，断开连接，并清理所有内部资源。使用完播放器后调用此方法以防内存泄漏。

事件回调（listener）

回调函数接收两个参数：function(type, data)。

参数 类型 描述
type Number 表示事件类型的代码。请参见下方列表。
data String 事件特定的数据，仅在某些事件类型下会赋值。

事件 type 代码：

  • 0: 缓冲结束，播放已恢复。
  • 1: 已发生缓冲或卡顿。
  • 2: 已收到来自服务器的SDP应答。data 包含SDP字符串。
  • 3: 来自播放器的自定义事件。data 包含自定义事件字符串。

信令URL格式

信令URL的结构如下：http(s)://domain/appName/streamName.sdp

  • domain: 为低延迟流媒体配置的Domain。
  • appName：用于配置隔离的发布点名称（如转码、录制）。
  • streamName：直播流的唯一名称。

浏览器兼容性

操作系统 浏览器类型 最低版本
macOS 桌面版 Safari 11 及以上
macOS 桌面版 Chrome 47 及以上
Windows 桌面版 Chrome 56 及以上
Android 移动端 Chrome 88 及以上
iOS 移动端 Safari 11 及以上
iOS 微信内置浏览器 12 及以上

注意：基于 Chromium 内核的浏览器应遵循对应的 Chrome 版本要求。Android 端各浏览器支持情况可能存在差异，部分设备可能不支持 H.264 的硬件解码。

本篇文档内容对您是否有帮助？
有帮助
我要反馈
提交成功！非常感谢您的反馈，我们会继续努力做到更好！

CDNetworks Inc., © 2025. 1840 Enterprise Way, Monrovia, CA 91016 – All rights reserved.