vue实现网络监控摄像头直播拍照功能
获取摄像机品牌的RTSP地址
比如海康的是： rtsp://user:aaa@qq.com: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
vue实现：
github源码已经告诉我们用法了：
我按照上面的配置调试了很久始终无法实现直播，一直是黑的状态，不显示也不报错...... 眼看项目就要上线了.只能想其它办法。
首先将代码下载到本地，我们一共需要以下三个文件：
注意：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服务器的跨域。
完
上一篇： Android 视频播放技术