rtsp流在浏览器上播放- flv版本

上个用jsmpeg配合rtsp2web播放的方案，我这成功播放。但是画面模糊，还会有卡顿的现象。去除logo水印需要花钱，付费可以理解，但付了费核心问题没解决很烦恼。

在github上又找了一个。原理就是rtsp转可供浏览器播放的webscoket长连接。还是全js实现，node转码。用到的库 后台有

@ffmpeg-installer/ffmpeg、fluent-ffmpeg、express、websocket-stream、express-ws

下载方法

npm install --save @ffmpeg-installer/ffmpeg

npm install --save websocket-stream

npm install --save express

npm install --save fluent-ffmpeg

npm install --save express-ws

前端用到的有

base64 、flv.js

npm install --save js-base64

npm install flv.js

好了 直接贴代码

node部分

const ffmpegPath = require('@ffmpeg-installer/ffmpeg'); // 自动为当前node服务所在的系统安装ffmpeg
const ffmpeg = require('fluent-ffmpeg');
const express = require('express');
const webSocketStream = require('websocket-stream/stream');
const expressWebSocket = require('express-ws');

ffmpeg.setFfmpegPath(ffmpegPath.path);

/**
 * 创建一个后端服务
 */
function createServer() {
    const app = express();
    app.use(express.static(__dirname));
   
    expressWebSocket(app, null, {
        perMessageDeflate: true
    });
    app.ws('/rtsp/', rtspToFlvHandle);

    app.get('/', (req, response) => {
        response.send('当你看到这个页面的时候说明rtsp流媒体服务正常启动中......');
    });

    app.listen(8100, () => {
        console.log('转换rtsp流媒体服务启动了，服务端口号为8100');
    });
}

/**
 * rtsp 转换 flv 的处理函数
 * @param ws
 * @param req
 */
function rtspToFlvHandle(ws, req) {
    console.log(123);
    const stream = webSocketStream(ws, {
        binary: true,
        browserBufferTimeout: 1000000
    }, {
        browserBufferTimeout: 1000000
    });
    // const url = req.query.url;
    const url = new Buffer(req.query.url, 'base64').toString();
    console.log('rtsp url:', url);
    try {
        ffmpeg(url)
            .addInputOption(
                '-rtsp_transport', 'tcp',
                '-buffer_size', '102400'
            )
            .on('start', (commandLine) => {
                // commandLine 是完整的ffmpeg命令
                console.log(commandLine, '转码 开始');
            })
            .on('codecData', function (data) {
                console.log(data, '转码中......');
            })
            .on('progress', function (progress) {
                // console.log(progress,'转码进度')
            })
            .on('error', function (err, a, b) {
                console.log(url, '转码 错误: ', err.message);
                console.log('输入错误', a);
                console.log('输出错误', b);
            })
            .on('end', function () {
                console.log(url, '转码 结束!');
            })
            .addOutputOption(
                '-threads', '4',  // 一些降低延迟的配置参数
                '-tune', 'zerolatency',
                '-preset', 'superfast'
            )
            .outputFormat('flv') // 转换为flv格式
            .videoCodec('libx264') // ffmpeg无法直接将h265转换为flv的，故需要先将h265转换为h264，然后再转换为flv
            // .withSize('50%') // 转换之后的视频分辨率原来的50%, 如果转换出来的视频仍然延迟高，可按照文档上面的描述，自行降低分辨率
            .noAudio() // 去除声音
            .pipe(stream);
    } catch (error) {
        console.log('抛出异常', error);
    }
}

createServer();

前端部分

<template>
  <div class="container">
    <div class="flex">
      <el-input v-model="rtspUrl" style="width: 300px;margin-right: 20px;" placeholder="请输入rtsp流" />
      <el-button type="primary" @click="playFn">播放</el-button>
      <el-button type="danger" @click="destroy">关闭</el-button>
    </div>
    <div class="wrap">
      <video ref="player" class="video" muted autoplay controls />
    </div>
  </div>
</template>

<script>
import flvjs from 'flv.js' // 引入flvjs
import { Base64 } from 'js-base64'
export default {
  data() {
    return {
      player: null,
      // 准备监控设备流地址
      rtspUrl: ''
    }
  },
  mounted() {

  },
  beforeDestroy() {
    // 页面销毁前 关闭flvjs
    this.player.destroy()
  },
  methods: {
    destroy() {
      this.player.destroy()
      this.player = null
    },
    playFn() {
      if (!this.rtspUrl) return
      // 如果浏览器支持flvjs，则执行相应的程序
      if (flvjs.isSupported()) {
        // const url = 'rtsp://192.168.1.19/stream1'
        // 创建一个flvjs实例
        // 下面的ws://localhost:8888换成你搭建的websocket服务地址，后面加上设备流地址
        this.player = flvjs.createPlayer({
          type: 'flv',
          isLive: true,
          url: 'ws://localhost:8100/rtsp/?url=' + Base64.encode(this.rtspUrl)
        })

        this.player.on('error', (e) => {
          console.log(e)
        })

        // 将实例挂载到video元素上面
        this.player.attachMediaElement(this.$refs.player)

        try {
        // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了
          this.player.load()
          this.player.play()
        } catch (error) {
          console.log(error)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    .video {
      width: 300px;
      height: 300px;
    }
  }
  video{
object-fit:fill;
}
</style>

修改后服务可多次处理多个流

  function rtspToFlvHandle(ws, req) {
      console.log("New WebSocket connection");

      const stream = webSocketStream(
        ws,
        {
          binary: true,
          browserBufferTimeout: 1000000,
        },
        {
          browserBufferTimeout: 1000000,
        }
      );

      const url = Buffer.from(req.query.url, "base64").toString();
      console.log("rtsp url:", url);

      try {
        // Start a new FFmpeg instance for each WebSocket connection
        const ffmpegStream = ffmpeg(url)
          .addInputOption("-rtsp_transport", "tcp", "-buffer_size", "102400")
          .on("start", (commandLine) => {
            console.log(commandLine, "转码 开始");
          })
          .on("codecData", function (data) {
            console.log(data, "转码中......");
          })
          .on("progress", function (progress) {
            // console.log(progress,'转码进度')
          })
          .on("error", function (err, a, b) {
            console.log(url, "转码 错误: ", err.message);
            console.log("输入错误", a);
            console.log("输出错误", b);
          })
          .on("end", function () {
            console.log(url, "转码 结束!");
          })
          .addOutputOption(
            "-threads",
            "4",
            "-tune",
            "zerolatency",
            "-preset",
            "superfast"
          )
          .outputFormat("flv")
          .videoCodec("libx264")
          .noAudio()
          .pipe(stream);

        // Handle WebSocket disconnection
        ws.on("close", () => {
          console.log("WebSocket connection closed");
          ffmpegStream.kill(); // Stop FFmpeg process
        });
      } catch (error) {
        console.log("抛出异常", error);
      }
    }