admin管理员组文章数量:1794759
基于WebSocket前端开发H.264流实现视频实时播放
前言
好久没登录CSDN，发现有许多道友在问我关于这篇文章的问题，在这里说明一下。
对于前端开发作者涉及不多，也并未从事相关开发，该问题是我刚毕业不久做的项目所涉及，具体细节不太记得了，你们问我的问题我也不知道怎么处理，如果本文有写的不好的地方请指出，谢谢。
正文
该项目前端采用vue.js+HTML5+WebSocket
首先下载一个wfs.js的文件，之后对里面的内容根据自己的需要进行修改，附上如下地址：
github/ChihChengYang/wfs.js
这个连接中的wfs.js文件需要修改的部分，首先是WebSocket的连接部分
key: 'onMediaAttached', value: function onMediaAttached(data) { if (data.websocketName != undefined) { var path= "ws://你请求的路径";//例如：ws://127.0.0.1:8080/videoSocket var client = new WebSocket(path); this.wfs.attachWebsocket(client, data.channelName); } else { console.log('websocketName ERROE!!!'); } }修改视频的播放速度，首先找到下面这个两个函数
function h264Demuxer(wfs){...} function MP4Remuxer(observer, id, config){...}分别修改上面两函数中的下面两参数的值，其数值越大播放速度会偏慢，经过实验4500比较接近1s。
_this.H264_TIMEBASE = 4500; this.H264_TIMEBASE = 4500;当视频播放到最后一帧，进行等待，而不是又从头开始播，这时就需要注释相应的代码
key: 'onSBUpdateEnd', value: function onSBUpdateEnd(event) { if (this.browserType === 1) { //仅注释下面两行代码 // this.mediaSource.endOfStream(); // this.media.play(); } this.appending = false; this.doAppending(); this.updateMediaElementDuration(); }到这里使用wfs.js实现H.264流的视频实时播放基本完成。
如果要调用wfs.js中的onWebsocketMessageSending函数，首先在文件的最上方定义两个全局变量
var sendMsg; var clientSocket;找到之前修改过的onMediaAttached函数，加上一句
clientSocket = client;//用全局变量clientSocket来存储client之后找到该函数进行修改
key: 'onWebsocketMessageSending', value: function onWebsocketMessageSending(i) { clientSocket.send(i); console.log('发送数据：' + i); sendMsg = onWebsocketMessageSending;//通过使用全局变量的方式实现外部调用函数内部的函数 }最后在文件末尾加上
export { sendMsg, clientSocket }将这两个变量导出，供外部文件使用。
在需要用到的vue文件中加上
import {sendMsg,socketClose} from './wfs.js' //路径为你文件所在的位置调用时直接在你想调用的位置调用该函数即可
sendMsg("你要发送的数据");测试用的html文件，index.html
<!DOCTYPE html> <html> <head> <title>h.264 To fmp4</title> </head> <body> <h2>h.264 To fmp4</h2> <script type="text/javascript" src="./wfs.js" ></script> <div class="wfsjs"> <video id="video1" width="640" height="480" controls autoplay></video> </div> <script> //页面加载时播放 window.onload = function () { if (Wfs.isSupported()) { var video1 = document.getElementById("video1"), wfs = new Wfs(); wfs.attachMedia(video1,'ch1'); } }; </script> </body> </html>项目最终应到video.vue文件
<template> <div id="Video"> <div id="videoBorder"> <video id="video1" width="640" height="480" autoplay></video> </div> </div> </template> <script> window.onload = function() { if (Wfs.isSupported()) { var video1 = document.getElementById("video1"), wfs = new Wfs(); wfs.attachMedia(video1, 'ch1'); } }; export default { name:"Video", data () { return { }; }, } </script>版权声明：本文标题：基于WebSocket前端开发H.264流实现视频实时播放 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686504281a74924.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论