VUE+webrtc-streamer 实现实时视频播放(监控设备-rtsp)

效果

下图则启动成功,此时在浏览器访问127.0.0.1:8000可以看到本机监控画面

1、下载webrtc-streamer

地址:https://github.com/mpromonet/webrtc-streamer/releases

2、解压下载包

3、双击webrtc-streamer.exe启动服务

4、将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下。在index.html文件里引入这两个js文件


5.页面 中使用

注意:第三步在本机启动服务所以 new WebRtcStreamer(id,serverUrl)中URL传入127.0.0.1端口可

html 复制代码
 <template>
 <div>
     <div class="coTitle">视频</div>
        <video id='video' controls autoplay autobuffer muted preload='auto'
          style='width:90%; height: 290px; margin-left:5%;object-fit: fill;'>
       </video>
 </div>
</template>
 
<script>
export default {
  name: 'index1',
  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:8000')
    //需要查看的rtsp地址
    this.webRtcServer.connect('rtsp://user:password@ip:port/cam/realmonitor?channel=1&subtype=0')
    //rtsp://user:password@ip:port/h264/ch1/main/av_stream--海康
  },
  beforeDestroy() {
    this.webRtcServer.disconnect()
    this.webRtcServer = null
  },
}
</script>
 
<style scoped></style>

6、运行项目可查看监控视频播放效果

文章参考链接:https://blog.csdn.net/liona_koukou/article/details/126605137

相关推荐
却道天凉_好个秋1 小时前
WebRTC(二):工作机制
webrtc
亿牛云爬虫专家2 小时前
小红书视频图文提取:采集+CV的实战手记
音视频·爬虫代理·短视频·代理ip·品牌营销·小红书·热点分析
银色的白2 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
萌萌哒草头将军3 小时前
🚀🚀🚀什么?浏览器也能修改项目源文件了?Chrome 团队开源的超强 Vite 插件!🚀🚀🚀
vue.js·react.js·vite
摆渡搜不到你4 小时前
某腾X视频下载器2.1
python·音视频
Shimeng_19897 小时前
前端如何通过(手机)扫描二维码下载app
前端·javascript·vue.js·二维码·扫描二维码下载软件app
小草cys8 小时前
使用 Coze 工作流一键生成抖音书单视频:全流程拆解与技术实现
人工智能·音视频·工作流·coze
MZWeiei8 小时前
MVVM 模式,以及 Angular、React、Vue 和 jQuery 的区别与关系
vue.js·react.js·angular.js
述雾学java8 小时前
Spring Boot + Vue 前后端分离项目解决跨域问题详解
vue.js·spring boot·后端
空城机9 小时前
从零打造前沿Web聊天室:消息系统
前端·vue.js