RTSP流媒体播放器

rtsp主要还是运用ffmpeg来搭建 node后端转发到前端，前端再播放这样的思路。

这里讲的到是用两种方式，一种是ffmpeg 设置成全局来实现，一种是ffmpeg放在本地目录用相对路径来引用的方式。

ffmpeg 下载地址：http://www.ffmpeg.org/download.html
jsmpeg 下载地址：https://jsmpeg.com/jsmpeg.min.js

本文福利，免费领取C++音视频学习资料包+学习路线大纲、技术视频/代码，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，编解码，推拉流，s rs）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓

一、设置成全局变量的方式。

1.安装 ffmpeg。

1） Linux下先安装 ffmpeg，详情可参考以下地址，一定要配置成全局可用。参考文档
 https://blog.csdn.net/wang y on g pro/ar ti cle/de tail s/104036835

2）如何配置window 版本 ffmpeg 全局可用，先下载 ffmpeg，找到 ffmpeg里的路径：ffmpeg bin 然后加入你的环境变量 path里。

2.node 服务器的搭建。

安装插件 node–rtsp–stream, npm i —save–dev node–rtsp–str e a m.

创建一个 index.js，代码如下

const Stream=require('node-rtsp-stream');
// 设置rtsp视频流地址
const rtsp_urls = 'rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov'
const streams = new Stream({
  name: 'sockets',
  streamUrl: rtsp_urls,
  wsPort: 9998,
  ffmpegOptions: { // 选项ffmpeg标志
    '-stats': '', // 没有必要值的选项使用空字符串
    '-r': 30, // 具有必需值的选项指定键后面的值<br&gt;　　　　'-s':'1920*1080'
  }
})

然后运行 i nd e x.js。node i nd ex.js

3.搭建前端 vue

需要引入插件 jsmpeg，这里可以把jsmpeg 下载到本地然后将JSMpe g 对象添加到window 对象中，方便vue里调用，并且不会报错。

<canvas id="video-canvas" width="1366" height="750" style="width:980px;height:544px"&gt;</canvas&gt;
export default {
  name: 'App',
  data () {
  },
  mounted () {
    require('./jsmpeg.min.js')
    const canvas = document.getElementById('video-canvas')
    var urls = 'ws://localhost:9998'
    new window.JSMpeg.Player(urls, {canvas: canvas})
  },
  beforeUnmount () {
    this.player.destory()
  }
}
</script>

至此就搭建好一个 r tsp 直播流的方案。

二、另一种不需要 设置成全局变量的方式。

1.搭建一个No de后端服务。

需要先下载 ffmpeg，可以不用配置成全局变量，就放在和node 服务目录下。

先安装我们所需要的插件 npm install express express–ws fluent–ffmpeg websocket-stream –save–d e v

然后创建一个In d ex.js，代码入下

var express =  require("express");
var expressWebSocket = require("express-ws");
var ffmpeg = require("fluent-ffmpeg");
ffmpeg.setFfmpegPath("./ffmpeg/bin/ffmpeg");  // ffmpeg本地路径
var webSocketStream = require("websocket-stream/stream");
var WebSocket = require("websocket-stream");
var http = require("http");
function localServer() {
  let app = express();
  app.use(express.static(__dirname));
  expressWebSocket(app, null, {
    perMessageDeflate: true
  });
  app.ws("/rtsp/:id/", rtspRequestHandle)
  app.listen(8888);
  console.log("express listened")
}
function rtspRequestHandle(ws, req) {
  console.log("rtsp request handle");
  const stream = webSocketStream(ws, {
    binary: true,
    browserBufferTimeout: 1000000
  }, {
    browserBufferTimeout: 1000000
  });
  let url = req.query.url;
  console.log("rtsp url:", url);
  console.log("rtsp params:", req.params);
  try {
    ffmpeg(url)
      .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400")  // 这里可以添加一些 RTSP 优化的参数
      .on("start", function () {
        console.log(url, "Stream started.");
      })
      .on("codecData", function () {
        console.log(url, "Stream codecData.")
        // 摄像机在线处理
      })
      .on("error", function (err) {
        console.log(url, "An error occured: ", err.message);
      })
      .on("end", function () {
        console.log(url, "Stream end!");
        // 摄像机断线的处理
      })
      .outputFormat("flv").videoCodec("copy").noAudio().pipe(stream);
  } catch (error) {
    console.log(error);
  }
}
localServer();

然后启动 index.js。node i ndex.js

2.vue 前端代码

安装 flv.js，npm i —save-dev flv.js

<video class="demo-video" ref="player" muted autoplay></video>
<script>
import flvjs from 'flv.js'
export default {
  name: 'App',
  data () {
    return {
      id: "1",
      rtsp: "rtsp://wowzaec2demo.streamlock.net/vod/mp4:BigBuckBunny_115k.mov", //rtsp地址
      player: null
    }
  },
  mounted () {
    if (flvjs.isSupported()) {
      let video = this.$refs.player;
      if (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();
        } catch (error) {
          console.log(error);
        }
      }
    }
  },
  beforeUnmount () {
    this.player.destory()
  }
}
</script>