我获取rtsp流，在vue前端页面显示

Question

我获取rtsp流，在vue前端页面显示
app.js页面

const RTSP2web = require('rtsp2web')
// 服务端长连接占据的端口号；你也可以不传，默认是：9999
let port = 9999
const urls =[0,1,2,3]
urls.forEach((url) => {
    // 创建一个RTSP2web服务实例出来
    new RTSP2web({
        port
    })
    port++
    console.log(port,'port');
});

vue页面

<template>
    <div class="view">
        <p>录像画面</p>
        <!-- <div id="video-container">
        </div> -->
        <div id="canvas">
            <!-- <canvas id="canvas-2" style="width: 184px; height: 230px"></canvas>
            <canvas id="canvas-3" style="width: 184px; height: 230px"></canvas> -->
            <!-- <canvas v-for="(rtsp, index) in rtspList" :key="index" :id="'canvas-' + index"
                style="width: 184px; height: 230px"></canvas> -->
        </div>

    </div>
</template>

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

    data() {
        return {
            players: [],
            rtspList: []
        };
    },
    methods: {
    },
    mounted() {
       
        this.$bus.$on('rtspList', (info) => {
            var currentRTSPIndex = 0;

            this.rtspList = info
        })

        var rtsp = 'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/101'
        window.onload = () => {
            // 将rtsp视频流地址进行btoa处理一下
            new JSMpeg.Player('ws://localhost:9999/rtsp?url=' + btoa(rtsp), {
                canvas: document.getElementById('canvas-2')
            })

        }
        this.rtsps = [
            'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/201',
            'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/101',
            'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/301'
        ];
        for (let i = 0; i < this.rtsps.length; i++) {
            const container = document.getElementById('canvas');
            const canvas = document.createElement('canvas');
            canvas.id = `canvas-${i + 1}`;
            canvas.style.width = '184px'; // 设置宽度为200px
            canvas.style.height = '230px'; // 设置高度为200px
            canvas.style.margin = '3px'; // 设置高度为200px
            container.appendChild(canvas);
            // var rtsp1 = 'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/201'
            let url = `ws://localhost:${9999 + i}/rtsp?url=${btoa(this.rtsps[i])}`;
            window.onload = () => {
                // 将rtsp视频流地址进行btoa处理一下
                new JSMpeg.Player(url, { canvas })

            }
        }

    },
    watch: {},
    computed: {
    },
    filters: {},

}

</script>
<style scoped>
.view {
    width: 380px;
    box-sizing: border-box;

}

#video-container {
    height: 450px;

}

#video-container canvas {
    width: 220px !important;
    height: 220px !important;
}
</style>

但是我在页面上每次rtsp都只显示最后一个，这是为什么，代码显示修改了麻烦了

Answer 1

上午好☀️☀️☀️️
本答案参考ChatGPT-3.5

问题描述：

前端 Vue 页面获取不同的 RTSP 流，但是页面上只能显示最后一个 RTSP 流。

问题分析：

Vue 页面中同时获取多个 RTSP 流并在页面上显示，但是每个 RTSP 流连接的回调函数 onload 实现都是相同的 window.onload=，所以当多个 RTSP 流的回调函数覆盖掉前面的时，页面上只会显示最后一个 RTSP 流。

解决方案：

• 将 window.onload 函数赋值给一个变量，利用此变量来通用调用onload 回调函数。
• 在 mounted 钩子中循环创建不同的 canvas，并在 for 循环体内使用 let 定义 url，这样每个回调函数的 url 值不相同，能够保证每个 rtsp 流的回调函数调用的是独立的 url 参数。

修改后的代码如下：

import '../../public/jsmpeg.min.js'
export default {

    data() {
        return {
            players: [],
            rtspList: []
        };
    },
    methods: {
    },
    mounted() {
        this.$bus.$on('rtspList', (info) => {
            var currentRTSPIndex = 0;

            this.rtspList = info
        })

        // 将window.onload赋值为fn。
        let fn = () => {
            for (let i = 0; i < this.rtsps.length; i++) {
                const container = document.getElementById('canvas');
                const canvas = document.createElement('canvas');
                canvas.id = `canvas-${i + 1}`;
                canvas.style.width = '184px'; // 设置宽度为200px
                canvas.style.height = '230px'; // 设置高度为200px
                canvas.style.margin = '3px'; // 设置高度为200px
                container.appendChild(canvas);
                let url = `ws://localhost:${9999 + i}/rtsp?url=${btoa(this.rtsps[i])}`;
                // 每个 RTSP 流对应一个独立的回调函数，回调函数内部中使用独立的 url 。
                new JSMpeg.Player(url, { canvas });
            }

        }
        window.onload = fn;

        this.rtsps = [
            'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/201',
            'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/101',
            'rtsp://admin:jsrh123456@192.168.2.100:554/Streaming/Channels/301'
        ];

    },
    watch: {
    },
    computed: {
    },
    filters: {
    },
}

修改的代码关键点是使用了变量 fn 将 window.onload 函数保存了下来，并将回调函数的内容放入循环体内，解决了覆盖的问题。

希望能够帮助你解决问题。