webSocket推送视频流vue使用

### 使用 Vue.js 和 WebSocket 实现视频流推送 #### 创建 WebSocket 连接实例 为了在前端建立 WebSocket 连接，需利用 `new WebSocket()` 方法并传递 WebSocket 服务端地址作为参数。对于本地开发环境而言，通常会采用类似于`ws://localhost:8080/ws`这样的 URL 来初始化连接[^2]。 ```javascript // 建立WebSocket连接 const socket = new WebSocket('ws://yourserveraddress'); ``` #### 处理 WebSocket 的生命周期事件 当创建了一个 WebSocket 对象之后，应当定义处理程序以响应来自服务器的消息以及管理连接状态的变化。这包括打开连接(`onopen`)、接收消息(`onmessage`)、关闭连接(`onclose`)和错误发生时(`onerror`)的行为。 ```javascript socket.onopen = function(event){ console.log("Connection opened", event); }; socket.onmessage = function(event){ const blob = new Blob([event.data], {type: 'video/mp4'}); video.src = URL.createObjectURL(blob); // 将二进制数据转换成可播放的源文件 }; socket.onerror = function(error){ console.error("WebSocket error observed:", error); }; socket.onclose = function(event){ console.log("Connection closed.", event.code, event.reason); }; ``` #### 配合 FLV.js 解码 H.264 流媒体 考虑到浏览器原生支持有限，在面对某些编码格式如H.264编解码器的情况下，推荐引入第三方库比如 flv.js 。此 JavaScript 库能够帮助解析FLV容器内的音视频轨道，并将其渲染到 HTML5 `<video>`标签上显示出来[^5]。 ```html <template> <div id="app"> <video ref="player"></video> </div> </template> <script> import flvjs from 'flv.js'; export default { mounted(){ if (flvjs.isSupported()) { var player = this.$refs.player; var wsUrl = "ws://yourserveraddress"; let wsStream = new WebSocket(wsUrl); wsStream.binaryType = "arraybuffer"; wsStream.onmessage = function(e) { if(flvPlayer){ flvPlayer.appendBinary(new Uint8Array(e.data)); } }; var config = {}; var flvPlayer = null; try{ flvPlayer = flvjs.createPlayer({ type:'flv', isLive:true, hasAudio:false, hasVideo:true, url:wsStream },config); flvPlayer.attachMediaElement(player); flvPlayer.load(); setTimeout(function(){flvPlayer.play();},1000); }catch(err){ console.warn('FLV playback not supported.'); } } </script> ```