vue播放rtsp流(简单易操作,无flash,跨平台,小白可入)

大家去看这个:vue播放rtsp流方案(支持h265)_是云呀!的博客-CSDN博客

**********************************************************************************************************************

公司给了一个rtsp流,让在网页特定位置播放(我太菜,搞了两天)

首先想到的是vlc,但不行放弃

转rtmp,新浏览器不让用flash,放弃

公司前辈提出解决方案,解决,分享给大家

ffmpeg+Node.js+jsmpeg.js实现播放rtsp

可以参考:Ffmpeg+Node.js+jsmpeg.js实现html5播放rtsp_lvweizhu的专栏-CSDN博客

第一步布置环境

先用vlc看一下流是否可用,能播放再进行

1,安装node ,都到vue了,node肯定有吧?没有看别人的安装吧

2,下载 jsmpeg  :https://github.com/phoboslab/jsmpeg

      百度网盘:链接:https://pan.baidu.com/s/1HVQbLxa2ZRka5-Oy9SlpSA 
      提取码:y5pp 

      下载后,解压 ,位置随意

3,下载ffmpeg: Download ffmpeg-latest-win32-static.zip free - FFmpeg

     百度网盘:链接:https://pan.baidu.com/s/17EKfpslYqz47Axd0MsiMfQ 
     提取码:2mgo 

      下载后解压,位置随意

第二步

1,webSocket模块安装

打开cmd  执行命令  npm install ws

npm install ws

2,cmd  进入到  jsmpeg 文件夹下

执行

node websocket-relay.js supersecret 8081 8082

3,设置ffmpeg环境变量

参考一下

vue播放rtsp流(简单易操作,无flash,跨平台,小白可入)_第1张图片

 再打开一个cmd,执行以下代码

ffmpeg -i rtsp://admin:[email protected]:xxxx/12  -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret

注意:rtsp流换成你们公司自己的

vue播放rtsp流(简单易操作,无flash,跨平台,小白可入)_第2张图片

 这种就算成功了

第三步,在页面代码中编写

将这个js文件放到你的项目中,进行引入

vue播放rtsp流(简单易操作,无flash,跨平台,小白可入)_第3张图片

在main.js文件引入

 

 第一行改一下

需要展示视频的vue文件




                    
                    

你可能感兴趣的:(vue项目,vue.js,javascript,经验分享)