随笔- 70 文章- 0 评论- 1 阅读- 37709

html5中播放rtsp流实现监控、直播等方案（利用Ffmpeg + node.js + websocket + flv.js实现）

前提：需要确认你的服务器环境中是否安装了ffmpeg这个工具，因为转码的核心其实就是通过 ffmpeg命令转码，需要你通过在命令行里输入 `ffmpeg` 来确认。

安装参考：https://zhuanlan.zhihu.com/p/324472015

一、node服务搭建

参考node版本： v14.20.0

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) {
    const stream = webSocketStream(ws, {
        binary: true,
        browserBufferTimeout: 1000000
    }, {
        browserBufferTimeout: 1000000
    });
    console.log('req.query.url',req.query.url);
    // const url = req.query.url;
    const url = new Buffer.from(req.query.url, 'base64').toString(); // 前端对rtsp url进行了base64编码，此处进行解码
    // console.log('rtsp url:', url);
    try {
        console.log('进来了');
        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', 'ultrafast'
            )
            .outputFormat('flv') // 转换为flv格式
            .videoCodec('libx264') // ffmpeg无法直接将h265转换为flv的，故需要先将h265转换为h264，然后再转换为flv
            .withSize('6%') // 转换之后的视频分辨率原来的50%, 如果转换出来的视频仍然延迟高，可按照文档上面的描述，自行降低分辨率
            .noAudio() // 去除声音
            .pipe(stream);
    } catch (error) {
        console.log('抛出异常', error);
    }
}

createServer();

二、vue代码，使用flv播放

<template>
  <div class="wrap">
    <video class="video" muted autoplay controls ref="player"></video>
  </div>
</template>

<script>
import flvjs from 'flv.js' // 引入flvjs
export default {
  data () {
    return {
      player: null
    }
  },
  mounted () {
    // 如果浏览器支持flvjs，则执行相应的程序
    if (flvjs.isSupported()) {
      // 准备监控设备流地址
      const url = 'rtsp://admin:1234567@192.168.1.100:554/Streaming/Channels/101?transportmode=unicast'
      // 创建一个flvjs实例
      // 下面的ws://localhost:8888换成你搭建的websocket服务地址，后面加上设备流地址
      this.player = flvjs.createPlayer({
        type: 'flv',
        isLive: true,
        url: `ws://localhost:8100/rtsp?url=${window.btoa(url)}`

},{

enableStashBuffer: false, // 是否启用IO暂存缓冲区：使用直播功能时，设置false可减少延迟，并减少网络不稳定时出现画面停顿的情况。

fixAudioTimestampGap: false, // 检测到音视频不同步时，是否填充无声音频：

isLive: true /// 是否为直播流：

})

this.player.on('error', (e) => {
        console.log(e)
      })
      
     // 将实例挂载到video元素上面
      this.player.attachMediaElement(this.$refs.player)
      
      try {
        // 开始运行加载 只要流地址正常 就可以在h5页面中播放出画面了
        this.player.load()
        this.player.play().then(() => {

this.loading = false // 加载成功

})


      } catch (error) {
        console.log(error)
      }  
    }
  },
  beforeDestroy () {
    // 页面销毁前 关闭flvjs
    this.player.destroy()
  }
}
</script>

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