vue播放rtsp流（简单易操作，无flash，跨平台，小白可入）

是云呀！

已于 2023-06-09 14:21:44 修改

阅读量3.5w

点赞数 10

分类专栏： vue项目文章标签： vue.js javascript 经验分享

于 2021-10-13 14:06:25 首次发布

本文链接：https://blog.csdn.net/yunbabac/article/details/120740547

版权

vue项目专栏收录该内容

15 篇文章 0 订阅

订阅专栏

大家去看这个：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:{
    

  }
};

应该就可以看到了