vue webRTC播放海康摄像头实时画面延迟1s内

最终效果

主要参考地址，：https://blog.csdn.net/qq_45777115/article/details/118054927?spm=1001.2014.3001.5502

https://blog.csdn.net/qq_45777115/article/details/118054978?spm=1001.2014.3001.5502

1、跟着上面参考地址进行操作；一下内容为参考地址截图

2、在vue项目中，将下载文件放入public中，在index.html文件中引用对应js，如下图

3、在对应需要展示的界面中,代码如下

<template><div class="wrapper"><div style="width: 100%;height: 100%;"><video id="video" controls autoplay muted width="800px" height="600px" /></div></div></template><script>export default {data() {return {webRtcServer:null,}},mounted() {// window.onload = function () {这个注释掉，不然在切换界面后在进入该界面视频就加载不出来，需要刷新界面才能重新this.webRtcServer = new WebRtcStreamer("video", "http://192.168.1.70:8000");this.webRtcServer.connect("rtsp://admin:a1234567@192.168.1.64:554/h264/ch1/main/av_stream");//}//http://192.168.1.70:8000 本机地址//rtsp://admin:a1234567@192.168.1.64:554/h264/ch1/main/av_stream，海康摄像头rtsp地址//window.onbeforeunload = function () { webRtcServer.disconnect(); }},methods: {},beforeDestroy() {this.webRtcServer.disconnect();//退出时关闭，如果不关闭的话刷新界面就不会显示}}
</script><style scoped>.wrapper {width: 800px;height: 600px;}</style>

4、打包发布
iis 添加mime
.mp4 video/mp4
.ogv video/ogg
.webm video/webm

记录一下研究的心路历程
目标是：局域网内，在谷歌浏览器中显示海康摄像头画面，低延迟，需要接入已有vue的框架中

1、海康自己的开发包，一个值V3.0的开发包，这个包支持谷歌浏览器42版以下的，但是自己的vue框架在低版本的谷歌浏览器中根本就打不开，网上教程有教程说是可以的，是慢慢长路，放弃了

2、海康开发包V3.2,支持谷歌高版本，但是需要摄像头支持websocket，我们的摄像头又支持websocket，然后放弃了

3、通过转流转为flv，没有自己写转流的代码，是直接买的硬件转流器，转了flv，在浏览器上延迟有个2-3s，转流器的售后的意思是电脑cpu占用过高（我的电脑确实到了要退休的地步了）。但是转流器上播放webRTC的视频流延迟就在1s，然后就开始研究webrtc

4、webRTC我了解不多，中间在网络上百度也走了很多弯路，最后在在主要参考地址这位博主上找到了方法，webRTC6666

vue webRTC播放海康摄像头实时画面延迟1s内相关推荐

浏览器显示海康摄像头实时预览画面纯前端解决方案
浏览器显示海康摄像头实时预览画面纯前端解决方案将海康设备的 rtsp 协议视频流通过 ffmpeg 转码为 flv 实时视频流,并将实时视频流通过 express 服务生成 http 长链接或 ws ...
调用海康摄像头实时识别数字牌数字
项目场景: 调用海康摄像头实时识别数字牌数字前言项目所需,调用网络摄像头来完成对一个数字牌的识别,用模板匹配的方法分离出数字用VS2015+OPENCV3.4.3完成一.调用摄像头首先在VS ...
海康摄像头实时显示与字符叠加详解
1.说明文章详细叙述了海康摄像头的两种实时显示方法--基于SDK 解码显示和基于数据流回调显示,并且讲述了这在两种显示方法下如何往画面添加字符和图像,最后比较了这两种方法的优劣.文章全程给以详细的程 ...
web播放海康摄像头rstp流
海康摄像头直接前端播放. 1.获取海康摄像头rstp流地址.这个地址是个固定格式. 老版本的格式 rtsp://[username]:[password]@[ip]:[port]/[codec]/[c ...
PHP Web网页实时显示海康摄像头监控画面
首先下载VLC插件(无论电脑32位还是64位,安装32位即可) 链接:https://pan.baidu.com/s/1JHncnGxgeMqmMMCsvMzuWA 提取码:nk66 HTML部分摄 ...
前端如何显示服务器摄像头,浏览器显示海康摄像头实时预览画面纯前端解决方案...
php 实时输出内容到浏览器 php 实时输出内容到浏览器当你在处理一个过程需要耗时很长,但你又需要适时的知道程序当前的处理状况的时候,该怎么办呢?下面就分享一下如何使用php及时的输出当前结果到浏 ...
海康摄像头web无插件3.2，vue开发，Nginx代理IIS服务器
在vue中实现海康摄像头播放,采用海康web无插件3.2开发包,采用Nginx代理IIS服务器实现: 1 摄像头要求,支持websocket 2 Nginx反向代理的结构 3 vue前端显示视频流代码 ...
海康摄像头视频实时监控
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 海康摄像 ...
使用海康摄像头实现实时监控
原文地址为: 使用海康摄像头实现实时监控 1. 基于RTSP协议的windows平台监控. 1.1 选取海康网络摄像头(支持RTSP,标准H.264 RTP封装的设备). 1.2. 按照摄像头的使用 ...

vue webRTC播放海康摄像头实时画面延迟1s内

主要参考地址，：https://blog.csdn.net/qq_45777115/article/details/118054927?spm=1001.2014.3001.5502

vue webRTC播放海康摄像头实时画面延迟1s内相关推荐

最新文章

热门文章