webSRc实现浏览器播放rtsp【海康】

news/2024/11/17 4:53:15/
先上代码
<template><div>video的配置自己写<video id="video" autoplay width="900" height="900"></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', location.protocol + '//127.0.0.1:8000')//需要查看的rtsp地址this.webRtcServer.connect(这里写你的地址')//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: {}
}
</script><style scoped></style>

下面准备webrtc-streamer
下载https://github.com/mpromonet/webrtc-streamer/releases
在这里插入图片描述
下载后解压
然后启动exe文件
如下图则启动成功,此时在浏览器访问127.0.0.1:8000可以看到本机监控画面
在这里插入图片描述
将下载包html文件夹下webrtcstreamer.js文件和html/libs文件夹下adapter.min.js文件复制到VUE项目public目录下。在index.html文件里引入这两个js文件
在这里插入图片描述
index.html中引入
在这里插入图片描述
然后在引入的页面按照最上面的代码写就行了。


http://www.ppmy.cn/news/1263305.html

相关文章

3D模型制作木质纹理贴图

在线工具推荐&#xff1a; 3D数字孪生场景编辑器 - GLTF/GLB材质纹理编辑器 - 3D模型在线转换 - Three.js AI自动纹理开发包 - YOLO 虚幻合成数据生成器 - 三维模型预览图生成器 - 3D模型语义搜索引擎 本文将讲解如何使用GLTF 编辑器 -NSDT 在线材质编辑工具为3D模型设置…

python写数据进es中

1、自定义inde为&#xff1a;xxxx&#xff0c;data_to_insert也可以自定义函数 from elasticsearch import Elasticsearch from datetime import datetime, timedelta es Elasticsearch([http://es地址1:9200, es地址2:9200, es地址3:9200]) current_date datetime.now() for…

计算机方向的一些重要缩写和简介

参考&#xff1a; 深度学习四大类网络模型 干货|机器学习超全综述&#xff01; 机器学习ML、卷积神经网络CNN、循环神经网络RNN、马尔可夫蒙特卡罗MCMC、生成对抗网络GAN、图神经网络GNN——人工智能经典算法 MLP&#xff08;Multi Layer Perseption&#xff09;用在神经网络中…

node js 递归生成vue文件目录

目录 什么是 fs 文件系统模块 fs.existsSync方法 方法说明&#xff1a; 语法&#xff1a; 向指定的文件中写入内容 writeFile fs.writeFile() 的语法格式 fs.writeFile() 的示例代码 判断文件是否写入成功 fs.mkdir 创建目录 目录已存在&#xff0c;重复创建 创建的目…

基于Java旅游信息管理系统

基于Java旅游信息管理系统 功能需求 1、旅游目的地管理&#xff1a;系统需要能够记录和管理各个旅游目的地的详细信息&#xff0c;包括景点介绍、交通方式、住宿推荐等。管理员可以添加、编辑和删除目的地信息。 2、旅游线路规划&#xff1a;系统需要提供旅游线路规划功能&a…

【TiDB理论知识09】TiFlash

一 TiFlash架构 二 TiFlash 核心特性 TiFlash 主要有 异步复制、一致性、智能选择、计算加速 等几个核心特性。 1 异步复制 TiFlash 中的副本以特殊角色 (Raft Learner) 进行异步的数据复制&#xff0c;这表示当 TiFlash 节点宕机或者网络高延迟等状况发生时&#xff0c;Ti…

三防平板|手持终端PDA|8寸/10寸工业三防平板电脑主板方案定制

近年来&#xff0c;随着科技的快速发展&#xff0c;三防平板成为了各行各业中不可或缺的工具。三防平板采用IP67级别的防护设计&#xff0c;通过了多项测试标准&#xff0c;如国标和美标&#xff0c;具备防水、防摔、防尘、防撞、防震、防跌落以及防盐雾等多重防护功能。因此&a…

APM性能分享观看有感

应用性能监控是什么 应用 ios&#xff0c;app&#xff0c;pc 性能 performance用户体验&#xff0c;注重快&#xff1a;流畅&#xff0c;稳&#xff1a;崩溃&#xff0c;省&#xff1a;资源占用省 监控那些性能 一&#xff0c;快&#xff1a; 1.启动监控&#xff1a;冷启…