vue3使用webrtc-streamer查看实时监控(vue2同理)

主备工作

下载插件

这里以webrtc-streamer v0.8.4为例子

下载对应系统的包，我这里下载的是Windows-AMD64-Release（可能比较忙，耐心等待或者其他方法）

下载完成后，解压，打开解压后的文件夹如下

检查视频流

运行webrtc-streamer.exe，默认打开8000端口，然后浏览器访问127.0.0.1:8000就可以看到本地监控了，我们测试一下视频流，只需要在后面加上/webrtcstreamer.html?video=rtsp://xxx:xxx@xxxxxx:xxxx看下监控画面能否出来，如果出不来，请检查视频流的格式是否为h265格式

如何查看视频流格式

安装VLC media player软件，打开后，按ctrl+n将视频流地址复制进去后，点击播放，视频出来后按ctrl+j就可以看到编解码器了，如果是H265格式，请改成H264即可

返回127.0.0.1:8000/webrtcstreamer.html?video=rtsp://xxx:xxx@xxxxxx:xxxx，刷新就出来了

至此准备完毕

打开刚刚解压的文件，找到html/webrtcstreamer.js、html/libs/adapter.min.js两个文件，并复制到项目文件夹的public文件夹内，在index.html内引入这两个js

  <script src="/adapter.min.js"></script>  <script src="/webrtcstreamer.js"></script>

开始编码

新增组件 rtspVideo

<template>  <video id="rtspVideo" muted playsinline controls width="844" height="457"></video></template> <script setup>const props = defineProps({  rtspVideo: {    type: String,    required: true,    default: ''  }})const webRtcServer = ref();const initWebRtcServer = async () => {// import.meta.env.VITE_APP_PORT 是之前运行的exe文件的端口号，默认8000，请自行修改  let url = location.protocol + '//' + location.hostname + ':'+ import.meta.env.VITE_APP_PORT  nextTick(() => {    webRtcServer.value = new WebRtcStreamer('rtspVideo', url);    // 这里需要注意 connect有4个参数，我这边直接改了webrtcstreamer.js中的connect方法    // 将第三个参数设置默认值"rtptransport=tcp&timeout=60"，其他不用管    webRtcServer.value.connect(props.rtspVideo)  })}//页面销毁时销毁webRtconUnmounted(() => {  webRtcServer.value.disconnect()  webRtcServer.value = null})initWebRtcServer();</script> <style scoped>#rtspVideo {  width: 100%;  height: 100%;  background-color: #262626;}</style>

webrtcstreamer.js connect方法修改

由原来

WebRtcStreamer.prototype.connect = function(videourl, audiourl, options, localstream, prefmime)

改成

WebRtcStreamer.prototype.connect = function(videourl, audiourl, options = "rtptransport=tcp&timeout=60", localstream, prefmime)

使用组件 rtspVideo

// rtspVideo为视频流地址 rtsp://xxx:xxx@xxxxxx:xxxx<myVideoPlay :rtspVideo="rtspVideo" />

至此大功告成

本文链接：https://www.kjpai.cn/news/2024-04-19/160382.html，文章来源：网络cs，作者：淼淼，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！