EasyNVR网页无插件播放摄像机RTSP流是如何调取接口在Web页实现多窗口同时直播的

EasyNVR

发布于 2020-04-23 15:26:36

1.2K0

发布于 2020-04-23 15:26:36

文章被收录于专栏：EasyNVR

背景需求

在互联网飞速发展的时代，开发者常会说的一个词就是“跨平台”。自从移动端的用户需求越来越大，H5逐渐发展，跨平台似乎已经成为了软件开发不可或缺的技术。EasyNVR互联网直播系统无论是PC浏览器还是手机APP、手机浏览器、微信客户端，都可以无缝接入，摒弃浏览器插件这种受限的用户接入方式，轻量、友好地进行全部直播、录像、检索、回放等功能的对接，一套系统，全终端兼容！

在展示界面上，EasyNVR已简洁、轻便、清新的风格深受广大用户的喜欢，同时针对用户在使用过程中的需求，支持多通道直播，但是当用户有更灵活多变的播放需求以及丰富的样式风格要求时，EasyNVR二次开发接口就发挥其作用了。

解决方案

1.通过接口可以实现用户多变复杂的业务需求，完全可以按照自己的喜好定制漂亮的外观，接口文档http://demo.easynvr.com:10800/apidoc/）可以在线参考。

2.新建文件demo目录结构如下easy-player.swf和easy-player-element.min.js文件可以通过https://www.npmjs.com/package/easy-player）获取，插件有详细使用文档。

3.使用到的接口

4.调取接口必须带上对应的通道，播放协议可选默认FLV。

5.如果是按需需要30秒调取一次保活接口，不然服务端30秒后会停止向设备端拉取视频流。

6.index.html内容文件如下

javascript
<!DOCTYPE HTML>
<html>

<head>
<title>EasyNVR</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">
<!-- 引入样式插件 -->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<style>
.col-4 {
    border: 1px #ccc solid;
}
</style>
</head>

<body>
<!-- 容器标签 -->
<div class="container">
    <div class="row" id="row">
    </div>
</div>
<!-- 按钮列表 -->
<button id="btn1">开始播放</button>
<button id="btn3">增加播放窗口</button>
<button id="btn2">停止保活</button>
</body>
<!-- 引入播放器插件 -->
<script type="text/javascript" src="easy-player-element.min.js"></script>
<!-- 引入jquery插件 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <script>
//定义变量来存放软件服务的IP和端口
var httpStr = "http://127.0.0.1:10800"
$(document).ready(function () {
    //定义一个定时器用来保活接口
    var time = 0
    //当点击开始播放按钮执行保活状态
    $("#btn1").click(function () {
        //通过get请求直播链接接口
        //这里我使用的是软件通道3，本地测试使用本机可用的通道。
        $.get(httpStr + "/api/v1/getchannelstream?channel=3&protocol=HLS", function (data, status) {
            //data中有接口返回的详细信息可在控制台查看
            console.log(data)
            //将成功获取的播放地址注入到easy-player标签中
            $(".testPlayer").attr("video-url", httpStr + data.EasyDarwin.Body.URL);
            //开启一个定时器每隔30秒请求一次保活接口方法
            time = setInterval(() => {
                //调取保活接口
                touchchannelstream()
            }, 30 * 1000);
        });
    });

    //当点击停止保活按钮执行保活状态停止
    $("#btn2").click(function () {
        //停止定时器
        clearInterval(time);
    });
    //当点击增加按钮会向页面插入一个窗口
    $("#btn3").click(function () {
        $("#row").append('<div class="col-4"><easy-player class="testPlayer" live="true" aspect="300:100" show-custom-button="true"></easy-player></div>')
    });
});
//定义一个保活接口方法
function touchchannelstream() {
    $.get(httpStr + "/api/v1/touchchannelstream?channel=3&protocol=HLS", function (data, status) {
        $("#test2").attr("video-url", httpStr + data.EasyDarwin.Body.URL);
        console.log("保活")
    });
}
 </script>

</html>

7.启动成功点击增加播放窗口