首页 > 其他分享 >如何实现在web浏览器播放H.265编码视频?网页全终端安防视频流媒体播放器

如何实现在web浏览器播放H.265编码视频?网页全终端安防视频流媒体播放器

时间:2023-07-26 13:00:42浏览次数:39  
标签:web H.265 浏览器 媒体播放器 视频 H265 插件 支持 播放

目前安防监控行业,基本所有的摄像头都支持H264编码,但是已经有部分摄像头开始支持H265,并且支持H265的摄像机已经越来越多。H265相比H264有着很多优势,压缩更高,网络传输消耗的带宽更小,相同码率下H265视频更清晰。H264目前已经可以在各种web浏览器、客户端等进行解码播放,但是目前H.265编码在浏览器中的硬件解码支持情况并不普及。


长久以来,安防领域的网络摄像机(IPC)的WEB视频直播都依赖于浏览器插件,IE浏览器使用ActiveX插件,Chrome和Firefox浏览器使用NPAPI插件。之所以开发浏览器插件来收流、解码、播放IPC的实时视频,是因为早期HTML的发展过于缓慢,在纯web代码无法实现的情况下开发者只能使用插件来辅助。现在Edge、Chrome、Safari、Firefox等浏览器已经不支持NPAPI插件,只剩下IE浏览器还在支持ActiveX插件,导致IPC的web页面只能在IE内核的浏览器播放实时视频。所以实现web无插件实时播放IPC的H264/H265视频十分重要。


安防直播是目前最流行的一种信息传播和社交方式,区别于录制的点播视频,它要求播放器可以实时的获取并播放流式视频数据。为了实现直播播放,播放器内核需要借助一些HTML5的技术。


视频播放器架构:

如何实现在web浏览器播放H.265编码视频?网页全终端安防视频流媒体播放器_音视频

播放器内核主要模块与依赖的背景技术:

如何实现在web浏览器播放H.265编码视频?网页全终端安防视频流媒体播放器_h265_02

高像素数量导致需要更复杂的编解码器来最小化带宽需求。持续连接PC或TV,平滑处理4K信号的最小码流是20Mbit/s,例如Netflix要求用户的互联网连接至少提供持续的25Mbit/s带宽量。20到25Mbit/s代表带宽的巨大改善,原生的、非压缩的4K视频需要在60Mbit/s的带宽上才会有好的表现。对于大多数的行业应用来说,H265就是解决这一问题的答案。


为了解决IPC播放H265视频的难题,我们经历了不断的调整和测试,最终将H256视频兼容到liveweb的视频播放当中。


我们将摄像头、硬盘录像机或其他视频平台通过RTMP、RTSP等协议接入到自己的流媒体平台,当请求播放视频时设备端将视频数据以PS流的形式发送到livewebDSS,livewebDSS接收到PS流后Demux出视频数据,得到裸的H265以及音频数据。最终livewebDSS将H265和音频数据封装成多种互联网直播的通用流格式RTMP、HTTP-FLV、HLS、RTSP格式,分发给livewebPlayer.JS。这样就实现了livewebPlayer.JS的H265视频播放。


livewebPlayer.JS中H265视频播放效果

如何实现在web浏览器播放H.265编码视频?网页全终端安防视频流媒体播放器_视频播放_03

如何实现在web浏览器播放H.265编码视频?网页全终端安防视频流媒体播放器_音视频_04

livewebPlayer.JS支持四分屏操作,可同时播放4路,16路视频流,输出格式为FLV;同时也支持单路视频流大屏播放。livewebPlayer.js网页直播/点播播放器集 rtmp,hls,flv,websocket于一身,使用简单,功能强大,也为开发者提供二次集成的路径参考。不论是测试还是被集成,都能够很方便的为使用者提供服务。


更多关于liveweb

liveweb是一款流媒体播放器系列项目, 支持RTSP、RTMP、HTTP、HLS、UDP、RTP、File等多种流媒体协议播放、 支持本地文件播放,支持本地抓拍、本地录像、播放旋转、多屏播放、 倍数播放等多种功能特性,核心基于ffmpeg,稳定、高效、可靠、可控。 随着多年不断的发展和迭代,不断基于成功的实践经验,支持Windows、 Android、iOS、Linux平台。


标签:web,H.265,浏览器,媒体播放器,视频,H265,插件,支持,播放
From: https://blog.51cto.com/u_16159766/6855381

相关文章

  • WebApi-寄宿方式注意事项
    所谓的寄宿方式,就是把服务从原来的容器(iis、appache)中提取出来通过宿主程序来控制其启动,这样的好处就是避免了对服务器(容器)的依赖,实现灵活控制,但在实际开发中尤其是新手容易忽略的地方,这里做个简单的示例,记录一下便于以后自查。首先建立一个公共各类库Common,用于存放实体类。编......
  • nginx配置websokcet
    server{listen80;server_nameexample.com;location/{proxy_passhttp://your_upstream_server;proxy_http_version1.1;proxy_set_headerUpgrade$http_upgrade;proxy_set_headerConnection"Upgrade";......
  • 我开源了团队内部基于SpringBoot Web快速开发的API脚手架v1.6.0更新
    什么是rest-api-spring-boot-starterrest-api-spring-boot-starter适用于SpringBootWebAPI快速构建让开发人员快速构建统一规范的业务RestFullAPI不在去关心一些繁琐。重复工作,而是把重点聚焦到业务。动机每次WebAPI常用功能都需要重新写一遍。或者复制之前的项目代码......
  • WEB漏洞—逻辑越权之登录脆弱及逻辑篡改
    由于这里涉及的所有靶场都无法安装或调试失败。。所以没法做分析,记录了一些课堂上的笔记,大部分是关于修改商品信息之类的,思路理解,但实战基本不行 #登录应用功能点安全问题检测功能点,检测,危害,修复方案等1.登录点暴力破解2.HTTP/HTTPS传输3.Cookie脆弱点验证4.Session固定点......
  • javaweb项目搭建及Servlet用法
    一.Javaweb1.常见软件系统体系结构1.C/S架构C/S结构即客户端/服务器(Client/Server),例如QQ;需要编写服务器端程序,以及客户端程序,例如我们安装的就是QQ的客户端程序;缺点:软件更新时需要同时更新客户端和服务器端两端,比较麻烦;优点:安全性比较好。2.B/S架构B/S结构即浏览器/服......
  • WebGL初接触
    有感于在不少jd中看到关于WebGL的内容,想起来之前在高程中还没看完的canvas,就匆匆把剩余的一点看完了,高程中的内容还是皮毛,就属于很基础的、概念性的东西。WebGL画布的3D上下文。不是W3C制定的标准,而是KhronosGroup的标准。作为浏览器中WebGL基础的OpenGLES2.0,要使用WebGL最好......
  • web前端tips:js继承——原型链继承
    原型链继承原型链继承是JavaScript中实现继承的一种方式,它通过使用原型来实现对象之间的继承关系。在JavaScript中,每个对象都有一个原型(prototype),它是一个指向另一个对象的引用。当我们访问一个对象的属性时,如果该对象自身没有该属性,则会去它的原型上查找,如果原型上也没有,则......
  • 浏览器web原生播放 rtmp,rtsp(h264, h265),flv, hls 的解决方案
    一、liveweb简述liveweb是一款超低延时(150-200毫秒)、秒启动、无插件web实时视频播放器,h5视频播放器,支持egde、firefox、Chrome、safari等常见浏览器。支持h264、h265、AAC、G711等常见音视频格式。支持协议:RTSP、RTMP、HLS、HTTP-FLV、WebSocket-FLV、GB28181、HTTP-TS、WebSocke......
  • Web 3.0 会是互联网的下一个时代吗?
    2000年初,只读互联网Web1.0被Web2.0所取代。在Web2.0时代,用户摆脱了只读的困扰,可以在平台上进行互动并创作内容。而Web3.0的到来,除了加密货币和区块链等相关名词让大家耳熟能详外,并没有让广大互联网用户真正意义上地感知到。那么到底什么是Web3.0呢?什么是Web3.0......
  • 记录使用HPSocket.NET包开发WebSocket通讯,报错Could not decode a text frame as UTF-
    因工作需要开发Scada系统,使用到WebSocket通讯,网页客户端接收数据时发生CouldnotdecodeatextframeasUTF-8报错 通过网络检索,有多种说法,验证如下1、文本针和二进制针的数据发送方式都测试失败1stringkson=JsonConvert.Serialize......