通过 WebSocket 接收和播放 WSS 协议视频流

1.创建wss协议视频

1.1必备包

   npm install ws @ffmpeg-installer/ffmpeg fluent-ffmpeg
  阐明：安装以下三个包。

1.2代码实现

阐明：创建WebSocket服务器，端口为8080

1. import { WebSocket, WebSocketServer } from 'ws'; // 导入 WebSocket 和 WebSocketServer 模块
2. import ffmpeg from 'fluent-ffmpeg'; // 导入 fluent-ffmpeg 模块，用于处理视频流
3. import ffmpegInstaller from '@ffmpeg-installer/ffmpeg'; // 导入 ffmpeg-installer 模块，用于获取 FFmpeg 的路径
4. // 设置 FFmpeg 路径
5. ffmpeg.setFfmpegPath(ffmpegInstaller.path); // 将 FFmpeg 的路径设置为安装路径
6. // 创建一个 WebSocket 服务器，监听端口 8080
7. const wss = new WebSocketServer({ port: 8080 });
8. wss.on('connection', (ws) => { // 当有新的客户端连接时触发
9.     console.log('新客户端连接'); // 输出连接信息
11.     // 使用 FFmpeg 转换视频为 MPEG-TS 格式
12.     const command = ffmpeg('./ElephantsDream.mp4') // 指定要转换的视频文件
13.         .format('mpegts') // 设置输出格式为 MPEG-TS
14.         .videoCodec('mpeg1video') // 设置视频编码为 MPEG-1
15.         .videoBitrate('1000k') // 设置视频比特率为 1000k
16.         .size('640x480') // 设置视频分辨率为 640x480
17.         .audioCodec('mp2')  // 添加音频编码为 MP2
18.         .audioBitrate('128k')  // 设置音频比特率为 128k
19.         .on('error', (err) => { // 处理 FFmpeg 错误
20.             console.error('FFmpeg 错误:', err); // 输出错误信息
21.             ws.close(); // 关闭 WebSocket 连接
22.         });
24.     // 将转换后的数据流通过 WebSocket 发送
25.     const stream = command.pipe(); // 获取转换后的数据流
26.     stream.on('data', (chunk) => { // 当有数据块时触发
27.         if (ws.readyState === WebSocket.OPEN) { // 检查 WebSocket 是否处于打开状态
28.             ws.send(chunk); // 发送数据块给客户端
29.         }
30.     });
32.     // 处理断开连接
33.     ws.on('close', () => { // 当客户端断开连接时触发
34.         console.log('客户端断开连接'); // 输出断开连接信息
35.         stream.destroy(); // 销毁数据流以释放资源
36.     });
37. });
39. console.log('WebSocket 服务器启动在端口 8080'); // 输出服务器启动信息

复制代码

1.3文件启动

   node server.js 
  阐明：文件启动，打印日志。

2. 接收播放wss协议视频

2.1api测试

阐明：服务器不绝推送二进制的数据。

2.2代码实现

阐明：安装jsmpeg-players播放器库，对通过websocket接收到的二进制数据进行播放。

1. <template>
2.   <div class="video-container">
3.     <canvas ref="videoCanvas"></canvas> <!-- 用于显示视频的画布 -->
4.     <div v-if="errorInfo.show" class="status error-status">
5.       <!-- 显示错误信息 -->
6.       <div>时间: {{ formatTime(errorInfo.time) }}</div>
7.       <div>错误次数: {{ errorInfo.count }}</div>
8.       <div>{{ errorMessage }}</div>
9.       <button @click="retryConnection" class="retry-btn">重试连接</button> <!-- 重试连接按钮 -->
10.     </div>
11.     <div v-else-if="status" class="status">{{ status }}</div> <!-- 显示当前状态 -->
12.   </div>
13. </template>
15. <script setup>
16. import { ref, reactive, onMounted, onBeforeUnmount } from 'vue'; // 导入 Vue 的组合式 API
17. import JSMpeg from 'jsmpeg-player'; // 导入 JSMpeg 播放器库
19. const videoCanvas = ref(null); // 用于引用画布元素
20. const status = ref(''); // 用于存储当前状态信息
21. const errorMessage = ref('WebSocket连接错误'); // 用于存储错误信息
22. const errorInfo = reactive({
23.   show: false, // 是否显示错误信息
24.   time: '', // 错误发生时间
25.   count: 0 // 错误次数
26. });
27. let player = null; // JSMpeg 播放器实例
28. let ws = null; // WebSocket 实例
29. let connectionTimeout = null; // 连接超时计时器
31. // 格式化时间
32. const formatTime = (timeStr) => {
33.   if (!timeStr || timeStr === '不适用') return '--'; // 如果时间不可用，返回占位符
34.   return timeStr.split('.')[0]; // 去掉毫秒部分
35. };
37. // 记录错误信息
38. const recordError = (message = 'WebSocket连接错误') => {
39.   errorInfo.show = true; // 显示错误信息
40.   errorInfo.time = new Date().toLocaleTimeString(); // 记录当前时间
41.   errorInfo.count++; // 错误次数加一
42.   errorMessage.value = message; // 更新错误信息
43. };
45. // 重试连接
46. const retryConnection = () => {
47.   if (connectionTimeout) {
48.     clearTimeout(connectionTimeout); // 清除连接超时计时器
49.   }
50.   if (ws) {
51.     ws.close(); // 关闭现有 WebSocket 连接
52.   }
53.   if (player) {
54.     player.destroy(); // 销毁播放器实例
55.     player = null; // 重置播放器实例
56.   }
57.   initVideo(); // 重新初始化视频连接
58. };
60. // 初始化视频连接
61. const initVideo = () => {
62.   try {
63.     const streamUrl = 'ws://localhost:8080'; // WebSocket 服务器地址
64.     status.value = '正在连接...'; // 更新状态信息
66.     // 设置连接超时
67.     connectionTimeout = setTimeout(() => {
68.       if (ws && ws.readyState !== WebSocket.OPEN) {
69.         ws.close(); // 如果连接未打开，关闭连接
70.         recordError('连接超时'); // 记录连接超时错误
71.       }
72.     }, 5000);
74.     // 创建WebSocket连接
75.     ws = new WebSocket(streamUrl);
76.     ws.binaryType = 'arraybuffer'; // 设置数据类型为二进制数组
78.     let dataReceived = false; // 标记是否收到数据
79.     let dataTimer = null; // 数据接收超时计时器
81.     ws.onopen = () => {
82.       clearTimeout(connectionTimeout); // 清除连接超时计时器
83.       status.value = '连接成功，等待数据...'; // 更新状态信息
85.       // 设置数据接收超时
86.       dataTimer = setTimeout(() => {
87.         if (!dataReceived) {
88.           recordError('连接成功但未收到有效数据'); // 记录未收到数据错误
89.           ws.close(); // 关闭连接
90.         }
91.       }, 8000);
92.     };
94.     ws.onmessage = (event) => {
95.       // 检查数据包是否有效
96.       if (event.data instanceof ArrayBuffer) {
97.         dataReceived = true; // 标记已收到数据
98.         clearTimeout(dataTimer); // 清除数据接收超时计时器
100.         if (event.data.byteLength > 0) {
101.           console.log('收到数据包:', event.data.byteLength, new Date().toLocaleTimeString());
103.           // 如果播放器未初始化，初始化播放器
104.           if (!player) {
105.             status.value = '收到数据，初始化播放器...'; // 更新状态信息
106.             startPlayer(streamUrl); // 初始化播放器
107.           }
109.           // 尝试手动处理数据
110.           try {
111.             if (player && player.source) {
112.               const data = new Uint8Array(event.data);
113.               // 检查数据是否为MPEG-TS格式
114.               if (data[0] === 0x47) { // MPEG-TS同步字节
115.                 player.source.write(data); // 写入数据到播放器
116.               } else {
117.                 console.warn('收到非MPEG-TS格式数据'); // 警告非预期格式数据
118.               }
119.             }
120.           } catch (e) {
121.             console.error('数据处理错误:', e); // 输出数据处理错误信息
122.           }
123.         }
124.       }
125.     };
127.     // 其他事件处理保持不变...
128.   } catch (error) {
129.     // 错误处理保持不变...
130.   }
131. };
133. // 初始化播放器
134. const startPlayer = (streamUrl) => {
135.   try {
136.     player = new JSMpeg.Player(streamUrl, {
137.       canvas: videoCanvas.value, // 指定画布元素
138.       autoplay: true, // 自动播放
139.       audio: true,  // 启用音频
140.       audioBufferSize: 512 * 1024,  // 音频缓冲区大小
141.       loop: true, // 循环播放
142.       videoBufferSize: 1024 * 1024 * 2, // 视频缓冲区大小
143.       onSourceEstablished: () => {
144.         console.log('视频源已建立'); // 输出视频源建立信息
145.         status.value = '视频播放中'; // 更新状态信息
146.       },
147.       onSourceCompleted: () => {
148.         console.log('视频源已完成'); // 输出视频源完成信息
149.       },
150.       onStalled: () => {
151.         console.log('播放停滞'); // 输出播放停滞信息
152.       }
153.     });
154.   } catch (error) {
155.     recordError(`播放器初始化失败: ${error.message}`); // 记录播放器初始化错误
156.     console.error('播放器错误:', error); // 输出播放器错误信息
157.   }
158. };
160. // 组件挂载时初始化视频连接
161. onMounted(() => {
162.   initVideo();
163. });
165. // 组件卸载前清理资源
166. onBeforeUnmount(() => {
167.   if (connectionTimeout) {
168.     clearTimeout(connectionTimeout); // 清除连接超时计时器
169.   }
170.   ws?.close(); // 关闭 WebSocket 连接
171.   player?.destroy(); // 销毁播放器实例
172. });
173. </script>
175. <style scoped>
176. .video-container {
177.   width: 100%;
178.   height: 100%;
179.   position: relative; /* 设置容器为相对定位 */
180. }
182. canvas {
183.   width: 100%;
184.   height: 100%;
185.   background: #000; /* 设置画布背景为黑色 */
186. }
188. .status {
189.   position: absolute;
190.   top: 50%;
191.   left: 50%;
192.   transform: translate(-50%, -50%); /* 居中显示状态信息 */
193.   background: rgba(0,0,0,0.7); /* 半透明背景 */
194.   color: #fff; /* 白色文字 */
195.   padding: 12px 20px; /* 内边距 */
196.   border-radius: 4px; /* 圆角边框 */
197.   text-align: center; /* 文本居中 */
198. }
200. .error-status {
201.   color: #ff6b6b; /* 错误状态文字颜色 */
202. }
204. .retry-btn {
205.   margin-top: 10px; /* 按钮顶部外边距 */
206.   padding: 5px 10px; /* 按钮内边距 */
207.   background: #3498db; /* 按钮背景颜色 */
208.   border: none; /* 无边框 */
209.   border-radius: 4px; /* 圆角边框 */
210.   color: white; /* 按钮文字颜色 */
211.   cursor: pointer; /* 鼠标指针样式 */
212. }
214. .retry-btn:hover {
215.   background: #2980b9; /* 按钮悬停背景颜色 */
216. }
217. </style>

复制代码

2.3播放

阐明：打开对应文件的路由，播放视频。

3.附件

 3.1视频链接

阐明：https://live.csdn.net/v/474456 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。