EasyNVR摄像机无插件直播流媒体服务器前端构建之输入框样式的调整

2024-04-08 21:24:49

EasyNVR授权方式分为软件的授权和硬件授权两种方式，软件授权需要在软件输入永久邀请码可以激化永久授权

起初我们的界面设计是为了满足功能的需求就是，用户可以输入激活码提交，完成永久授权。
在实际的应用过程中我们发现由于输入框自身大小的原因，我们的机器码有事无法完全展示给用户，不方便用户的自我检查激活码是否准确。因此我们考虑使用可以方便拉伸改变大小的输入框。

实施流程及遇到问题

对于可以自定义改变打的大小的输入框样式，第一个想到的是,

然而悲剧的是斌没有很好的兼容性，可以很好的在chrome、Firefox浏览器完成自定义输入框的大小拉伸，在IE浏览器下就无法完成自定大小的拉伸了

为了解决这个问题，互联网再次给我帮助，

通过插件 Resizable | jQuery UI

完美是的实现了自定义拉伸，使用鼠标改变元素的尺寸

具体使用步骤

引入 jQuery UI

<script src="./adminlte-2.3.6/plugins/jquery-ui-1.12.1.custom/jquery-ui.js"></script>

给指点的元素添加id方便使用插件

 <td><textarea placeholder="输入申请到的激活码" id="activationCode" ></textarea></br><button id="check">提交</button></span></td>

在js中实现该方法

  // 调用jquery-ui来完成自定义控制输入框大小，默认300X50$("#activationCode").resizable({ });

实现效果展示：

IN Chrome

IN IE

关于EasyNVR

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

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

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

转载于:https://www.cnblogs.com/babosa/p/10459810.html

EasyNVR摄像机无插件直播流媒体服务器前端构建之输入框样式的调整相关推荐

基于EasyDarwin开源流媒体服务器框架实现EasyNVR H5无插件直播流媒体服务器方案
背景分析在之前的一篇博客<web无插件播放RTSP摄像机方案,拒绝插件,拥抱H5!>中,描述了实现一套H5无插件直播方案的各个组件的参考建议,又在博客<EasyNVR H5流媒体服 ...
基于EasyNVR网络摄像机无插件直播流媒体服务器实现文字滤镜处理功能
背景分析 EasyNVR整套方案的架构中,涉及到前端设备(摄像机IPC.硬盘录像机NVR.编码器等).流媒体服务端(EasyNVR).客户端终端设备(PC.浏览器.Android.iOS.微信). 在 ...
流媒体服务器+终端(android,ios,web),如何从海康平台上拉流接入RTSP安防网络摄像头/海康大华硬盘录像机网页无插件直播流媒体服务器EasyNVR？...
背景需求随着雪亮工程.明厨亮灶.手机看店.智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网.微信直播,我们知道摄像头直播的春天了.将安防摄像头或NVR上的视频流转成互联网直播常用的RTMP.HT ...
EasyNVR无插件直播流媒体服务器云端集中管控的EasyNVS云管理平台安装使用文档
EasyNVS - EasyNVR云端集中管理服务 EasyNVS云管理平台是一套专门用于集中化管理EasyNVR 的解决方案. EasyNVR 采用主动注册的方式接入到 EasyNVS, 再由 Ea ...
EasyNVR摄像机网页无插件直播方案H5前端构建之：bootstrap弹窗功能的实现方案与代码
前言介绍在web前端的网页设计中,为了展示出简洁的网页风格和美观的效果,往往会使用弹窗效果在EasyNVR前端页面录像检索功能时,必然会播放录像,如果单独为播放录像文件排一个界面,用户在使用上会更加 ...
EasyNVR摄像机网页无插件直播方案H5前端构建之：使用BootstrapPagination以分页形式展示数据信息...
背景介绍 EasyNVR核心在于摄像机的音视频流的获取.转换.转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器.Android.iOS.微信)进行录像文件的检索.回放和下载. ...
RTSP安防网络摄像头/海康大华硬盘录像机网页无插件直播流媒体服务器EasyNVR证书配置页面按钮无法正常打开和关闭的问题解析
进入移动互联网时代以来,企业微信公众号已成为除官网以外非常重要的宣传渠道,当3.2亿直播用户与9亿微信用户的势能累加,在微信上开启直播已成为越来越多企业的必然选择. 安防视频流媒体服务器EasyNVR ...
EasyNVR摄像机网页无插件直播方案H5前端构建之：使用BootstrapPagination以分页形式展示数据信息
背景介绍 EasyNVR核心在于摄像机的音视频流的获取.转换.转码与高性能分发,同时同步完成对实时直播流的录像存储,在客户端(PC浏览器.Android.iOS.微信)进行录像文件的检索.回放和下载. ...
EasyNVR摄像机网页无插件直播方案H5前端构建之：关于接口调用常见的一些问题（401 Unauthorized）...
背景分析最近在使用EasyNVR的过程中,很多小伙伴咨询关于接口调用的问题,初步判断应该是遇到权限问题(401 Unauthorized).EasyNVR为第三方系统和应用提供了标准的API接口,方 ...
互联网无插件直播流媒体服务器方案EasyNVR下载新的软件执行程序，出现“invalid license”字样是什么意思？
RTSP协议的视频流(默认是需要插件才可以播放的)经由EasyNVR处理后可以满足无插件的全平台直播.处理后会获取到RTMP.HLS视频流,这解决了插件直播的问题,只要终端设备支持H5,就可以播放Ea ...

最新文章

热门文章