使用EasyNVR无插件流媒体服务器接口和EasyPlayer.js播放器插件实现web网页H5播放无插件
2023-09-14 08:59:58 时间
1.背景需求
- 很多客户在使用EasyNVR无插件流媒体服务器时,不喜欢产品化的界面,有时可能满足不了日常观看使用的需求。因此软件提供丰富的HTTP接口,供第三方平台调用集成。但是有时客户这边可能没有专业的团队进行二次开发,这样一来就无法使用软件提供这么优秀的环境,实属可惜。
2.解决方案
- 这里可以通过很多种方法调取软件提供的接口,只要支持http协议都可以。这里我通过jQuery插件调取接口实现在web播放功能小案例,目的就是为了让客户对接口的初步了解并使用。
3.实现
- 新建文件demo目录结构如下easy-player.swf和easy-player-element.min.js文件可以通过[https://www.npmjs.com/package/easy-player]获取,插件有详细使用文档。
- 使用到软件的接口
- index.html内容文件如下
<!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">
</head>
<body>
<!-- 使用插件标签 -->
<easy-player id="test2" live="true" aspect="300:100" show-custom-button="true"></easy-player>
<button>获取播放链接并播放</button>
</body>
<!-- 引入播放器插件文件 -->
<script type="text/javascript" src="easy-player-element.min.js"></script>
<!-- 引入jqueryCDN地址 -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
// 文档加载完成会执行ready()函数文件
$(document).ready(function(){
//点击button按钮获取视频地址
$("button").click(function(){
//调取接口的地址有三种这里使用的是HLS
//http://127.0.0.1:10800/api/v1/touchchannelstream?channel=1&protocol=FLV
//http://127.0.0.1:10800/api/v1/touchchannelstream?channel=1&protocol=RTMP
$.get("http://127.0.0.1:10800/api/v1/touchchannelstream?channel=1&protocol=HLS",function(data,status){
//返回的数据 data JSON格式
console.log(data);
//拼接返回的地址字符串给 video-url
//注:RTMP不需要拼接 "http://127.0.0.1:10800"+
$("#test2").attr("video-url","http://127.0.0.1:10800"+ data.EasyDarwin.Body.URL);
});
});
});
</script>
</html>
- 准备好之后在当前文件hs -o以服务的方式启动
hs -o
如果软件有npm
npm install http-server -g 全局安装
如果没有可以使用其他服务的方式打开此文件。
注:一定要以服务的方式访问index.html
- 启动成功点击获取
- 成功播放
案例gitee地址:[https://gitee.com/daybreakxh/ajaxdemo.git]
关于EasyNVR
EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;
点击链接加入群【EasyNVR解决方案】:383501345
Copyright © EasyNVR.com 2016-2019
相关文章
- 利用h5,chart.js监测手机三轴加速度,用以研究计步算法等
- JS框架_(Typed.js)彩色霓虹灯发光文字动画
- JS框架_(Vue.js)带有星期日期的数字时钟
- JS框架_(JQuery.js)带阴影贴纸标签按钮
- JS - n次方计算
- baguetteBox.js响应式画廊插件(纯JS)
- baguetteBox.js响应式画廊插件(纯JS)
- vue.js语法
- [JS Compose] 1. Refactor imperative code to a single composed expression using Box
- 让Visual Studio 也支持JS代码折叠 —— 续 [ Visual Studio | Js | ScriptOutline | SmallOutline ]
- nano-sql.js的基本操作
- 一道奇怪的JS面试题(一)
- Atitit 常用技能点体系树 os win linux android 前后端 gui h5 vue js jquery bootstrap cocos2d Jafavx wpf
- Atitit 调用另外语言的功能 目录 1. Waht 常见的语言java python js sql xml h5 c# php等之间的互相调用1 2. 为什么需要互相调用why1 3. 常
- Atitit 研发体系 codelib 代码库的建设 目录 1. 概念与组成2 1.1. Java代码2 1.2. Js代码2 1.3. H5 代码 js+css+htm+txt2 1.4.
- Atitit.提升软件Web应用程序 app性能的方法原理 h5 js java c# php python android .net
- Atitit.跨语言反射api 兼容性提升与增强 java c#。Net php js
- 华为OD机试 - 表达式括号匹配(Java & JS & Python)
- 原生js实现随机验证码HTMl-JS
- js非空验证+判断输入框是否输入的全是空格
- 14 【node js 1/7】
- vue-ant design示例大全——按钮本地css/js资源
- js格林威治时间转换成正常时间
- js生成随机颜色
- js 小写金额转大写
- 深入理解node.js异步编程:基础篇
- JS:crypto-js实现AES加密解密
- VM1059 bootstrap-table.min.js:7 Uncaught TypeError: Cannot read property 'classes' of undefined
- 【JS高级】js面向对象三大特性之封装—如何创建对象_05
- 【JS高级】js之正则相关函数以及正则对象_02