基于WebSocket前端开发H.264流实现视频实时播放

前言

好久没登录CSDN，发现有许多道友在问我关于这篇文章的问题，在这里说明一下。

对于前端开发作者涉及不多，也并未从事相关开发，该问题是我刚毕业不久做的项目所涉及，具体细节不太记得了，你们问我的问题我也不知道怎么处理，如果本文有写的不好的地方请指出，谢谢。

正文

该项目前端采用vue.js+HTML5+WebSocket

首先下载一个wfs.js的文件，之后对里面的内容根据自己的需要进行修改，附上如下地址：

https://github.com/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

	
      


    
h.264 To fmp4
      
    

         
    
 
    	

项目最终应到video.vue文件