记录：记录以便日后翻阅，web端chrome浏览器对大华视频监控和录像回放的方式

汪同学丶

已于 2022-03-03 19:49:01 修改

阅读量5.4k

点赞数

分类专栏：前端 HTML+CSS+JAVASCRIPT 文章标签： video

于 2019-01-09 16:46:38 首次发布

本文链接：https://blog.csdn.net/weixin_44402694/article/details/86161935

版权

前端 HTML+CSS+JAVASCRIPT 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、视频监控的方式

1、大华摄像头在乐橙开放平台绑定设备，获取到rtsp流地址
2、通过各种player进行播放达到监控的需求（会有播放延迟）

二、视频录像回放

Ⅰ、方案①：chrome打开ie通过ie下控件实现

1：先运行.reg文件，已达到调用ie程序的作用，

Windows Registry Editor Version 5.00  
  
[HKEY_CLASSES_ROOT\openIE]  
@="URL:OpenIE Protocol"  
"URL Protocol"=""  
  
[HKEY_CLASSES_ROOT\openIE\DefaultIcon]  
@="iexplore.exe,1"  
  
[HKEY_CLASSES_ROOT\openIE\shell]  
  
[HKEY_CLASSES_ROOT\openIE\shell\open]  
  
[HKEY_CLASSES_ROOT\openIE\shell\open\command]  
@="cmd /c set m=%1 & call set m=%%m:openIE:=%% & call \"C:\\Program Files\\Internet Explorer\\iexplore.exe\" %%m%% & exit"

2：js代码openIE 携带url

window.open('openIE:https://www.baidu.com', '_parent')

3：在大华乐橙开放平台上得到appID和appSecret，通过接口获取token
4：通过得到的token+设备序列号S/N+设备通道号调取接口实现播放
通过token+设备序列号+通过接口获取到的录像片段点调取接口实现录像回放
5：具体代码：（仅供本人回阅使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试ie录像</title>
    <link rel="icon" type="image/x-icon" href="images/title_logo.png" />
    <link href="css/newStyle.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" href="css/plugin.css"  type="text/css">
    <script src="js/jquery-1.11.3.min.js"></script>
</head>
<body  style="padding:0;margin:0;width:100%;height:100%;background-color:#ffffff;overflow:hidden" >

<div style="width:100%;height:100%;padding:0;margin:0;">
    <!--已安装插件 表单-->
    <div class="previewFormBg">
        <!--已安装插件 预览-->
        <div class="previewBox01 item" id="previewPage" style="display:none">
            <div class="previewContent01">
                <div class="videoBox" id="videoBox">
                    <!-- <object  id="LCOpenSDKPlugIn" classid="clsid:14107C75-63C4-4E57-9C70-ED5675EAA254" width="800" height="600"></object> -->
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

<script language="JavaScript"   type="text/JavaScript">
    $(document).ready(function(){
        submitToPreview()
        function submitToPreview(){  //提交表单信息
            $('#previewPage').show();
            var ocx = null;
            ocx = window.document.createElement("object");
            ocx.setAttribute("id","LCOpenSDKPlugIn");
            ocx.setAttribute("classid","clsid:14107C75-63C4-4E57-9C70-ED5675EAA254");
            ocx.setAttribute("width","800");
            ocx.setAttribute("height","600");
            $('#videoBox').html(ocx);
            setTimeout(function () {
                var token = 'At_c3c0f5ad16cc4e3dbdc878dd3ec8f3ce';
                var deviceID = '3M02101PAG00263';
                var channelID = 0;
                var testEnvironment = "openapi.lechange.cn"; //测试环境地址
                LCOpenSDKPlugIn.openLog(1);    //线上需更改
                LCOpenSDKPlugIn.initOpenApi(testEnvironment,443);   //线上需更改
                var iRes = LCOpenSDKPlugIn.playCloud(token,deviceID,'33970315260'); // 接口获取到的token+设备序列号+接口获取到的录像时间片段
            },0)
        }
    })
</script>

Ⅱ、方案②：使用easyNVR+easy-player实现

easyNVR window官网下载地址：https://gitee.com/easydarwin/ReleaseVersion/blob/master/EasyNVR/EasyNVR-windows-3.2.0-1901041551.zip
1、根据网址下载软件使用版本
2、解压缩后运行EasyNVR.exe程序，根据程序给的网址和端口链接可访问视频html完整页面
3、进行通道配置摄像头设备 通道号、是否录像、rtsp流地址等
4、配合easy-player，通过ajax请求接口地址拿到之前启动的nvr服务配置好的视频地址
也可以通过ajax请求接口拿到当前nvr服务下的配置过的设备的录像地址
5、把得到的地址给到easy-player的url即可实现播放
6：具体代码：（仅供本人回阅）

<!DOCTYPE HTML>
<html>
    <head>
        <title>easy-player</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
        <style type="text/css">
        	#test2 .player-wrapper, #test3 .player-wrapper {
        		width: 600px;
        		height: 340px;
        		float: left;
        		margin-left: 10px;
        	}
        </style>
    </head>
    <body>      
        <easy-player id="test2" live="true" aspect="100:100" show-custom-button="true"></easy-player>
        <easy-player id="test3" live="false" aspect="100:57" show-custom-button="true" controls="true"></easy-player>
        <button class="play">开始播放</button>
        <button class="his">历史录像</button>
    <script type="text/javascript" src="easy-player-element.min.js"></script>
</body>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>
$(document).ready(function(){
    $(".play").click(function(){
        //获取接口 的地址
        $.get("http://127.0.0.1:10800/api/v1/touchchannelstream?channel=2&protocol=HLS",function(data,status){
            //返回的数据
            console.log(data);
            $("#test2").attr("video-url","http://127.0.0.1:10800"+ data.EasyDarwin.Body.URL);
        });
    });
    $(".his").click(function(){
        //获取接口 的地址
        $.get("http://127.0.0.1:10800/api/v1/record/querydaily?id=2&period=20190109",function(data,status){
            //返回的数据
            console.log(data);
            $("#test3").attr("video-url","http://127.0.0.1:10800"+ data.list[0].hls);
        });
    });
});
</script>