windows基于webrtc-streamer的rtsp播放（vue）

最新推荐文章于 2025-02-19 19:21:25 发布

从南慕白

最新推荐文章于 2025-02-19 19:21:25 发布

阅读量1k

点赞数

分类专栏： vue 文章标签： vue.js webrtc javascript

本文链接：https://blog.youkuaiyun.com/qq_43030908/article/details/128186010

版权

vue 专栏收录该内容

14 篇文章

订阅专栏

1.html栏里有关于html版本的

2.将html/webrtcstreamer.js、html/libs/adapter.min.js复制到vue项目里的public目录里。

在这里插入图片描述

3.修改index.html文件

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

4.index.vue

<template>
  <div>
    <!-- <el-button @click="handleChange">切换</el-button> -->
    <video id="video" muted  autoplay width="400" height="300" style="border:1px solid #333;"></video>
  </div>
</template>
 
<script>
export default {
  name: 'videos',
  data() {
    return {
      webRtcServer: null
    }
  },
  mounted() {
    //video：需要绑定的video控件ID
    //127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
    this.webRtcServer = new WebRtcStreamer('video', 'http://127.0.0.1:9001')
    //需要查看的rtsp地址
    this.webRtcServer.connect("rtsp://admin:password@ip:prod/ch1/main/av_stream",null ,"rtptransport=tcp")

    //rtsp://user:password@ip:port/h264/ch1/main/av_stream--海康
    //rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0--大华
  },
  beforeDestroy() {
    this.webRtcServer.disconnect()
    this.webRtcServer = null
  },
  methods: {
    handleChange() {
      this.webRtcServer.connect('rtsp://admin:password@ip:prod/ch1/main/av_stream')
    }
  }
}
</script>