ws-avc-player 项目教程

2024-08-30 10:32:23作者：范垣楠Rhoda

1. 项目的目录结构及介绍

ws-avc-player/
├── example/
│   ├── html/
│   │   └── index.html
│   └── index.js
├── lib/
│   └── server.js
├── src/
│   ├── Decoder.js
│   ├── Player.js
│   └── YUVCanvas.js
├── package.json
└── README.md

example/: 包含项目的示例代码，包括客户端和服务器端的示例。
- html/: 包含客户端的HTML文件。
- index.js: 服务器端的示例代码。
lib/: 包含服务器端的核心逻辑文件。
- server.js: 服务器端的主要实现文件。
src/: 包含客户端的核心逻辑文件。
- Decoder.js: 解码器实现。
- Player.js: 播放器实现。
- YUVCanvas.js: YUV 画布实现。
package.json: 项目的依赖和脚本配置文件。
README.md: 项目的说明文档。

2. 项目的启动文件介绍

服务器端启动文件

服务器端的启动文件位于 example/index.js，主要内容如下：

const AvcServer = require('ws-avc-player/lib/server');
const { WebSocketServer } = require('@clusterws/cws'); // 也可以使用 ws 或 uws

const wss = new WebSocketServer({ port: 3333 });
const avcServer = new AvcServer(wss, 640, 480); // 初始宽度和高度（会根据流进行适应）
avcServer.setVideoStream(h264Stream);

客户端启动文件

客户端的启动文件位于 example/html/index.html，主要内容如下：

<html>
<body>
  <div id="video-box"></div>
  <script type="text/javascript" src="WSAvcPlayer.js"></script>
  <script type="text/javascript">
    var wsavc = new WSAvcPlayer({useWorker: true});
    document.getElementById('video-box').appendChild(wsavc.AvcPlayer.canvas);
    wsavc.connect("ws://" + document.location.host + ":3333");
  </script>
</body>
</html>

3. 项目的配置文件介绍

项目的配置文件主要是 package.json，包含了项目的依赖和脚本配置。

{
  "name": "ws-avc-player",
  "version": "1.0.0",
  "description": "Video player for browser that is able to play realtime low latency h264 video stream from websocket",
  "main": "index.js",
  "scripts": {
    "example": "node example/index.js"
  },
  "dependencies": {
    "@clusterws/cws": "^0.15.0",
    "ws": "^7.4.6"
  },
  "devDependencies": {},
  "author": "matijagaspar",
  "license": "BSD-3-Clause"
}

name: 项目名称。
version: 项目版本。
description: 项目描述。
main: 项目的主入口文件。
scripts: 包含可执行的脚本命令，如 example 用于启动示例服务器。
dependencies: 项目依赖的包。
devDependencies: 开发环境依赖的包。
author: 项目作者。
license: 项目许可证。