vue实现网络监控摄像头直播拍照功能
获取摄像机品牌的RTSP地址
比如海康的是: rtsp://user:pwd@ip:port/MPEG-4/ch1/main/av_stream
遗憾的是前端不支持rtsp,但支持rtmp,我们就要想办法将rtsp转为rtmp。网络摄像头想要在前端播放需要启动流媒体服务器推rtmp流。
我这边是请后端开发利用 ffmpeg+nginx 实现的,后端推流实现参考链接:
https://www.e-learn.cn/content/nginx/247481
接下来就等后端的rtmp流媒体服务器成功启动了,rtmp流大概长这样:rtmp://192.168.1.100:3000/mylive/test2sss
前端想要播放rtmp需要依赖插件,目前比较主流和常用的是videojs,但是它无法实现拍照截图功能,无奈只能想办法或者重新找。搜遍全网发现了一个自带拍照截图的插件:EasyPlayer
https://github.com/tsingsee/EasyPlayer.js
其实此作者已经写了api 告诉我们在vue上的用法了。
我按照上面的配置调试了很久始终无法实现直播,一直是黑的,不成功也不报错,一度不知道该怎么排查...... 眼看项目就要上线了,只能想其它办法(有大佬能看懂vue集成配置的欢迎评论指出啊)。
vue实现:
首先下载源码到本地:https://github.com/tsingsee/EasyPlayer.js
我们只需要找到以下三个文件:
注意:EasyPlayer.swf 和 EasyPlayer-element.min.js 两个文件一定要放在同一个目录下!!!不要问我为什么!
先将html文件改成这样(另外两个文件不用改):
<!DOCTYPE HTML>
<html>
<head><title>EasyPlayer</title><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="renderer" content="webkit" /><meta name="force-rendering" content="webkit" /><meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"><style>body{margin:0}</style>
</head>
<body>
<!--参数请参考上面github链接中的配置属性-->
<easy-player isresolution="fhd" video-url="你的rtmp流"fluent="false"auto-play="true"live="true"stretch="true">
</easy-player>
</body>
<script type="text/javascript" src="./EasyPlayer-element.min.js"></script>
</html>
将这三个文件放在vue里的static目录中:
最后在项目中需要用到的vue文件中使用iframe 标签引入:
<iframe name="video_frame" id="video" src="/static/EasyPlayer/index.html" width="1663" height="930" frameborder="0" scrolling="no"></iframe>
运行项目:
拍照功能(不需要拍照功能可以直接跳过):
视频中自带这个功能,鼠标移入监控视图下方找到一个相机小图标,会直接将图片下载到本地,但我们的需求是外接拍照按钮。这么一来就需要改源码:
打开 EasyPlayer-element.min.js 文件,刚打开应该是压缩的,网上找个工具先格式化代码
然后 ctrl+f 找到这行代码:
d.toDataURL("image/" + u)
或者直接格式化后找到第50027行附近,找到了之后在这里插入两行代码:
最后在拍照按钮的点击事件添加如下代码:
// 点击拍照
btn_camera(){var self = this;const childWindow = document.getElementById('video').contentWindow;const btn = childWindow.document.querySelector('button[title="快照"]');btn.click();setTimeout(function () {self.base64 = childWindow.window.l;// 获取到的base64截图数据},500);
},
demo版:
本地运行需要使用 apache 本地服务器(下载地址):http://www.wampserver.com/,安装好并可以用的的apache长这样
这三个文件直接放在apache中的www目录下:
修改html文件:
<!DOCTYPE HTML>
<html>
<head><title>EasyPlayer</title><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="renderer" content="webkit" /><meta name="force-rendering" content="webkit" /><meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport"><style>body{margin:0}</style>
</head>
<body>
<!--参数请参考上面github链接中的配置属性-->
<easy-player isresolution="fhd" video-url="你的rtmp流"fluent="false"auto-play="true"live="true"stretch="true">
</easy-player>
</body>
<script type="text/javascript" src="./EasyPlayer-element.min.js"></script>
</html>
浏览器直接访问:http://localhost/ 可以直接看到demo效果,如果不行的话,可以百度开一下apache服务器的跨域。
完。
各位看官有问题可以评论区或发邮件一起探讨,个人邮箱:dingjie0730mi@163.com
vue实现网络监控摄像头直播拍照功能相关推荐
- VUE实现调用摄像头和拍照功能
import Vue from 'vue' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.cs ...
- Vue 使用 navigator.mediaDevices.getUserMedia 调用本地摄像头实现录像以及拍照功能
目录 前言 API `MediaDevices.getUserMedia()` 拍照功能实例 完整代码 实现效果 录像功能实例 完整代码 实现效果 总结 前言 最近在做开源实例: Vue.js 实战系 ...
- vue调用本地摄像头实现拍照
前言: vue调用本地摄像头实现拍照功能,由于调用摄像头有使用权限,只能在本地运行,线上需用https域名才可以使用. 实现效果: 1.摄像头效果: 2.拍照效果: 实现代码: <templat ...
- 网络电视服务器是什么系统,网络视频直播系统
网络视频直播系统可以应客户的要求把活动现场的音频或视频信号经压缩后,传送到多媒体服务器上,在Internet上供广大网友或授权特定人群收听或收看. 现在网络直播系统分:直播软件或是硬件直播,硬件直播的 ...
- 国标GB28181协议网络摄像头直播视频平台EasyGBS如何实现语音对讲功能?
在当下这个智能大热的时代,人工智能技术在持续升温,越来越多电子产品开始融入AI技术,为这些产品提供了新的发展方向.而作为安防摄像头无插件直播应用,智能摄像机自然也不会错过与人工智能技术结合的机会,比如 ...
- vue pc端实现 直播功能+弹幕
vue项目中实现直播功能同时具备弹幕和聊天室功能 一.vue中实现直播功能 1.首先,需要知道直播的常用协议,RTMP 和 HLS,我这边采用的直播流为HLS.下面就是对播放选取,做过 H5 播放器的 ...
- 【干货篇】Vue实现直播弹幕功能
Vue实现直播弹幕 前言 上一篇文章我们讲述了如何用UniApp和Vue在搭建Nginx直播流媒体服务器后实现直播的功能,那么直播中必不可少的一部分就是弹幕,能够增加直播气氛同时,了解用户对于直播或者 ...
- 基于云架构监控摄像头直播运营简介
基于云架构监控摄像头直播运营简介 监控视频大数据基于云技术设计,在云端转码.解码.云转发.云智能等技术行业领先,通过宽带网的将前端图像远程监控.传输.存储.管理的增值业务.支持第三方模拟监控升级.数字 ...
- 网络监控摄像头流媒体视频管理平台实时预览零延迟支持海康威视浙江大华宇视等解决方案分析
方案简介 网络摄像头监控视频低延迟一直是一个比较难以解决的问题,很多非音视频开发专业的技术人员,花费了大量精力开发出来的各种集成网络监控摄像头在浏览器Web网页实时播放的程序,要么延迟非常高,要么及其 ...
最新文章
- 展望:模型驱动的深度学习
- Spring获取ApplicationContext方式,和读取配置文件获取bean的几种方式
- python中常用的序列化模块_Python中的序列化和反序列化
- Sales and Distribution (SD)
- html3d旋转发光立方体,纯css3实现的3D立体动态旋转立方体特效
- Mariadb 二进制半自动安装脚本
- loadrunner学习记录一
- python方法与重载_python特殊方法和运算符重载(番外--重载)
- java doget 和dopost_Servlet中的doGet和doPost
- Windows下MongoDb服务安装及用户权限创建
- Zilliqa Scilla入门
- Endnote x7.5 破解 注册 激活
- 革命三部曲系列——《邪不压正》中,究竟布了多大的一个局!
- <van-list> </van-list>列表组件的使用
- #include<>和#include“”的区别
- SIM逻辑模型与APDU
- 品牌笔记本电脑启动BIOS按键
- python 爬取智联招聘
- Linux终端常见命令
- 强化学习实例5:构建简单蛇棋环境