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

先上代码
<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中引入
在这里插入图片描述
然后在引入的页面按照最上面的代码写就行了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/230580.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode Hot100 78.子集

题目&#xff1a; 给你一个整数数组 nums &#xff0c;数组中的元素 互不相同 。返回该数组所有可能的子集&#xff08;幂集&#xff09;。 解集 不能 包含重复的子集。你可以按 任意顺序 返回解集。 方法&#xff1a;灵神 选 or 不选 class Solution {private final List&…

天津大数据培训机构品牌 数据分析师的发展方向

大数据专业还是有一定难度的&#xff0c;毕竟大数据开发技术所包含的编程技术知识是比较杂且多的如果是计算机专业的学生或者自身有一定基础的人学&#xff0c;相对来说会比较容易&#xff0c;但对于零基础小伙伴学习来说&#xff0c;想要学习大数据&#xff0c;难度还是很高的…

Struts 框架(架构师考试复习资料)

Struts 是一个基于 SUN J2EE平台的 MVC 框架&#xff0c;主要是采用 Servlet 和 JSP 技术来实现的。在 Struts 框架中&#xff0c;模型由实现业务逻辑的 JavaBean 或 EJB 构件构成&#xff0c;控制器由ActionServlet和 Action 来实现&#xff0c;视图由一组 JSP 文件构成&#…

Python-猜数字游戏

&#x1f388; 博主&#xff1a;一只程序猿子 &#x1f388; 博客主页&#xff1a;一只程序猿子 博客主页 &#x1f388; 个人介绍&#xff1a;爱好(bushi)编程&#xff01; &#x1f388; 创作不易&#xff1a;喜欢的话麻烦您点个&#x1f44d;和⭐&#xff01; &#x1f388;…

Springboot+FastJson实现解析第三方http接口json数据为实体类(时间格式化转换、字段包含中文)

场景 若依前后端分离版手把手教你本地搭建环境并运行项目&#xff1a; 若依前后端分离版手把手教你本地搭建环境并运行项目_前后端分离项目本地运行-CSDN博客 在上面搭建SpringBoot项目的基础上&#xff0c;并且在项目中引入fastjson、hutool、lombok等所需依赖后。 系统需…

【数据结构第 6 章 ②】- 图的存储结构(详解邻接矩阵)- 用 C 语言实现

目录 一、邻接矩阵表示法 二、AMGraph.h 三、AMGraph.c 四、Test.c 【数据结构第 6 章 ① 】- 图的定义和基本术语-CSDN博客 由于图的结构比较复杂&#xff0c;任意两个顶点之间都可能存在联系&#xff0c;因此无法以数据元素在存储区中的物理位置来表示元素之间的关系&…

KUKA机器人在编程时添加需要等待的输入信号的2种方法

KUKA机器人在编程时添加需要等待的输入信号的2种方法 第一种方法:手动输入法 如下图所示,选中某个程序后,点击下方的“打开”, 如下图所示,将光标定位到所需位置,然后按下左上角的“编辑”按钮,此时示教器上会弹出输入键盘, 如下图所示,在键盘上手动输入语句:wait fo…

mysql支持的整数类型、各类型整数能够表示的数值范围

MySQL :: MySQL 8.2 Reference Manual :: 11.1.2 Integer Types (Exact Value) - INTEGER, INT, SMALLINT, TINYINT, MEDIUMINT, BIGINT mysql支持的整数有&#xff1a;TINYINT、SMALLINT、MEDIUMINT、INT&#xff08;INT和INTEGER是同义词&#xff09;、BIGINT&#xff0c;各…

小黑子——springBoot基础

springBoot简单学习 一、SpringBoot简介1.1 springBoot快速入门1.1.1 开发步骤1.1.2 对比1.1.3 官网构建工程1.1.3 SpringBoot工程快速启动 1.2 springBoot概述1.2.1 起步依赖I. 探索父工程II. 探索依赖III. 小结 1.2.2 程序启动1.2.3 切换web服务器-jetty 二、配置文件2.1 配置…

智能优化算法应用:基于指数分布算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于指数分布算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于指数分布算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.指数分布算法4.实验参数设定5.算法结果6.参考…

【博客园美化】博客园简单动态背景美化(css个人现写的,不喜勿喷)

效果如图&#xff08;背景是动态的&#xff09; 效果参见&#xff1a; 浅吟清风 的博客园 1、前置操作 1、有一个博客园账号&#xff1b; 2、 登陆博客园&#xff0c;进入设置&#xff1b; 3、 选择“博客设置”-> “博客侧边栏公告”-> 申请JS权限&#xff08;图片展…

js写旋转的时钟动态

目录 1、css代码 2.html代码 3.js代码 1、css代码 .box {position: relative;width: 600px;height: 600px;background: url(./images/clock.jpg) no-repeat center;}.hour,.minute,.second {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}.hour {background…

24、pytest通过xfail将测试函数标记为预期失败

官方实例 # content of test_xfail.py import pytest import syspytest.mark.xfail def test_function():print("test_function was invoked.")def valid_config():return Falsedef test_function_02():if not valid_config():pytest.xfail("failing configura…

素材创作平台,解决企业素材供给问题

企业对于高质量素材的需求日益增长。无论是为了提升品牌形象&#xff0c;还是为了推动产品销售&#xff0c;都需要大量的专业设计素材。然而&#xff0c;素材的获取、设计和定制往往是一项耗时耗力的工作。这时&#xff0c;美摄科技素材创作平台应运而生&#xff0c;为企业提供…

387.字符串中的第一个唯一字符 —> `size()`

解答&#xff1a; int firstUniqChar(string s) {int size s.size();// char count[26] { 0 };// error.1int count[26] { 0 };// for (int i 0; i < s.size() - 1; i) // error.2for (int i 0; i < size; i){count[s[i] - a] 1;}for (int i 0; i < size; i){…

J.408之数据结构

J-408之数据结构_北京信息科技大学第十五届程序设计竞赛&#xff08;同步赛&#xff09; (nowcoder.com) 思维好题&#xff0c;直接用两个set存没出现的数字就好了 // Problem: 408之数据结构 // Contest: NowCoder // URL: https://ac.nowcoder.com/acm/contest/68572/J // Me…

运筹说 第105期 | 算法介绍之非线性规划

本期我们进行运筹学之非线性规划算法的讲解&#xff0c;我们将对非线性规划的基础知识进行一个简单的回顾&#xff0c;并介绍求解无约束极值问题和约束极值问题的MATLAB和Python相关代码&#xff0c;以帮助大家利用工具快速求解无约束极值问题和约束极值问题&#xff0c;做到事…

BGP综合

1、使用PreVal策略&#xff0c;确保R4通过R2到达192.168.10.0/24。 2、使用AS_Path策略&#xff0c;确保R4迪过R3到达192.168.11.0/24。 3、配置MED策略&#xff0c;确保R4通过R3到达192.168.12.0/24。 4、使用Local Preference策略&#xff0c;确保R1通过R2到达192.168.1.0…

Nacos注册中心客户端容灾

目前Nacos客户端有一个FailoverReactor来进行容灾文件的管理&#xff0c;可以通过在指定磁盘文件里写入容灾数据来进行客户端使用数据的覆盖。FailoverReactor目前会拦截Nacos客户端查询接口调用&#xff0c;以getAllInstances接口为例&#xff0c;目前FailoverReactor的工作流…

【Linux】浅谈信号量

文章目录 一、共享内存的弊端新概念引入 二、理解信号量原子性 tips&#xff1a;system V 是一套标准&#xff0c;共享内存&#xff0c;信号量&#xff0c;消息队列属于system V。 一、共享内存的弊端 进程A和进程B进行通信时&#xff0c;假如进程A向物理内存的共享区写入&quo…