测试webRTC插件是否有问题

发布时间：2025-06-24 20:24:43  作者：北方职教升学中心  阅读量：332

这里说明webRTC插件没问题！

四、

3、

启动模式：最好选2。5px表示模糊度，您可以根据需要调整此值。50%表示透明度，您可以根据需要调整此值。

1、webrtc-streamer.exe -o -H 0.0.0.0:9001。使用简单的机制 WebRTC 流式传输视频捕获设备 RTSP 源项目，它内置了一个小的 HTTP server 来对 支持WebRTC所需的相关接口。vue3+vite+ts）_webrtc播放rtsp流-CSDN博客。

2、相对于ffmpeg+flv.js方案，延迟降低到0.4秒左右，图片的加载速度也变快了，在切换浏览器标签后，

2、

<script setup lang="ts">import {ref, onMounted, defineComponent, onUnmounted,nextTick} from "vue";import {RouterView, useRouter} from "vue-router";import ScaleScreen from "@/components/scale-screen";import Headers from "@/views/header.vue";import Setting from "@/views/setting.vue";import {useSettingStore} from "@/stores/index";import {storeToRefs} from "pinia";import {borderbox1，cmd￰目录c;使用_。
js在插件中的位置（如图）：
将两个js放入项目assets目录中。 测试webRTC插件是否有问题。

网站：Releases · mpromonet/webrtc-streamer (github.com)。将assets文件夹放入两个js文件（在下载的插件中寻找）

两个js分别是webrtcstreamer.js和adater.min.js，分别在html文件夹和html/lib文件夹中。下载解压并启动。

127.0.0.0是webrtc-streamer的操作ip，video后面是rtsp流的网络URL。

二、_ 命令开启，

-o：指不需要转码，降低CPU。图片不会暂停，并解决了http1.1同域名中的并发限制(谷歌浏览器中可同时播放6个以上video)。 decoration3} from '@kjgl77/datav-vue3';import {ArrowLeft} from "@element-plus/icons-vue";使用const返回按钮使用返回按钮 router =useRouter();///自适应窗constt自适应窗constt settingStore = useSettingStore(); const {isScale} = storeToRefs(settingStore);const wrapperStyle = {};//webRtcServerURLconsttt///rtsp视频流 RTSP_URL = "rtsp://admin:hmrghck01;10.0.151.254:554/h264/ch1/main/av_stream";///对应video的idlet video = document.getElementById('video');////后端操作的webrtc-streamer.ipconstttexe中的ipconst webRtcServerIp = ref('127.0.0.1');const webRtcServer = ref(null);const initWebRtcServer = () => { nextTick(() => { video = document.getElementById('video'); if (video) {//9001后端运行的webrtc-streamer.exe中的端口 webRtcServer.value = new WebRtcStreamer('video', `${location.protocol}//${webRtcServerIp.value}:9001`); webRtcServer.value.connect(RTSP_URL); } else { console.error('没有找到视频元素'); } });};// Call initWebRtcServer when the component is mountedonMounted(() => {//启动 initWebRtcServer();});// Destroy WebRTC server on component unmountonUnmounted(() => { if (webRtcServer.value) {//销毁 webRtcServer.value.disconnect(); webRtcServer.value = null;}});</script><template> <video id="video" class="video-js" autoplay ></video></template><style lang="scss" scoped>#video{ width: 95%; height: 95%; margin: 0 auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); // blur(5px)：这是一个模糊过滤器，它模糊了图像的边缘。

了解webrtc-streamer。运行成功！！

参考：大佬文章。5px表示模糊度，您可以根据需要调整此值。

打开浏览器󿀌输入127.0.0.1:9001/webrtcstreamer.html?video=rtsp://admin:01@10.0.151.254:554/h264/ch1/main/av_stream。index.webrtcstreamer在html中引入.js。main主 sub子>/av_stream例：rtsp://admin:12345@1.0.151.254:554/h264/ch1/main/av_stream。

webrtc-streamer 通过使用简单的机制，

三、

我用的是海康摄像头，rtsp流的网络URL是rtsp://admin:01@10.0.151.254:554/h264/ch1/main/av_stream。下载webrtctc-streamer。 // opacity(50%)：这是一个透明度滤镜，它使图像半透明。

一、

-H：指定端口号。在vue中使用。

webrtc播放rtsp视频流;vue2、

海康摄像头rtsp格式：rtsp://<账号>:<密码>@<IP>:<端口,默认554>/<H264/h265视频编码>/<通道>/<码流，双击webrtc-streamer.exe启动。

1、

探索WebRTC Streamer：CSDN博客是实时通信的新领域。以下整合到项目（vue3+vite+ts）~~~~。 filter: blur(0.5px) opacity(80%);}</style>

五、