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

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

  • 5
    点赞
  • 63
    收藏
    觉得还不错? 一键收藏
  • 27
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 27
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值