使用express+vue在网页上显示RTSP流视频

        这里使用的方式是将获取过来的RTSP流通过express转成flv格式，再在网页上呈现出来，自从flash淘汰之后，网页好像就不能直接出RTSP流了，之前可以使用vlc插件直接播放，现在不行咯。

        使用的工具是vscode+node.js+ffmepg。

        首先下载ffmepg  https://github.com/BtbN/FFmpeg-Builds/releases

         打开vscode，新建一个index.js文件,使用终端输入 npm init -y 初始化一个 package.json 文件,使用命令 npm install express -- save 下载 Express。

在index.js文件下写入：

var express =  require("express");
var expressWebSocket = require("express-ws");
var ffmpeg = require("fluent-ffmpeg");
ffmpeg.setFfmpegPath("D:/zhaxiang/ffmpeg-master-latest-win64-gpl/bin/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();

这里的ffmpeg.setFfmpegPath里放的是你下载ffmepg的绝对路径 。

再在index.js的同一级目录下新建文件夹，名字随便取吧，这里用来放前端数据，如何建不用多说吧，不会的自己补补吧。

        前端代码：

<template>
    <div>
        <video class="demo-video" ref="player" muted autoplay></video>
    </div>
</template>
<script>
import flvjs from "flv.js";
export default {
    data () {
        return {
          id: "1",
          rtsp: "",
            player: null
        }
    },
    mounted () {
        if (flvjs.isSupported()) {
            let video = this.$refs.player;
            if (video) {
                this.player = flvjs.createPlayer({
                    type: "flv",
                    isLive: true,
                    hasAudio:false,
                    hasAudio:false,
                    hasVideo: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);
                };
            }
            // if (video) {
            //     this.player = flvjs.createPlayer({
            //         type: "flv",
            //         url: `/static/test.flv`
            //     });
            //     this.player.attachMediaElement(video);
            //     try {
            //         this.player.load();
            //         this.player.play();
            //     } catch (error) {
            //         console.log(error);
            //     };
            // }
        }
    },
    beforeDestroy () {
        this.player.destory();
    }
}
</script>
<style>
    .demo-video {
        max-width: 880px; 
        max-height: 660px;
    }
</style>

前端代码中data中rtsp：下写的是你摄像头的IP地址，记得改。 

 一切准备就绪之后，在index.js目录下打开终端，输入

npm install express express-ws fluent-ffmpeg websocket-stream -S -D

 再使用 node index.js 启动后端

再打开一个终端，进入前端目录下， 输入：npm install flv.js -S -D

 再输入npm run dev应该就能看到视频啦。

参考：

https://blog.csdn.net/F_angT/article/details/119027058