CN110662116A - 一种基于WebAssembly技术的Web播放器及播放方法 - Google Patents
一种基于WebAssembly技术的Web播放器及播放方法 Download PDFInfo
- Publication number
- CN110662116A CN110662116A CN201910933530.4A CN201910933530A CN110662116A CN 110662116 A CN110662116 A CN 110662116A CN 201910933530 A CN201910933530 A CN 201910933530A CN 110662116 A CN110662116 A CN 110662116A
- Authority
- CN
- China
- Prior art keywords
- audio
- layer
- video
- file
- media stream
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/443—OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/43—Processing of content or additional data, e.g. demultiplexing additional data from a digital video stream; Elementary client operations, e.g. monitoring of home network or synchronising decoder's clock; Client middleware
- H04N21/443—OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB
- H04N21/4431—OS processes, e.g. booting an STB, implementing a Java virtual machine in an STB or power management in an STB characterized by the use of Application Program Interface [API] libraries
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
- H04N21/00—Selective content distribution, e.g. interactive television or video on demand [VOD]
- H04N21/40—Client devices specifically adapted for the reception of or interaction with content, e.g. set-top-box [STB]; Operations thereof
- H04N21/47—End-user applications
- H04N21/478—Supplemental services, e.g. displaying phone caller identification, shopping application
- H04N21/4782—Web browsing, e.g. WebTV
Landscapes
- Engineering & Computer Science (AREA)
- Multimedia (AREA)
- Signal Processing (AREA)
- Software Systems (AREA)
- Library & Information Science (AREA)
- Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)
Abstract
本发明公开一种基于WebAssembly技术的Web播放器及播放方法,其包括UI界面、Js层、WebAssemble层和基础库;所述UI界面:进行播放相关控制;所述Js层:接收来自UI界面的控制指令;从远端服务器下载媒体流文件并传送至WebAssemble层;接收WebAssemble层解码后的音频数据和视频数据并在UI界面进行播放;所述WebAssemble层:将媒体流文件放入未解码队列中;调取未解码队列中的媒体流文件对其解码形成音频文件和视频文件,然后传送给Js层;所述基础库:包括开源库FFMPEGA和系统自带的WebGL和Web Audio API。本发明使用WebAssemble技术,能够在PC和手机端通过不下载原生程序,使用其浏览器(比如微信内嵌的浏览器)进行直播观看和点播观看。
Description
技术领域
本发明属于Web播放器领域,具体涉及一种基于WebAssembly技术的Web播放器及播放方法。
背景技术
随着智能终端和网络的普及,人们日益形成使用智能终端观看视频习惯,经常使用手机观看在线视频或短视频文件。大量视频网站也提供了对应的Web播放器和原生程序提供插件下载,播放视频流通常要要求用户下载对应播放程序或插件,插件通常以OCX 形式存在,只能在IE播放,造成用户体验不足。移动端播放数据延时比较明显。支持的音视频编码有限,无法满足监控行业常用的H264/H265 AAC,G711的算法。提供的分辨率和码率比较小,无法播放较高的清晰度与码率的媒体流。
发明内容
本发明的目的在于提供一种基于WebAssembly技术的Web播放器及播放方法。
为实现上述目的,本发明采用以下技术方案:
一种基于WebAssembly技术的Web播放器,其包括UI界面、Js层、WebAssemble层和基础库;
所述UI界面:进行播放相关控制;
所述Js层:接收来自UI界面的控制指令;从远端服务器下载媒体流文件并传送至WebAssemble层;接收WebAssemble层解码后的音频数据和视频数据并在UI界面进行播放;
所述WebAssemble层:将媒体流文件放入未解码队列中;调取未解码队列中的媒体流文件对其解码形成音频文件和视频文件,然后传送给Js层;
所述基础库:包括开源库FFMPEGA和系统自带的WebGL和Web Audio API。
所述媒体流文件包括WebSocket/flv或Http-flv媒体流文件。
采用本发明Web播放器的播放方法,包括以下步骤:
1)用户访问远端服务器,请求播放视频;
2)Js层从远端服务器下载媒体流文件后传送给WebAssemble层,WebAssemble层将下载的媒体流文件数据无拷贝放入未解码队列中;
3)WebAssemble层中的解码模块中未解码队列中调取出媒体流文件,根据媒体流文件的编码格式,读取相应的媒体信息,然后调用对应的解码库进行解码,解码形成PCM的音频文件和YUV的视频文件,最后将解码形成的音频文件和视频文件放入音视频播放队列中;
4)Js从音视频播放队列中调取音频文件和视频文件并在UI界面进行播放。
进一步的,步骤4)中,所述Js层从音视频播放队列中调取出音频文件和视频文件后,需要进行音视频同步,以音频为参考,落后音频的时间戳的视频数据则丢弃,其中Js层调用WebGL加快渲染视频文件,调用Web Audio API来播放音频文件。
本发明采用以上技术,具有以下有益效果:
1、可作为flash与ocx技术的替代方案。随着flash的淘汰进程(adobe宣布2020年之后不提供支持),ocx也因为浏览器限制(限制ie)以及安全性的原因,也慢慢的被放弃。
2、使用WebAssemble技术,能够在PC 和手机端通过不下载原生程序,使用其浏览器(比如微信内嵌的浏览器)进行直播观看和点播观看。PC 端可以使用IE,Edge ,谷歌和火狐浏览器。
3、WebAssemble技术的二进制字节特点达到在高端的手机上比如华为970麒麟以上的型号观看720P的高清媒体流,且播放流畅,无明显卡顿的播放目标。
4、其封装的FFEMPGA能够播放监控平台的各类摄像头数据流,并且可以增加编码库来满足更多的视频流格式。可以将更多优秀开源库编译移植。
附图说明
以下结合附图和具体实施方式对本发明做进一步详细说明;
图1为本发明播放器的基本架构。
具体实施方式
如图1所示,本发明一种基于WebAssembly技术的Web播放器,其包括UI界面、Js层、WebAssemble层和基础库;
所述UI界面:进行播放相关控制;
所述Js层:接收来自UI界面的控制指令;从远端服务器下载媒体流文件并传送至WebAssemble层;接收WebAssemble层解码后的音频数据和视频数据并在UI界面进行播放;
所述WebAssemble层:将媒体流文件放入未解码队列中;调取未解码队列中的媒体流文件对其解码形成音频文件和视频文件,然后传送给Js层;
所述基础库:包括开源库FFMPEGA和系统自带的WebGL和Web Audio API。
所述媒体流文件包括WebSocket/flv或Http-flv媒体流文件。
采用本发明Web播放器的播放方法,包括以下步骤:
1)用户访问远端服务器,请求播放视频;
2)Js层从远端服务器下载媒体流文件后传送给WebAssemble层,WebAssemble层将下载的媒体流文件数据无拷贝放入未解码队列中;
3)WebAssemble层中的解码模块中未解码队列中调取出媒体流文件,根据媒体流文件的编码格式,读取相应的媒体信息,然后调用对应的解码库进行解码,解码形成PCM的音频文件和YUV的视频文件,最后将解码形成的音频文件和视频文件放入音视频播放队列中;。
4)Js从音视频播放队列中调取音频文件和视频文件并在UI界面进行播放。其中,Js层从音视频播放队列中调取出音频文件和视频文件后,需要进行音视频同步,以音频为参考,落后音频的时间戳的视频数据则丢弃,其中Js层调用WebGL加快渲染视频文件,调用Web Audio API来播放音频文件。
Claims (4)
1.一种基于WebAssembly技术的Web播放器,其特征在于:其包括UI界面、Js层、WebAssemble层和基础库;
所述UI界面:进行播放相关控制;
所述Js层:接收来自UI界面的控制指令;从远端服务器下载媒体流文件并传送至WebAssemble层;接收WebAssemble层解码后的音频数据和视频数据并在UI界面进行播放;
所述WebAssemble层:将媒体流文件放入未解码队列中;调取未解码队列中的媒体流文件对其解码形成音频文件和视频文件,然后传送给Js层;
所述基础库:包括开源库FFMPEGA和系统自带的WebGL和Web Audio API。
2.根据权利要求1所述的一种基于WebAssembly技术的Web播放器,其特征在于:所述媒体流文件包括WebSocket/flv或Http-flv媒体流文件。
3.采用权利要求1或2所述的Web播放器的播放方法,其特征在于:包括以下步骤:
1)用户访问远端服务器,请求播放视频;
2)Js层从远端服务器下载媒体流文件后传送给WebAssemble层,WebAssemble层将下载的媒体流文件数据无拷贝放入未解码队列中;
3)WebAssemble层中的解码模块中未解码队列中调取出媒体流文件,根据媒体流文件的编码格式,读取相应的媒体信息,然后调用对应的解码库进行解码,解码形成PCM的音频文件和YUV的视频文件,最后将解码形成的音频文件和视频文件放入音视频播放队列中;
4)Js从音视频播放队列中调取音频文件和视频文件并在UI界面进行播放。
4.根据权利要求3所述的播放方法,其特征在于:步骤4)中,所述Js层从音视频播放队列中调取出音频文件和视频文件后,需要进行音视频同步,以音频为参考,落后音频的时间戳的视频数据则丢弃,其中Js层调用WebGL加快渲染视频文件,调用Web Audio API来播放音频文件。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910933530.4A CN110662116A (zh) | 2019-09-29 | 2019-09-29 | 一种基于WebAssembly技术的Web播放器及播放方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910933530.4A CN110662116A (zh) | 2019-09-29 | 2019-09-29 | 一种基于WebAssembly技术的Web播放器及播放方法 |
Publications (1)
Publication Number | Publication Date |
---|---|
CN110662116A true CN110662116A (zh) | 2020-01-07 |
Family
ID=69039822
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201910933530.4A Pending CN110662116A (zh) | 2019-09-29 | 2019-09-29 | 一种基于WebAssembly技术的Web播放器及播放方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN110662116A (zh) |
Cited By (6)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111355976A (zh) * | 2020-03-31 | 2020-06-30 | 北京东方国信科技股份有限公司 | 一种基于hevc标准的视频直播方法及系统 |
CN111737621A (zh) * | 2020-06-17 | 2020-10-02 | 友虹(北京)科技有限公司 | 基于wasm的ofd渲染方法、系统及装置 |
CN112261377A (zh) * | 2020-10-23 | 2021-01-22 | 青岛以萨数据技术有限公司 | web版监控视频播放方法、电子设备及存储介质 |
CN112423117A (zh) * | 2020-06-11 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | Web端视频播放方法、装置及计算机设备 |
CN114598920A (zh) * | 2022-03-04 | 2022-06-07 | 北京百度网讯科技有限公司 | 一种视频播放控制方法、装置、设备以及存储介质 |
CN115243102A (zh) * | 2022-09-21 | 2022-10-25 | 天讯瑞达通信技术有限公司 | 基于Web技术的视频播放方法、装置、设备以及存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20170346804A1 (en) * | 2015-06-02 | 2017-11-30 | ALTR Solutions, Inc. | Credential-free user login to remotely executed applications |
CN108563517A (zh) * | 2018-03-30 | 2018-09-21 | 腾讯科技(深圳)有限公司 | 系统接口的调用方法及装置 |
CN108614960A (zh) * | 2018-05-11 | 2018-10-02 | 西北大学 | 一种基于前端字节码技术的JavaScript虚拟化保护方法 |
CN110198479A (zh) * | 2019-05-24 | 2019-09-03 | 浪潮软件集团有限公司 | 一种基于webassembly的浏览器音视频解码播放方法 |
-
2019
- 2019-09-29 CN CN201910933530.4A patent/CN110662116A/zh active Pending
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20170346804A1 (en) * | 2015-06-02 | 2017-11-30 | ALTR Solutions, Inc. | Credential-free user login to remotely executed applications |
CN108563517A (zh) * | 2018-03-30 | 2018-09-21 | 腾讯科技(深圳)有限公司 | 系统接口的调用方法及装置 |
CN108614960A (zh) * | 2018-05-11 | 2018-10-02 | 西北大学 | 一种基于前端字节码技术的JavaScript虚拟化保护方法 |
CN110198479A (zh) * | 2019-05-24 | 2019-09-03 | 浪潮软件集团有限公司 | 一种基于webassembly的浏览器音视频解码播放方法 |
Non-Patent Citations (1)
Title |
---|
COLORIY: "基于WebAssembly的H.265播放器研发", 《CSDN》 * |
Cited By (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN111355976A (zh) * | 2020-03-31 | 2020-06-30 | 北京东方国信科技股份有限公司 | 一种基于hevc标准的视频直播方法及系统 |
CN111355976B (zh) * | 2020-03-31 | 2022-10-11 | 北京东方国信科技股份有限公司 | 一种基于hevc标准的视频直播方法及系统 |
CN112423117A (zh) * | 2020-06-11 | 2021-02-26 | 上海哔哩哔哩科技有限公司 | Web端视频播放方法、装置及计算机设备 |
CN111737621A (zh) * | 2020-06-17 | 2020-10-02 | 友虹(北京)科技有限公司 | 基于wasm的ofd渲染方法、系统及装置 |
CN112261377A (zh) * | 2020-10-23 | 2021-01-22 | 青岛以萨数据技术有限公司 | web版监控视频播放方法、电子设备及存储介质 |
CN114598920A (zh) * | 2022-03-04 | 2022-06-07 | 北京百度网讯科技有限公司 | 一种视频播放控制方法、装置、设备以及存储介质 |
CN114598920B (zh) * | 2022-03-04 | 2023-05-23 | 北京百度网讯科技有限公司 | 一种视频播放控制方法、装置、设备以及存储介质 |
CN115243102A (zh) * | 2022-09-21 | 2022-10-25 | 天讯瑞达通信技术有限公司 | 基于Web技术的视频播放方法、装置、设备以及存储介质 |
CN115243102B (zh) * | 2022-09-21 | 2023-02-28 | 天讯瑞达通信技术有限公司 | 基于Web技术的视频播放方法、装置、设备以及存储介质 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110662116A (zh) | 一种基于WebAssembly技术的Web播放器及播放方法 | |
US10645466B2 (en) | Video file universal identifier for metadata resolution | |
US9317188B2 (en) | Devices and methods for providing navigation images associated with adaptive bit rate video content | |
KR102321859B1 (ko) | 자바 스크립트를 이용한 실시간 미디어 스트리밍 방법 및 그 장치 | |
CN105814900B (zh) | 用于在自适应流播环境中管理相邻频道的系统和方法 | |
CN107634930B (zh) | 一种媒体数据的获取方法和装置 | |
WO2020200302A1 (zh) | 直播方法、装置、计算机设备与存储介质 | |
EP3361738A1 (en) | Method and device for stitching multimedia files | |
CN107517411B (zh) | 一种基于GStreamer框架的视频播放方法 | |
US9560389B2 (en) | Network-based content storage | |
US20150358507A1 (en) | Timing recovery for embedded metadata | |
US10708336B2 (en) | System and method for announcing media changes | |
CN107333163A (zh) | 一种视频处理方法及装置、一种终端及存储介质 | |
CN101848367B (zh) | 基于文件的动态影像网络直播方法 | |
CN106385525A (zh) | 一种视频播放方法及装置 | |
CN108989855A (zh) | 一种广告插播方法、装置、设备及介质 | |
JP2024048339A (ja) | サーバ、端末及びコンピュータプログラム | |
CN116261008B (zh) | 音频处理方法和音频处理装置 | |
CN102088624A (zh) | 一种电视信号处理方法、移动终端及系统 | |
US20190215546A1 (en) | Real-Time Incorporation of User-Generated Content into Third-Party Content Streams | |
CN115278307A (zh) | 一种视频播放方法、装置、设备和介质 | |
US20220201342A1 (en) | Methods and systems for providing a user with an image content | |
CN113992956A (zh) | 一种网络音视频快速切换的方法 | |
CN112437316A (zh) | 即时消息与直播视频流同步播放的方法、装置 | |
CN102098572A (zh) | 基于flash的自定义流媒体嵌入与播放系统及其实现方法 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
RJ01 | Rejection of invention patent application after publication |
Application publication date: 20200107 |
|
RJ01 | Rejection of invention patent application after publication |