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

yi诺千金

已于 2023-04-27 13:28:03 修改

阅读量2.2w

点赞数 5

分类专栏：前端开发文章标签：前端

于 2019-10-25 11:10:18 首次发布

本文链接：https://blog.csdn.net/yimelancholy/article/details/102737497

版权

前端开发专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言

好久没登录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

<!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>