vue实现网络监控摄像头直播拍照功能

最新推荐文章于 2024-08-19 09:37:57 发布

桃子Jerry

最新推荐文章于 2024-08-19 09:37:57 发布

阅读量4.1k

点赞数

分类专栏：前端前端插件文章标签： js html 海康摄像头 vue

本文链接：https://blog.csdn.net/jerryJJYY/article/details/103271136

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端插件

5 篇文章 0 订阅

订阅专栏

获取摄像机品牌的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服务器的跨域。

完。