docker 部署webrtc streamer
docker run -itd --net=host --name webrtc-streamer mpromonet/webrtc-streamer
要加–net=host 不然预览相机画面时会出现一直转圈无法加载的问题
vue 利用webrtc streamer 播放rtsp
- 下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下。在index.html文件里引入这两个js文件
- 示例代码
<template> <div> <video id="video" autoplay width="900" height="900"></video> </div> </template> <script setup> // const webRtcServer = ref(); import { ref } from 'vue'; import { computed } from 'vue'; import { nextTick } from 'vue'; //获取webRtc服务 const webRtcServer = ref() const initWebRtcServer = async () => { nextTick(() => { // video:需要绑定的video控件ID // rtspUrl = "rtsp://127.0.0.1:8554/"; let option = "rtptransport=tcp"; // webRtcServer.value = new WebRtcStreamer('video', location.protocol + '//192.168.0.35:8000') //需要查看的rtsp地址 webRtcServer.value.connect(rtspUrl, null, option, null); //webRtcServer.value.connect(rtspUrl); }) } //页面销毁时销毁webRtc const webRtcServerDis = computed(() => { webRtcServer.value.disconnect() webRtcServer.value = null }) initWebRtcServer() </script> <style scoped></style>