PC端接入大华播放监控视频

m0_73775686

于 2024-05-28 15:19:23 发布

阅读量394

点赞数 4

文章标签： javascript vue.js 前端框架前端

本文链接：https://blog.csdn.net/m0_73775686/article/details/139267466

版权

1.下载ZLMRTCClient.js,将文件放在public文件中,在index.html中引入该文件.

2.将用户名,密码,摄像头IP,通道id拼接传给后端

appendDHRTSP(videoLoginName, videoPwd, videoIp, videoChannelId) {
            return "rtsp://".concat(videoLoginName).concat(":").concat(videoPwd).concat("@").concat(videoIp).concat(":554/cam/realmonitor?channel=").concat(videoChannelId).concat(encodeURIComponent("&subtype=0"));
        },

 for (let i = 0; i < this.dataA.length; i++) {
                const rtspUrl = this.appendDHRTSP(this.dataA[i].userName, this.dataA[i].password,this.dataA[i].ipSite, this.dataA[i].channel);
                startRealPlay(this.dataA[i].deviceSerialNumber,rtspUrl).then((res) => {
                    console.log(res.data);
                    const videoNode = this.$refs["video" + i];
                    //     console.log(videoNode[0])
                    // const myVideo = document.getElementById("myVideo");
                    this.playVideo(videoNode[0], this.dataA[i].deviceSerialNumber);
                });
            }

 playVideo(video, streamId) {
            return new ZLMRTCClient.Endpoint({
                element: video,
                debug: false,
                zlmsdpUrl: `你的视频流IP地址/index/api/webrtc?app=app&stream=${streamId}&type=play`,
                recvOnly: true,
                audioEnable: true,
                videoEnable: true,
            });
        },

大功告成