Bootstrap

vue中使用webrtc streamer linux中

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>
    
;