vue中使用webrtc streamer linux中_vue webrtc streamer

docker 部署webrtc streamer

docker run -itd --net=host --name webrtc-streamer mpromonet/webrtc-streamer

** 要加–net=host ** 不然预览相机画面时会出现一直转圈无法加载的问题

vue 利用webrtc streamer 播放rtsp

1. 下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下。在index.html文件里引入这两个js文件
2. 示例代码

   <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>
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26
   27
   28
   29
   30
   31
   32
   33
   34
   35
   36
   37
   38
   39
   40