CN110662116A - 一种基于WebAssembly技术的Web播放器及播放方法 - Google Patents

一种基于WebAssembly技术的Web播放器及播放方法 Download PDF

Info

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
Application number
CN201910933530.4A
Other languages
English (en)
Inventor
聂明胜
王雨铭
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
China Electric Fufu Mdt Infotech Ltd
Original Assignee
China Electric Fufu Mdt Infotech Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by China Electric Fufu Mdt Infotech Ltd filed Critical China Electric Fufu Mdt Infotech Ltd
Priority to CN201910933530.4A priority Critical patent/CN110662116A/zh
Publication of CN110662116A publication Critical patent/CN110662116A/zh
Pending legal-status Critical Current

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

Abstract

本发明公开一种基于WebAssembly技术的Web播放器及播放方法，其包括UI界面、Js层、WebAssemble层和基础库；所述UI界面：进行播放相关控制；所述Js层：接收来自UI界面的控制指令；从远端服务器下载媒体流文件并传送至WebAssemble层；接收WebAssemble层解码后的音频数据和视频数据并在UI界面进行播放；所述WebAssemble层：将媒体流文件放入未解码队列中；调取未解码队列中的媒体流文件对其解码形成音频文件和视频文件，然后传送给Js层；所述基础库：包括开源库FFMPEGA和系统自带的WebGL和Web Audio API。本发明使用WebAssemble技术，能够在PC和手机端通过不下载原生程序，使用其浏览器（比如微信内嵌的浏览器）进行直播观看和点播观看。

Description

一种基于WebAssembly技术的Web播放器及播放方法
技术领域
本发明属于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来播放音频文件。
CN201910933530.4A 2019-09-29 2019-09-29 一种基于WebAssembly技术的Web播放器及播放方法 Pending CN110662116A (zh)

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)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
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的浏览器音视频解码播放方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
Title
COLORIY: "基于WebAssembly的H.265播放器研发", 《CSDN》 *

Cited By (9)

* Cited by examiner, † Cited by third party
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
KR102321859B1 (ko) 자바 스크립트를 이용한 실시간 미디어 스트리밍 방법 및 그 장치
CN105814900B (zh) 用于在自适应流播环境中管理相邻频道的系统和方法
US20170111414A1 (en) Video playing method and device
CN107634930B (zh) 一种媒体数据的获取方法和装置
CN107517411B (zh) 一种基于GStreamer框架的视频播放方法
US20150358507A1 (en) Timing recovery for embedded metadata
CN101848367B (zh) 基于文件的动态影像网络直播方法
US9560389B2 (en) Network-based content storage
CN108600785B (zh) 视频串流中子程序的同步方法及计算机可读存储介质
CN106385525A (zh) 一种视频播放方法及装置
US20240107087A1 (en) Server, terminal and non-transitory computer-readable medium
CN101527153B (zh) 使异步的传递文本和音视频数据在移动终端同步显示的方法
US10708336B2 (en) System and method for announcing media changes
CN102088624A (zh) 一种电视信号处理方法、移动终端及系统
US20190215546A1 (en) Real-Time Incorporation of User-Generated Content into Third-Party Content Streams
CN115278307A (zh) 一种视频播放方法、装置、设备和介质
US11792442B2 (en) Methods and systems for providing a user with an image content
CN103501457A (zh) 一种节目播放的方法及设备
CN113992956A (zh) 一种网络音视频快速切换的方法
CN112437316A (zh) 即时消息与直播视频流同步播放的方法、装置
CN102098572A (zh) 基于flash的自定义流媒体嵌入与播放系统及其实现方法
RU2690163C2 (ru) Устройство обработки информации и способ обработки информации
CN107005745B (zh) 封装视听内容流的方法和设备

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