大家去看这个：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环境变量

参考一下

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

ffmpeg -i rtsp://admin:admin@39.102.100.83:xxxx/12  -q 0 -f mpegts -codec:v mpeg1video -s 800x600 http://127.0.0.1:8081/supersecret

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

 这种就算成功了

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

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

在main.js文件引入

 

 第一行改一下

需要展示视频的vue文件

<template>
  <div class="right_one_box">
    <div class="title"><span></span>蘑菇房视频监控</div>
    <div class="box_con">
      <div class="con">
        <canvas id="video-canvas" style="height: 140px; wight:164px"></canvas>
       
      </div>

    </div>
  </div>
</template>

<script> 
import {PATH,PATH2} from '../../server/constant.js'
export default {
  mounted () {
      var canvas = document.getElementById('video-canvas')

      var player = new JSMpeg.Player(this.path, {canvas: canvas})
 
    },

  data(){
    return{
       path:'ws://127.0.0.1:8082',   //你拉取视频源地址

    }
  },
  methods:{
    

  }
};

应该就可以看到了

第四步：部署到服务器

服务器也需要搭一下环境（给后端说一下你怎么搭的，让他搭）

需要注意一点是：代码127.0.0.1：8082换成你服务器地址

---

问题一：你的rtsp流在vlc正常，在cmd  ffmpeg命令行报错

 这是当时我的报错

解决：ffmpeg强制使用TCP方式读取rtsp流 - 阿波伦 - 博客园

问题二：当你需要读取多个流

我用了最简单的办法，多开了好几个cmd

---

如果你遇到其他问题：欢迎留言讨论，共同进步！！！！！！！！！！！！！！！！！！！