vue中web端播放rtsp视频流(摄像头监控视频)(海康威视录像机)

一、ffmpeg安装​​​​​​

ffmpeg下载 https://ffmpeg.org/download.html找ffmpeg-release-essentials.zip点击下载,下载完解压ffmpeg.exe 程序运行

二、配置ffmpeg环境变量

添加成功后验证是否生效任意地方打开cmd窗口输入 ffmpeg 打印如下表示成功

三、node搭建websocket服务

新建一个app.js文件,同级目录下npm安装 node-rtsp-stream

我是直接写在项目里了,你们可以单独写在外面

javascript 复制代码
npm install node-rtsp-stream -S

app.js内容

javascript 复制代码
const stream = require('node-rtsp-stream')
const urls = [
    'rtsp://admin:[email protected]:554/Streaming/Channels/101',
    'rtsp://admin:[email protected]:554/Streaming/Channels/201',
    'rtsp://admin:[email protected]:554/Streaming/Channels/301'
]; // 将此处替换为实际的RTSP流地址
let wsPort = 9999; // 初始端口号
urls.forEach((url) => {
    new stream({
        name: `video-stream-${urls.indexOf(url) + 1}`,
        streamUrl: url,
        wsPort: wsPort,
        ffmpegOptions: {
            '-stats': '',
            '-r': 30,
            '-s': '1920*1080'
        }
    });
    wsPort++; // 每次递增端口号
});

运行

javascript 复制代码
node app.js

这样就是成功了

四、vue播放视频

vue组件

jsmpeg.min.js下载地址

链接:https://pan.baidu.com/s/1_KgKM-sOzfrAVs_8LgCG1w?pwd=z7z5

提取码:z7z5

javascript 复制代码
<template>
    <div class="view">
        <p>录像画面</p>
        <div id="video-container">
        </div>
    </div>
</template>

<script>
import '../../public/jsmpeg.min.js'
export default {

    data() {
        return {
            players: []
        };
    },
    methods: {
    },
    mounted() {
        //开始播放
        const container = document.getElementById('video-container');
        for (let i = 0; i < 3; i++) {
            const canvas = document.createElement('canvas');
            canvas.id = `video-${i + 1}`;
            canvas.style.width = '210px'; // 设置宽度为200px
            canvas.style.height = '210px'; // 设置高度为200px
            canvas.style.margin = '3px'; // 设置高度为200px
            container.appendChild(canvas);
            const url = `ws://127.0.0.1:${9999 + i}/video-stream-${i + 1}`;
            // const url = `ws://127.0.0.1:9999/video-stream-${i + 1}`;
            this.players.push(new JSMpeg.Player(url, { canvas }));
            this.players[i].play();
        }

    },
    watch: {},
    filters: {},
    beforeDestroy() {
        this.players.forEach(player => player.stop());
    }

}

</script>
<style scoped>
.view {
    background-color: rgb(43, 168, 188);
    box-sizing: border-box;
    
}

#video-container{
    height: 450px;

}
</style>

jsmpeg.min.js建议在index.html引入,我只是不放心又引入了一遍,正常在index.html也要引入

相关推荐
腾讯TNTWeb前端团队6 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰10 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪10 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪10 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy11 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom11 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom11 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom11 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom12 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom12 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试