背景需求:

EasyNVR自身拥有独立的客户端体系,安卓和IOS拥有各自独立的APP,

安卓下载地址:https://fir.im/EasyNVR

IOS下载可直接在APPstore搜索EasyNVR即可;

对于应用最为广泛的web端,直接包含在EasyNVR软件包的www目录下;

对于EasyNVR的web端,使用的是vue+webpack进行打包压缩的,不仅项目体积小,而且很友好的提升了浏览器的可读性;

对于实际的应用过程中,EasyNVR自身的web页面也是拥有自身的风格,因此和许多需要将视频播放页面集成到自身系统的用户就不是很友好了。EasyNVR自身的播放页面也是包含了,云台控制、视频分享、扫码直播等功能,然而部分客户需要的仅仅只是一个播放页面的集成。

这样,即使是简约的风格,也在用户的集成中带来了一定的麻烦。

解决方案:

有过阅读EasyNVR软件包使用文档的用户应该知道了这个解决方案;其实在这个播放页面已经给出了答案;

就是通过iframe集成,在集成的过程中,通过对于参数的传递来 ,去除自身不需要的元素,最终集成到自身的页面的就是一个单纯的视频播放器画面;而且我们还可以通过传递参数来 设置播放器的长宽比和是否将视频直播铺满全屏直播;

具体传递参数

iframe:是否以iframe形式嵌入,支持传递参数yes、no;

autoplay:是否开启自动直播,支持传递参数yes、no;

stretch:是否开启自动直播,支持传递参数yes、no;

aspect:播放器的比例,传递形式x:y,默认16:9

例: ip:port/play.html?channel=id&iframe=yes&aspect=4:3&autoplay=yes&stretch=yes

代码实例及样式展示:

测试集成播放页样式:

原始样式:

简单的集成应用:

<html>
<head>
<title>播放页集成测试用</title>
</head>
<body>
<div>
<iframe src="http://192.168.1.202:10800/play.html?channel=1&iframe=yes&aspect=640x360" width="640" height="360" allowfullscreen></iframe>
</div>
</body>
</html>

关于EasyNVR

EasyNVR能够通过简单的网络摄像机通道配置,将传统监控行业里面的高清网络摄像机IP Camera、NVR等具有RTSP协议输出的设备接入到EasyNVR,EasyNVR能够将这些视频源的音视频数据进行拉取,转换为RTMP/HLS,进行全平台终端H5直播(Web、Android、iOS),并且EasyNVR能够将视频源的直播数据对接到第三方CDN网络,实现互联网级别的直播分发;

详细说明:http://www.easynvr.com

点击链接加入群【EasyNVR解决方案】:383501345

Copyright © EasyNVR Team 2016-2018

EasyNVR无插件直播服务器播放页面的集成----单独的播放器样式的更多相关文章

  1. EasyNVR无插件直播服务器软件接口调用返回“Unauthorized”最简单的处理方式

    背景需求 对于EasyNVR的受众群体十分的广泛,不仅仅有将EasyNVR作为视频直播平台直接使用的,更多的是使用EasyNVR的对应功能集成到自身系统.对于前者,只需要将软件的使用功能搞清楚即可,对 ...

  2. EasyNVR无插件直播服务器软件览器低延时播放监控摄像头视频(EasyNVR播放FLV视频流)

    背景描述 EasyNVR的使用者应该都是清楚的了解到,EasyNVR一个强大的功能就是可以进行全平台的无插件直播.主要原因在于rtsp协议的视频流(默认是需要插件才可以播放的)经由EasyNVR处理可 ...

  3. EasyNVR无插件直播服务器软件使用详情功能 - 录像功能说明

    背景介绍 EasyNVR不仅仅拥有无插件的直播功能,更拥有对于直播录像的存储和日期检索功能: 本篇博文主要用于介绍EasyNVR的录像功能. 之前有博文介绍相关的录像功能,本篇主要为了介绍录像的新功能 ...

  4. EasyNVR无插件直播服务器软件使用详情功能-通道配置Excel

    背景需求 使用EasyNVR的用户都有知道,由于EasyNVR是将设备与EasyNVR的通道进行绑定的,因此EasyNVR是通过手动的通道配置来进行设备接入的,这样可以做到将设备的和通道对应的接入.但 ...

  5. EasyNVR无插件直播服务器软件如何自己更改web界面(网页的自定修改)

    背景需求 很多用户都在使用了EasyNVR,看到EasyNVR自身带有的界面后有这样的需求,就是需要更改一下web前端的一些样式,当前EasyhNVR为3.0版本,web前端为了增加前端的运行效率和减 ...

  6. EasyNVR无插件直播服务器如何使用ffmpeg实现摄像机快照功能的

    EasyNVR提供快照预览功能,并且提供向EasyDSS云平台上传快照的功能 EasyNVR会定时向配置的摄像机抓取快照数据,保存图片用于预览,并且用于快照上传 原理 将从摄像机取出来的I帧数据编码成 ...

  7. 使用EasyNVR无插件流媒体服务器接口和EasyPlayer.js播放器插件实现web网页H5播放无插件

    1.背景需求 很多客户在使用EasyNVR无插件流媒体服务器时,不喜欢产品化的界面,有时可能满足不了日常观看使用的需求.因此软件提供丰富的HTTP接口,供第三方平台调用集成.但是有时客户这边可能没有专 ...

  8. EasyNVR无插件直播流媒体服务器云端集中管控的EasyNVS云管理平台安装使用文档

    EasyNVS - EasyNVR云端集中管理服务 EasyNVS云管理平台是一套专门用于集中化管理EasyNVR 的解决方案. EasyNVR 采用主动注册的方式接入到 EasyNVS, 再由 Ea ...

  9. EasyNVR无插件直播服务如何配合EasyBMS使用以及实现流媒体管理功能概述

    本文转自:https://blog.csdn.net/black_3717/article/details/79769195 功能概要: 1.摄像机的无插件直播: 2.摄像机的低延时直播: 3.摄像机 ...

随机推荐

  1. 通过JBoss反序列化(CVE-2017-12149)浅谈Java反序列化漏洞

    前段时间学校学习J2EE,用到了jboss,顺便看了下jboss的反序列化,再浅谈下反序列化漏洞. Java序列化,简而言之就是把java对象转化为字节序列的过程.而反序列话则是再把字节序列恢复为ja ...

  2. SWIG 多语言接口变换 【转】

    一.             SWIG 是Simple Wrapper and Interface Generator的缩写,是一个帮助使用C或者C++编写的软件创建其他编语言的API的工具.例如,我 ...

  3. log4j教程 2、安装

    Log4j的API包使用Apache软件许可证,由开源倡议认证一个完全成熟的开源许可证下发布. 最新log4j的版本,包括完整的源代码,类文件和文档可以在这里找到 http://logging.apa ...

  4. jstat命令的使用及VM Thread分析

    http://www.javatang.com/archives/2017/10/20/12131956.html 前面提到了一个使用jstack的shell脚本,通过命令可以很快地定位到指定线程对应 ...

  5. 【共享单车】—— React后台管理系统开发手记:AntD Table高级表格

    前言:以下内容基于React全家桶+AntD实战课程的学习实践过程记录.最终成果github地址:https://github.com/66Web/react-antd-manager,欢迎star. ...

  6. 固态硬盘(Solid State Drives)

    固态硬盘(Solid State Drives) 学习了:https://baike.baidu.com/item/%E5%9B%BA%E6%80%81%E7%A1%AC%E7%9B%98/45351 ...

  7. sql取随机结果集

    应用场景: 某日,接产品姐姐需求,网站搜索页在搜索特定的内容时候,会现实搜索不到结果!如衣服网站,搜索鞋子等.为了不直接呈现一个赤裸裸的无此商品页面,so,需要在搜索商品件数小于3时,在下面随机推荐本 ...

  8. [Tools] Support VS Code Navigation and Autocomplete Based on Webpack Aliases with jsconfig.json

    It's common to setup Webpack aliases to make imports much more convenient, but then you lose the abi ...

  9. Android中IntentService详解

    简单说,IntentService是继承于Service并处理异步请求的一个类,在IntentService内有一个工作线程来处理耗时操作,启动IntentService的方式和启动传统Service ...

  10. C++ 设置控制台输出颜色

    #include <stdint.h> #include <iostream> #include <string> #include <Windows.h&g ...