使用flv.js + websokect播放rtsp格式视频流
1.问题背景
在最近的项目中,涉及到海康接入的视频播放的问题,海康这边获取到的视频流是rtsp格式,web端目前没有直接可以播放的组件,于是最开始是后端处理了视频流,返回hls格式的m3u8地址,这样用videojs插件就可以播放了,但是问题就是处理了的m3u8地址播放效果非常差,第一次加载时间较长,且播放过程中很卡,尤其是项目的界面做的是视频监控墙,不止一个视频,导致没办法看了。想着最好的方式还是直接播放rtsp地址,不经过转码。于是问题回到了如何播放rtsp.
2.方案的筛选
播放rtsp格式的视频流,网上有很多方式,除了上述的转m3u8,还有转rtmp的,或者使用WebRTC、streamedian、h5stream等,其中webRTC我不太了解,看了一下文档,也比较复杂,就放弃了。然后是streamedian、h5stream这两个,前者是需要收费,另一个我看了文档,没有可以动态设置rtsp地址的地方,只有在配置文件里写好,这样不符合项目的要求,也放弃了,就在纠结到底该怎么办的时候,同事大佬提出了一个建议,看看人家bilibili也有直播,人家是怎么做的呢,于是顺手搜了一下B站直播原理,看到了一篇博文是说bilibili开发的flv.js,讲述了里面的用法,我看了看,确实算是一个比较可行的方法了,于是开干起来。
3.实际运用
首先了解这个方案的大致流程:1.需要一个node服务器处理rtsp流,转为flv流,2.前端安装flv.js显示flv视频流。其中第一步搭建的服务器实际上是搭建了一个websokect服务器,前端通过flv里提供的方法,通过websokect连接到node服务器,这样flv流就源源不断的送到了前端,虽然这里也对rtsp进行了处理,但是效果却出奇的好,比m3u8格式的效果好太多,基本上3、4s就加载出来了,如果同时加载的视频很多,那么差不多也在5-8s内加载出来了,最多的一次12个视频,最后一个加载出来用了12s左右。总得来说比之前m3u8单个都要加载10s左右,视频多了甚至加载不出来好太多了。
好了,介绍的话太多了,还是回到如何搭建吧。node搭建的服务器需要配合ffmpeg。所以首先安装ffmpeg,这个我在Windows上测试的,直接下载了一个压缩包,解压就好,然后是搭建node服务器,将以下package.json直接复制到文件里,然后npm install就可以得到一个服务器环境(前提是已经安装了node哦)。
1 {2 "name": "ffmpeg-server",3 "version": "1.0.0",4 "description": "",5 "main": "index.js",6 "scripts": {7 "test": "echo \"Error: no test specified\" && exit 1"8 },9 "author": "", 10 "license": "ISC", 11 "devDependencies": { 12 "express": "^4.17.1", 13 "express-ws": "^4.0.0", 14 "ffmpeg": "0.0.4", 15 "fluent-ffmpeg": "^2.1.2", 16 "http": "0.0.0", 17 "websocket-stream": "^5.5.0" 18 } 19 }
接下来是index.js
1 var express = require("express");2 var expressWebSocket = require("express-ws");3 var ffmpeg = require("fluent-ffmpeg");4 ffmpeg.setFfmpegPath("G:/ffmpeg/ffmpeg/ffmpeg-4.3.1-win64-static/bin/ffmpeg");5 var webSocketStream = require("websocket-stream/stream");6 var WebSocket = require("websocket-stream");7 var http = require("http");8 function localServer() {9 let app = express(); 10 app.use(express.static(__dirname)); 11 expressWebSocket(app, null, { 12 perMessageDeflate: true 13 }); 14 app.ws("/rtsp/:id/", rtspRequestHandle) 15 app.listen(8888); 16 console.log("express listened") 17 } 18 function rtspRequestHandle(ws, req) { 19 console.log("rtsp request handle"); 20 const stream = webSocketStream(ws, { 21 binary: true, 22 browserBufferTimeout: 1000000 23 }, { 24 browserBufferTimeout: 1000000 25 }); 26 let url = req.query.url; 27 // console.log("rtsp url:", url); 28 // console.log("rtsp params:", req.params); 29 try { 30 ffmpeg(url) 31 .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400") // 这里可以添加一些 RTSP 优化的参数 32 .on("start", function () { 33 console.log(url, "Stream started."); 34 }) 35 .on("codecData", function () { 36 console.log(url, "Stream codecData.") 37 // 摄像机在线处理 38 }) 39 .on("error", function (err) { 40 console.log(url, "An error occured: ", err.message); 41 }) 42 .on("end", function () { 43 console.log(url, "Stream end!"); 44 // 摄像机断线的处理 45 }) 46 .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream); 47 } catch (error) { 48 console.log(error); 49 } 50 } 51 localServer();
文件目录如下:
然后在backendNode这个文件下执行: node index.js就完成了服务器的搭建。
接下来是前端文件的写法:
前端也要先安装flv.js npm install flv.js -S -D
然后就是建一个文件显示视频:<template> <div class="video-box" v-loading="loading">
<video class="demo-video" ref="player" muted @dblclick="fullScreen"></video></div> </template> <script> import flvjs from 'flv.js' export default {props: {rtsp: {type: String,default: ''},id: {type: [String, Number],default: ''}},data () {return {// id: '1',player: null,loading: true}},watch: {rtsp: {handler: function (val) {if (val) {if (this.player) {this.player.unload()this.player.destroy()this.player = nullthis.loading = true}this.$nextTick(() => {this.playVideo()})}},immediate: true}},methods: {fullScreen () {if (this.$refs.player.requestFullScreen) {this.$refs.player.requestFullScreen()} else if (this.$refs.player.mozRequestFullScreen) {this.$refs.player.mozRequestFullScreen()} else if (this.$refs.player.webkitRequestFullScreen) {this.$refs.player.webkitRequestFullScreen()}},playVideo () {const time1 = new Date().getTime()if (flvjs.isSupported()) {let video = this.$refs.playerif (video) {this.player = flvjs.createPlayer({type: 'flv',isLive: true,url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}`})this.player.attachMediaElement(video)try {this.player.load()this.player.play().then(() => {console.log(new Date().getTime() - time1)this.loading = false})} catch (error) {console.log(error)}}}}},beforeDestroy () {if (this.player) {this.player.unload()this.player.destroy()this.player = null}} } </script> <style lang="scss"> .video-box {width: 100%;height: 100%;video {width: 100%;height: 100%;object-fit: fill;}//播放按钮video::-webkit-media-controls-play-button {display: none;}video::-webkit-media-controls-current-time-display {display: none;}video::-webkit-media-controls-timeline {display: none;} } </style>
因为我是写成的一个组件,所以我的rtsp地址是传进来的。
这样就可以播放rtsp了,效果真的不错。
4,其他问题
出了上述的流程,还有其他的问题,比如这个是在本地搭建的,不存在代理的问题,如果要发布到线上环境,则node服务器肯定也是要搭建到线上的服务器的(线上搭建和之前的方式差不多,就是看服务器是Linux还是Windows了,两者区别在于ffmpeg的安装,其他index.js是一样的),就会涉及到代理websokect的问题。因为之前没有代理过,所以也有些坑。
1.首先是本地代理
用vue+axios,通常代理http的都是直接在配置文件里写的,代理websokect的需要在此基础上加上ws:true字段,如下:
'/streamWs/**':{ //target: 'ws:xxx',secure: false,changeOrigin: false,pathRewrite: { '^/streamWs': '' },ws: true //开启ws, 如果是http代理此处可以不用设置}
这个地方都不难,主要还是在调用代理的地方,需要这样写:
this.player = flvjs.createPlayer({type: 'flv',isLive: true,// url: `ws://localhost:8888/rtsp/${this.id}/?url=${this.rtsp}` // 代理ws需要写上ws://${location.host},然后再是代理前缀/streamWsurl: `ws://${location.host}/streamWs/rtsp/${this.id}/?url=${this.rtsp}`})
通过这样设置,就可以成功代理了。
2.然后是线上的代理
线上我用的是nginx代理,重点在于两个地方:
第一个地方是http下面加的东西:
map $http_upgrade $connection_upgrade {default upgrade;'' close;}
第二个是在前端页面的端口下server下加的代理
location /streamWs/ {# http地址是node服务器的地址proxy_pass http:xxx;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#重点是下面这三条,写上了才是代理wsproxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection $connection_upgrade;}
好了,经过这一系列的配置,就可以在线上环境看到了。
------------------------------------------------------------------分割线,我又来了,还是视频的问题,这次优化了,提出了新的方案----------------------------------------------------------------------------------------------------------------------
原因在于,用户方一直抱怨视频不能播放h265格式的视频,然后又说延时高,rtsp都被嫌弃延时高了,真的是没办法了,一直拖着没去解决,正好公司有个后端大佬有空,就一起解决这个问题。前端要改的地方不多,就是将url从ws变为了http://xxxxx.flv格式的,其他的处理都在后端了,包括搭建了一个流服务器,将h265格式的视频转码为h264(再也不用麻烦甲方去改视频流格式了),然后推送给前端,使用的还是flv.js。值得一提的是,将rtsp换成了http-flv之后,加载视频的速度简直飞起了,基本上秒开了。之前我打印过时间戳,差不多网速好的时候,播放rtsp的视频,也要花费1000ms以上,这个直接就是250ms左右,看着真的是赏心悦目呀!
使用flv.js + websokect播放rtsp格式视频流相关推荐
- 使用FFmpeg + nginx + flv.js 实现RTSP格式视频流在web网页进行播放
近期,出于项目需要,要求支持web网页播放RTSP格式的监控视频.因之前并没有相关的项目经验及技术积累.并且H5中的video默认并不支持RTSP格式的视频播放,接下来花了一周时间,都在进行调研和实践 ...
- flv.js无法播放http-flv视频流(带音频)
flv.js demo地址 http-flv视频流不带音频时,可以通过flv.js直接拉流显示. 但是开发需要,视频流中加入音频后,flv.js不能直接拉流显示. 原因:hasAudio开关设置 解决 ...
- 【教程】EasyDSS演示模式播放ws-flv格式视频流,如何控制3分钟自动跳转登录页?
之前我们讲过EasyDSS视频智能直播点播平台在演示模式下登录5分钟后强制跳转登录页的实现过程,大家也可以去了解一下.EasyDSS视频平台界面可以播放ws-flv.flv.hls三种格式的视频流. ...
- 开发那些事儿:在Flv.js前端播放器中解析并绘制H.264编码中的SEI信息
流媒体中的SEI是指补充增强信息(Supplemental Enhancement Information),它提供了向视频码流中加入信息的办法,是H.264/H.265视频压缩标准的特性之一.SEI ...
- Qt+FFmpeg播放RTSP H264视频流(1)- 在Qt项目加入FFmpeg库
Qt FFmpeg播放RTSP H264视频流(1) QtCreator引入FFmpeg库 下载FFmpeg库 添加FFmpeg库到Qt项目 测试FFmpeg库是否能正常使用 QtCreator引入F ...
- (直播、监控)利用javacv解析rtsp流,转换为flv流,通过前端flv.js解析播放
前情提要:之前利用websocket解析过https://blog.csdn.net/IT_CREATE/article/details/105625858?spm=1001.2014.3001.55 ...
- JavaCV音视频开发宝典:无需流媒体服务也无需转码,使用JavaCV和springBoot实现http-flv转封装直播服务,浏览器网页flv.js直接播放rtp、rtsp、rtmp实时视频
<JavaCV音视频开发宝典>专栏目录导航 <JavaCV音视频开发宝典>专栏介绍和目录 前言 本章代码除了在<JavaCV音视频开发宝典:使用JavaCV和spring ...
- html5播放rtsp h264视频流
最近在研究html5实时播放rtsp流的问题,目前来说h5原生不支持这种格式,网上查了很多教程,大概有以下几种思路. rtsp转rtmp rtmp需要falsh的支持,但是在chrome已经默认禁用. ...
- vue项目中使用flv.js实时播放 断流重连 关闭断流开发心得
第一次碰这个东西肯定会碰壁的,问百度人都问傻了(关键还骗人),其中心酸不必多描述,只为成长 后来项目更新采用的是EasyPlayer插件 文章地址: VUE项目中优雅使用EasyPlayer 后端是流 ...
最新文章
- 使用 OpenCV 和 Python 模糊和匿名化人脸
- 无刷新删除 Ajax,JQuery
- c语言章节作业,怎么用C语言编写菜单?
- android可点击的列表,如何在Android的可扩展列表视图中的子点击...
- LeetCode之Move Zeroes
- Android 软键盘自动弹出和关闭
- java true false_关于java:如何存储boolean返回false / true的次数
- 计算机网络2020秋--第二次测试
- AspNetForum 论坛整改:添加显IP功能及IP所属地
- 电子计算机属于哪个税目,高拍仪,摄像头等 税收分类编码是什么?具体选择哪一个计算机外部设备?...
- 解决QQ聊天自动转成表情
- IIS无法启动解决方案
- 罗振宇跨年演讲全文、PPT、图解
- 【muduo】TcpClient与TcpServer建立连接过程对比
- Oracle Golden Gate 系列二 -- GG 的系统需求
- sulley对Modbus协议fuzz实验
- 微信小程序和微信小游戏的区别体现在哪?
- Lua——迭代器的使用、pairs 和 ipairs区别
- 直流电机控制 pwm 和 pid 算法
- 赵承熙获美国人宽恕,马加爵呢