网盘里边只有window版本  其他版本到github上下载

百度网盘下载地址

前端使用

第一步、下载压缩包并解压

第二步、启动文件里边的 webrtc-streamer.exe 服务  双击即可

第三部、前端项目使用

1、把压缩包html文件夹下的webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下

2、在public目录下的index.html  中使用script标签引入上边两个js文件

<script type="text/javascript" src="<%= BASE_URL %>adapter.min.js"></script>
<script type="text/javascript" src="<%= BASE_URL %>webrtcstreamer.js"></script>

3、在.vue文件中使用

<template>
  <div>
    <!-- <a-button @click="handleChange">切换</a-button> -->
    <video id="video" autoplay ></video>
  </div>
</template>
 
<script>
export default {
  name: 'index1',
  data() {
    return {
      webRtcServer: null//webRtcServer上下文
    }
  },
  mounted() {
    //video：需要绑定的video控件ID
    //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
    this.webRtcServer = new WebRtcStreamer('video', location.protocol + '//127.0.0.1:8000')
    //需要查看的rtsp地址,地址为财物系统地址
    this.webRtcServer.connect('rtsp://admin:abcd1234@192.168.0.188:554/Streaming/Channels/101')
  },
  beforeDestroy() {
    this.webRtcServer.disconnect()
    this.webRtcServer = null
  },
  methods: {
    /**
    * 有多个视频源的情况下，直接调用服务的connect方法即可
    */
    handleChange() {
      this.webRtcServer.connect('rtsp://admin:admin@192.168.23.80:554/1/1')
    }
  }
}
</script>
 
<style scoped></style>

 

特殊说明：
上述文章均是作者实际操作后产出。烦请各位，请勿直接盗用！转载记得标注原文链接：www.zanglikun.com
第三方平台不会及时更新本文最新内容。如果发现本文资料不全，可访问本人的Java博客搜索：标题关键字。以获取最新全部资料 ❤