基于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  


    

h.264 To fmp4

项目最终应到video.vue文件


你可能感兴趣的:(前端开发,H.264流视频播放,前端)