CN108718416A - Html5直播嵌入式摄像机音视频系统及其方法 - Google Patents

Html5直播嵌入式摄像机音视频系统及其方法 Download PDF

Info

Publication number
CN108718416A
CN108718416A CN201810618286.8A CN201810618286A CN108718416A CN 108718416 A CN108718416 A CN 108718416A CN 201810618286 A CN201810618286 A CN 201810618286A CN 108718416 A CN108718416 A CN 108718416A
Authority
CN
China
Prior art keywords
video
audio
module
embedded
web page
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
CN201810618286.8A
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.)
Shenzhen Anjiaweishi Information Technology Co Ltd
Original Assignee
Shenzhen Anjiaweishi Information Technology Co 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 Shenzhen Anjiaweishi Information Technology Co Ltd filed Critical Shenzhen Anjiaweishi Information Technology Co Ltd
Priority to CN201810618286.8A priority Critical patent/CN108718416A/zh
Publication of CN108718416A publication Critical patent/CN108718416A/zh
Pending legal-status Critical Current

Links

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/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/21—Server components or server architectures
    • H04N21/218—Source of audio or video content, e.g. local disk arrays
    • H04N21/2187—Live feed
    • 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/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/23—Processing of content or additional data; Elementary server operations; Server middleware
    • H04N21/231—Content storage operation, e.g. caching movies for short term storage, replicating data over plural servers, prioritizing data for deletion
    • 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/20—Servers specifically adapted for the distribution of content, e.g. VOD servers; Operations thereof
    • H04N21/25—Management operations performed by the server for facilitating the content distribution or administrating data related to end-users or client devices, e.g. end-user or client device authentication, learning user preferences for recommending movies
    • H04N21/262—Content or additional data distribution scheduling, e.g. sending additional data at off-peak times, updating software modules, calculating the carousel transmission frequency, delaying a video stream transmission, generating play-lists
    • H04N21/26291—Content or additional data distribution scheduling, e.g. sending additional data at off-peak times, updating software modules, calculating the carousel transmission frequency, delaying a video stream transmission, generating play-lists for providing content or additional data updates, e.g. updating software modules, stored at the client
    • 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/44—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs
    • H04N21/4402—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream or rendering scenes according to encoded video stream scene graphs involving reformatting operations of video signals for household redistribution, storage or real-time display
    • 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/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/85—Assembly of content; Generation of multimedia applications
    • H04N21/854—Content authoring
    • H04N21/85406—Content authoring involving a specific file format, e.g. MP4 format
    • 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/80—Generation or processing of content or additional data by content creator independently of the distribution process; Content per se
    • H04N21/85—Assembly of content; Generation of multimedia applications
    • H04N21/854—Content authoring
    • H04N21/8543—Content authoring using a description language, e.g. Multimedia and Hypermedia information coding Expert Group [MHEG], eXtensible Markup Language [XML]

Landscapes

  • Engineering & Computer Science (AREA)
  • Multimedia (AREA)
  • Signal Processing (AREA)
  • Computer Security & Cryptography (AREA)
  • Databases & Information Systems (AREA)
  • Two-Way Televisions, Distribution Of Moving Picture Or The Like (AREA)

Abstract

本发明公开了一种HTML5直播嵌入式摄像机音视频系统，该系统包括嵌入式摄像机和浏览器，浏览器的WEB页面包括有音视频接收模块、格式转换模块和播放模块；嵌入式摄像机将音视频原始数据发送给音视频接收模块；音视频接收模块将数据传送给格式转换模块；格式转换模块将数据转换为fMP4格式数据，并传递到播放模块；播放模块将fMP4格式数据导入到HTML5 MSE中进行硬解码并播放。相比于现有技术，在本发明当中，该系统实现了兼容不同操作系统、高实时性、高效率、支持大分辨率高清视频的WEB直播方式；兼容PC端和移动设备端不同操作系统的主流浏览器；支持5百万像素画面的超清视频直播；支持以实时流形式播放音视频。

Description

HTML5直播嵌入式摄像机音视频系统及其方法
技术领域
本发明属于嵌入式摄像机WEB直播领域，特别涉及一种HTML5直播嵌入式摄像机音视频系统及其方法。
背景技术
目前已有的WEB直播技术主要是基于浏览器插件直播音视频，或基于HLS协议的HTML5直播技术，也有少数尝试基于javascript前端脚本在浏览器解码直播音视频。但这些方法都存在局限性。基于浏览器插件直播音视频虽然效率较高、较为实时流畅，但需要针对不同操作系统分别开发插件，跨操作系统兼容性差，而且目前很多浏览器考虑到插件存在安全性问题所以开始限制插件，手机等移动设备端的浏览器已不支持插件，未来PC端的浏览器也会更加严格限制插件。基于HLS协议的HTML5直播技术虽然解决了安全性问题，但由于使用ts文件形式直播，延时较大，一般有10秒左右，满足不了高实时要求的直播。基于javascript解码音视频直播方法虽然解决了安全性和实时性问题，但由于javascript运行效率低的限制，解码大分辨率高清视频时性能明显不足。
现有已公布的专利201710441808.7，公开了一种浏览器无插件视频直播方法，包括以下步骤：S01：服务端获取视频编码流；S02：服务端使用Websocket传输视频编码流给Web浏览器端，Web浏览器端使用Websocket接收视频编码流；S03：Web浏览器端使用javascript对视频编码流进行解码；S04：浏览器运用canvas+WebGL进行实时视频图像展示，即视频播放；本发明使Web浏览器无需安装任何插件，使用html5标准即可在浏览器中直播视频，且延迟小，方便扩展便于直播视频的二次开发。
这样看来，目前已有的WEB直播技术都存在局限性，无法同时实现支持大分辨率视频解码、高实时性、安全性、跨操作系统兼容性。
发明内容
为解决上述问题，本发明的目的在于提供一种能够实现浏览器WEB HTML5直播的HTML5直播嵌入式摄像机音视频系统及其方法。
为实现上述目的，本发明的技术方案如下。
本发明提供一种HTML5直播嵌入式摄像机音视频系统，该系统包括有嵌入式摄像机和浏览器，所述浏览器的WEB页面包括有音视频接收模块、格式转换模块和播放模块；所述嵌入式摄像机通过Websocket协议将音视频原始数据发送给所述音视频接收模块；所述音视频接收模块将所述音视频原始数据传送给所述格式转换模块；所述格式转换模块通过WebAssembly，将所述音视频原始数据转换为HTML5 MSE(Media source extensions)支持的fMP4(Fragmented MP4)格式数据，所述格式转换模块将所述fMP4格式数据传递到所述播放模块；所述播放模块将所述fMP4格式数据导入到MSE中，所述MSE对fMP4格式数据进行硬解码并播放。
所述浏览器的WEB页面还包括时间选择模块，所述时间选择模块通过HTTP(HyperText Transfer Protocol)协议，将录像文件需要播放的录像的时间段发送给嵌入式摄像机的录像文件管理模块。
所述嵌入式摄像机包括有实时音视频发送模块，所述实时音视频发送模块从嵌入式摄像机底层接口获取到摄像头的实时视频流和麦克风的实时音频流，通过Websocket协议把实时音视频原始数据发送给浏览器WEB页面的音视频接收模块。
所述嵌入式摄像机还包括录像文件管理模块和录像音视频发送模块，所述录像文件管理模块，获取录像文件需要播放的录像时间段，读取录像文件中对应时间段的音视频原始数据；所述录像音视频发送模块通过Websocket协议将录像文件中读取的音视频原始数据发送给浏览器WEB页面的音视频接收模块。
所述音视频接收模块包括有Websocket单元和缓存队列写入单元，所述Websocket单元接收嵌入式摄像机发送的音视频原始数据，将所述音视频原始数据传递给所述缓存队列写入单元，所述缓存队列写入单元将所述音视频原始数据写入缓存队列。
所述格式转换模块包括有缓存队列读取单元和WebAssembly单元，所述缓存队列读取单元从所述缓存队列中读取所述音视频原始数据，并传递给所述WebAssembly单元，所述WebAssembly单元将所述音视频原始数据转换成fMP4格式数据传递给HTML5 MSE。
本发明提供一种HTML5直播嵌入式摄像机音视频播放方法，所述方法包括以下步骤：
101、WEB页面初始化时间选择模块、音视频接收模块、格式转换模块、播放模块；
102、WEB页面判断是否有选择播放嵌入式摄像机实时音视频，是，则进入步骤103，否，则进入步骤105；
103、WEB页面发送开始直播的命令到嵌入式摄像机的实时音视频发送模块；
104、实时音视频发送模块通过Websocket协议把音视频原始数据发送给WEB页面的音视频接收模块，然后进入步骤109；
105、WEB页面判断是否有选择播放嵌入式摄像机录像音视频，否，则返回步骤102，是，则进入步骤106；
106、播放人员选取需要播放的时间段后，WEB页面的时间选择模块将所选时间段发送给嵌入式摄像机的录像文件管理模块；
107、嵌入式摄像机的录像文件管理模块读取录像文件中被选中时间段的音视频原始数据；
108、录像音视频发送模块通过Websocket协议，将音视频原始数据发送给WEB页面的音视频接收模块；
109、WEB页面监听是否有事件触发，是，则进入步骤110；否，则继续步骤109；
110、WEB页面判断是否收到嵌入式摄像机实时音视频发送模块或录像音视频发送模块的音视频原始数据，否，则进入步骤112，是，则进入步骤111；
111、音视频接收模块将接收到的音视频原始数据写入缓存队列，触发缓存队列数据更新事件，然后返回步骤109；
112、WEB页面判断音视频原始数据缓存队列是否有数据更新，否，则进入步骤116，是，则进入步骤113；
113、格式转换模块使用Javascript把音视频原始数据导入WebAssembly；
114、WebAssembly将音视频原始数据转换成fMP4数据；
115、格式转换模块使用Javascript得到fMP4数据，触发fMP4
数据更新事件，然后返回步骤109；
116、WEB页面判断是否有fMP4数据更新，否，则返回步骤109，是，则进入步骤117；
117、WEB页面将fMP4数据导入HTML5 MSE；
118、HTML5 MSE硬解码fMP4数据并播放。
本发明的优势在于：相比于现有技术，在本发明当中：
(1)本发明的HTML5直播嵌入式摄像机音视频系统，该系统实现了兼容不同操作系统、高实时性、高效率、支持大分辨率高清视频的WEB直播方式；兼容PC端和移动设备端不同操作系统的主流浏览器，如Chrome、Firefox、Safari、Edge、IE11等；排除网络带宽限制的延时，实时性效果上可以实现仅延时0.5至2秒；支持5百万像素画面的超清视频直播；其中MSE是HTML5标准的一个新技术，支持以实时流的形式播放音视频，之前HTML5只支持文件形式的音视频。
(2)本发明HTML5直播嵌入式摄像机音视频系统的嵌入式摄像机使用Websocket协议将音视频原始数据发送给浏览器WEB页面；使用Websocket协议能更好的兼容数据接收端的浏览器WEB页面，WEB HTML5原生接口可以直接支持Websocket协议；传统方法使用的TCP(Transmission Control Protocol)协议发送数据，由于WEB不支持TCP协议，需要借助WEB插件才能支持TCP协议。
(3)本发明HTML5直播嵌入式摄像机音视频系统的音视频接收模块使用Websocket协议以实时流的形式接收音视频原始数据，其中Websocket协议是WEB中一种高效率的通信协议，效率高于HTTP(HyperText Transfer Protocol)协议，且浏览器WEB页面与嵌入式摄像机建立连接之后支持嵌入式摄像机主动发送数据给浏览器WEB页面。
(4)本发明HTML5直播嵌入式摄像机音视频系统的格式转换模块包括有缓存队列读取单元和WebAssembly单元，WebAssembly是HTML5标准的一个新技术，支持浏览器WEB页面中运行wasm(WebAssembly)格式的二进制文件，具有比javascript更高性能的特点。
(5)本发明HTML5直播嵌入式摄像机音视频系统的播放模块使用HTML5的MSE，比传统的使用插件播放的方法的优势是不需要安装插件，安全性更高、平台兼容性更好。
(6)本发明的HTML5直播嵌入式摄像机音视频播放方法，该方法实现了嵌入式摄像机音视频的WEB实时直播；实现了兼容不同操作系统、高实时性、高效率、支持大分辨率高清视频的WEB直播方式；兼容PC端和移动设备端不同操作系统的主流浏览器，如Chrome、Firefox、Safari、Edge、IE11等；排除网络带宽限制的延时，实时性效果上可以实现仅延时0.5至2秒；支持5百万像素画面的超清视频直播；其中MSE是HTML5标准的一个新技术，支持以实时流的形式播放音视频，之前HTML5只支持文件形式的音视频。
(7)本发明中指定时段的音视频播放方法，采用传输音视频码流的形式播放，选取指定时间段后即可快速播放该时间段的音视频。因为不是以传输录像文件的形式播放，不需要等完整的录像文件传输完成才开始播放，所以该方法具有实时性高、流畅性高的优势。
附图说明
图1是本发明HTML5直播嵌入式摄像机音视频系统的结构图。
图2是本发明音视频接收模块的结构图。
图3是本发明格式转换模块的结构图。
图4是本发明HTML5直播嵌入式摄像机音视频系统第一实施例的结构图。
图5是本发明HTML5直播嵌入式摄像机音视频系统第二实施例的结构图。
图6是本发明HTML5直播嵌入式摄像机音视频方法的流程图。
图7是本发明HTML5直播嵌入式摄像机音视频方法第一实施例的流程图。
图8是本发明HTML5直播嵌入式摄像机音视频方法第二实施例的流程图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
为实现上述目的，本发明的技术方案如下。
参见图1所示，本发明提供一种HTML5直播嵌入式摄像机音视频系统，该系统包括有嵌入式摄像机和浏览器，所述浏览器的WEB页面包括有音视频接收模块、格式转换模块和播放模块；所述嵌入式摄像机通过Websocket协议将音视频原始数据发送给所述音视频接收模块；所述音视频接收模块将所述音视频原始数据传送给所述格式转换模块；所述格式转换模块通过WebAssembly，将所述音视频原始数据转换为HTML5 MSE(Media sourceextensions)支持的fMP4格式数据，所述格式转换模块将所述fMP4格式数据传递到所述播放模块；所述播放模块将所述fMP4格式数据导入到MSE中，所述MSE对fMP4格式数据进行硬解码并播放。
所述浏览器的WEB页面还包括时间选择模块，所述时间选择模块通过HTTP(HyperText Transfer Protocol)协议，将录像文件需要播放的录像的时间段发送给嵌入式摄像机的录像文件管理模块。
所述嵌入式摄像机包括有实时音视频发送模块，所述实时音视频发送模块从嵌入式摄像机底层接口获取到摄像头的实时视频流和麦克风的实时音频流，通过Websocket协议把实时音视频原始数据发送给浏览器WEB页面的音视频接收模块。
所述嵌入式摄像机还包括录像文件管理模块和录像音视频发送模块，所述录像文件管理模块，获取录像文件需要播放的录像时间段，读取录像文件中对应时间段的音视频原始数据；所述录像音视频发送模块通过Websocket协议将录像文件中读取的音视频原始数据发送给浏览器WEB页面的音视频接收模块。
参见图2所示，所述音视频接收模块包括有Websocket单元和缓存队列写入单元，所述Websocket单元接收嵌入式摄像机发送的音视频原始数据，将所述音视频原始数据传递给所述缓存队列写入单元，所述缓存队列写入单元将所述音视频原始数据写入缓存队列。
参见图3所示，所述格式转换模块包括有缓存队列读取单元和WebAssembly单元，所述缓存队列读取单元从所述缓存队列中读取所述音视频原始数据，并传递给所述WebAssembly单元，所述WebAssembly单元将所述音视频原始数据转换成fMP4格式数据传递给HTML5 MSE。
格式转换模块将接收到的音视频原始数据进行格式转换，其方法可为：在WEB页面中使用javascript调用wasm文件的API(Application Programming Interface)实现音视频格式转换成fMP4格式。
参见图4所示，一种实施例，本发明的HTML5直播嵌入式摄像机音视频系统，该系统包括有嵌入式摄像机和浏览器，嵌入式摄像机包括有实时音视频发送模块，浏览器的WEB页面包括有音视频接收模块、格式转换模块和播放模块；实时音视频发送模块从嵌入式摄像机底层接口获取到摄像头的实时视频流和麦克风的实时音频流，通过Websocket协议把实时音视频原始数据发送给浏览器WEB页面的音视频接收模块；所述音视频接收模块将所述音视频原始数据传送给所述格式转换模块；所述格式转换模块通过WebAssembly，将所述音视频码流转换为HTML5 MSE支持的fMP4格式数据，所述格式转换模块将所述fMP4格式数据传递到所述播放模块；所述播放模块将所述fMP4格式数据导入到MSE中，MSE对fMP4格式进行硬解码并播放。
参见图5所示，一种实施例，本发明的HTML5直播嵌入式摄像机音视频系统，该系统包括有嵌入式摄像机和浏览器，嵌入式摄像机包括有录像文件管理模块和录像音视频发送模块，WEB页面包括有时间选择模块、音视频接收模块、格式转换模块和播放模块；所述时间选择模块通过HTTP(HyperText Transfer Protocol)协议，将录像文件需要播放的录像的时间段发送给嵌入式摄像机的录像文件管理模块；录像文件管理模块获取需要播放的时间段的音视频原始数据，把音视频原始数据传递给录像音视频发送模块；录像音视频发送模块通过Websocket协议把音视频原始数据发送给浏览器WEB页面的音视频接收模块；所述音视频接收模块将所述音视频原始数据传送给所述格式转换模块；所述格式转换模块通过WebAssembly，将所述音视频码流转换为HTML5 MSE(Media source extensions)支持的fMP4格式数据，所述格式转换模块将所述fMP4格式数据传递到所述播放模块；所述播放模块将所述fMP4格式数据导入到MSE中，MSE对fMP4格式硬解码并进行播放。
参见图6所示，本发明提供一种HTML5直播嵌入式摄像机音视频播放方法，所述方法包括以下步骤：
101、WEB页面初始化时间选择模块、音视频接收模块、格式转换模块、播放模块；
102、WEB页面判断是否有选择播放嵌入式摄像机实时音视频，是，则进入步骤103，否，则进入步骤105；
103、WEB页面发送开始直播的命令到嵌入式摄像机的实时音视频发送模块；
104、实时音视频发送模块通过Websocket协议把音视频原始数据发送给WEB页面的音视频接收模块，然后进入步骤109；
105、WEB页面判断是否有选择播放嵌入式摄像机录像音视频，否，则返回步骤102，是，则进入步骤106；
106、播放人员选取需要播放的时间段后，WEB页面的时间选择模块将所选时间段发送给嵌入式摄像机的录像文件管理模块；
107、嵌入式摄像机的录像文件管理模块读取录像文件中被选中时间段的音视频原始数据；
108、录像音视频发送模块通过Websocket协议，将音视频原始数据发送给WEB页面的音视频接收模块；
109、WEB页面监听是否有事件触发，是，则进入步骤110；否，则继续步骤109；
110、WEB页面判断是否收到嵌入式摄像机实时音视频发送模块或录像音视频发送模块的音视频原始数据，否，则进入步骤112，是，则进入步骤111；
111、音视频接收模块将接收到的音视频原始数据写入缓存队列，触发缓存队列数据更新事件，然后返回步骤109；
112、WEB页面判断音视频原始数据缓存队列是否有数据更新，否，则进入步骤116，是，则进入步骤113；
113、格式转换模块使用Javascript把音视频原始数据导入WebAssembly；
114、WebAssembly将音视频原始数据转换成fMP4数据；
115、格式转换模块使用Javascript得到fMP4数据，触发fMP4数据更新事件，然后返回步骤109；
116、WEB页面判断是否有fMP4数据更新，否，则返回步骤109，是，则进入步骤117；
117、WEB页面将fMP4数据导入HTML5 MSE；
118、HTML5 MSE硬解码fMP4数据并播放。
结合图4，参见图7所示，一种HTML5直播嵌入式摄像机音视频实时码流方法的实施例，包括以下步骤：
201、WEB页面初始化音视频接收模块、格式转换模块、播放模块；
202、WEB页面发送开始直播的命令到嵌入式摄像机的实时音视频发送模块；
203、实时音视频发送模块通过Websocket协议把音视频原始数据发送给WEB页面的音视频接收模块；
204、WEB页面监听是否有事件触发，是，则进入步骤205；否，则继续步骤204；
205、WEB页面判断是否收到嵌入式摄像机实时音视频发送模块的音视频原始数据，否，则进入步骤207，是，则进入步骤206；
206、音视频接收模块将接收到的音视频原始数据写入缓存队列，触发缓存队列数据更新事件，然后返回步骤204；
207、WEB页面判断音视频原始数据缓存队列是否有数据更新，否，则进入步骤211，是，则进入步骤208；
208、格式转换模块使用Javascript把音视频原始数据导入WebAssembly；
209、WebAssembly将音视频原始数据转换成fMP4数据；
210、格式转换模块使用Javascript得到fMP4数据，触发fMP4数据更新事件，然后返回步骤204；
211、WEB页面判断是否有fMP4数据更新，否，则返回步骤204，是，则进入步骤212；
212、WEB页面将fMP4数据导入HTML5 MSE；
213、HTML5 MSE硬解码fMP4数据并播放。
结合图5，参见图8所示，一种HTML5直播嵌入式摄像机存储的录像文件音视频码流方法的实施例，包括以下步骤：
301、WEB页面初始化时间选择模块、音视频接收模块、格式转换模块、播放模块；
302、播放人员选取需要播放的时间段后，WEB页面的时间选择模块将所选时间段发送给嵌入式摄像机的录像文件管理模块；
303、嵌入式摄像机的录像文件管理模块读取录像文件中被选中时间段的音视频原始数据；
304、录像音视频发送模块通过Websocket协议，将音视频原始数据发送给WEB页面的音视频接收模块；
305、WEB页面监听是否有事件触发，是，则进入步骤306；否则继续步骤305；
306、WEB页面判断是否收到嵌入式摄像机录像音视频发送模块的音视频原始数据，否，则进入步骤308，是，则进入步骤307；
307、音视频接收模块将接收到的音视频原始数据写入缓存队列，触发缓存队列数据更新事件，然后返回步骤305；
308、WEB页面判断音视频原始数据缓存队列是否有数据更新，否，则进入步骤312，是，则进入步骤309；
309、格式转换模块使用Javascript把音视频原始数据导入WebAssembly；
310、WebAssembly将音视频原始数据转换成fMP4数据；
311、格式转换模块使用Javascript得到fMP4数据，触发fMP4数据更新事件，然后返回步骤305；
312、WEB页面判断是否有fMP4数据更新，否，则返回步骤305，是，则进入步骤313；
313、WEB页面将fMP4数据导入HTML5 MSE；
314、HTML5 MSE硬解码fMP4数据并播放。
以上仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

Claims (7)

1.一种HTML5直播嵌入式摄像机音视频系统，该系统包括有嵌入式摄像机和浏览器，其特征在于，所述浏览器的WEB页面包括有音视频接收模块、格式转换模块和播放模块；所述嵌入式摄像机通过Websocket协议将音视频原始数据发送给所述音视频接收模块；所述音视频接收模块将所述音视频原始数据传送给所述格式转换模块；所述格式转换模块通过WebAssembly，将所述音视频原始数据转换为HTML5MSE支持的fMP4格式数据，所述格式转换模块将所述fMP4格式数据传递到所述播放模块；所述播放模块将所述fMP4格式数据导入到MSE中，所述MSE对fMP4格式数据进行硬解码并播放。
2.如权利要求1所述的HTML5直播嵌入式摄像机音视频系统，其特征在于，所述浏览器的WEB页面还包括时间选择模块，所述时间选择模块通过HTTP协议，将录像文件需要播放的录像的时间段发送给嵌入式摄像机的录像文件管理模块。
3.如权利要求1所述的HTML5直播嵌入式摄像机音视频系统，其特征在于，所述嵌入式摄像机包括有实时音视频发送模块，所述实时音视频发送模块从嵌入式摄像机底层接口获取到摄像头的实时视频流和麦克风的实时音频流，通过Websocket协议把实时音视频原始数据发送给浏览器WEB页面的音视频接收模块。
4.如权利要求1所述的HTML5直播嵌入式摄像机音视频系统，其特征在于，所述嵌入式摄像机还包括录像文件管理模块和录像音视频发送模块，所述录像文件管理模块，获取录像文件需要播放的录像时间段，读取录像文件中对应时间段的音视频原始数据；所述录像音视频发送模块通过Websocket协议将录像文件中读取的音视频原始数据发送给浏览器WEB页面的音视频接收模块。
5.如权利要求1所述的HTML5直播嵌入式摄像机音视频系统，其特征在于，所述音视频接收模块包括有Websocket单元和缓存队列写入单元，所述Websocket单元接收嵌入式摄像机发送的音视频原始数据，将所述音视频原始数据传递给所述缓存队列写入单元，所述缓存队列写入单元将所述音视频原始数据写入缓存队列。
6.如权利要求1所述的HTML5直播嵌入式摄像机音视频系统，其特征在于，所述格式转换模块包括有缓存队列读取单元和WebAssembly单元，所述缓存队列读取单元从所述缓存队列中读取所述音视频原始数据，并传递给所述WebAssembly单元，所述WebAssembly单元将所述音视频原始数据转换成fMP4格式数据传递给HTML5MSE。
7.一种HTML5直播嵌入式摄像机音视频播放方法，其特征在于，所述方法包括以下步骤：
101、WEB页面初始化时间选择模块、音视频接收模块、格式转换模块、播放模块；
102、WEB页面判断是否有选择播放嵌入式摄像机实时音视频，是，则进入步骤103，否，则进入步骤105；
103、WEB页面发送开始直播的命令到嵌入式摄像机的实时音视频发送模块；
104、实时音视频发送模块通过Websocket协议把音视频原始数据发送给WEB页面的音视频接收模块，然后进入步骤109；
105、WEB页面判断是否有选择播放嵌入式摄像机录像音视频，否，则返回步骤102，是，则进入步骤106；
106、播放人员选取需要播放的时间段后，WEB页面的时间选择模块将所选时间段发送给嵌入式摄像机的录像文件管理模块；
107、嵌入式摄像机的录像文件管理模块读取录像文件中被选中时间段的音视频原始数据；
108、录像音视频发送模块通过Websocket协议，将音视频原始数据发送给WEB页面的音视频接收模块；
109、WEB页面监听是否有事件触发，是，则进入步骤110；否，则继续步骤109；
110、WEB页面判断是否收到嵌入式摄像机实时音视频发送模块或录像音视频发送模块的音视频原始数据，否，则进入步骤112，是，则进入步骤111；
111、音视频接收模块将接收到的音视频原始数据写入缓存队列，触发缓存队列数据更新事件，然后返回步骤109；
112、WEB页面判断音视频原始数据缓存队列是否有数据更新，否，则进入步骤116，是，则进入步骤113；
113、格式转换模块使用Javascript把音视频原始数据导入WebAssembly；
114、WebAssembly将音视频原始数据转换成fMP4数据；
115、格式转换模块使用Javascript得到fMP4数据，触发fMP4数据更新事件，然后返回步骤109；
116、WEB页面判断是否有fMP4数据更新，否，则返回步骤109，是，则进入步骤117；
117、WEB页面将fMP4数据导入HTML5MSE；
118、HTML5MSE硬解码fMP4数据并播放。
CN201810618286.8A 2018-06-15 2018-06-15 Html5直播嵌入式摄像机音视频系统及其方法 Pending CN108718416A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810618286.8A CN108718416A (zh) 2018-06-15 2018-06-15 Html5直播嵌入式摄像机音视频系统及其方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810618286.8A CN108718416A (zh) 2018-06-15 2018-06-15 Html5直播嵌入式摄像机音视频系统及其方法

Publications (1)

Publication Number Publication Date
CN108718416A true CN108718416A (zh) 2018-10-30

Family

ID=63913060

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810618286.8A Pending CN108718416A (zh) 2018-06-15 2018-06-15 Html5直播嵌入式摄像机音视频系统及其方法

Country Status (1)

Country Link
CN (1) CN108718416A (zh)

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN110667508A (zh) * 2019-09-24 2020-01-10 钛马信息网络技术有限公司 车辆告警系统、方法及装置
CN111107391A (zh) * 2020-01-16 2020-05-05 深圳市信义科技有限公司 一种基于分布式的web无插件视频直播方法
CN111752661A (zh) * 2020-06-24 2020-10-09 杭州海康威视数字技术股份有限公司 一种界面显示方法、装置、电子设备及存储介质
CN112423117A (zh) * 2020-06-11 2021-02-26 上海哔哩哔哩科技有限公司 Web端视频播放方法、装置及计算机设备
CN112449250A (zh) * 2019-08-27 2021-03-05 腾讯科技（深圳）有限公司 一种视频资源的下载方法、装置、设备和介质
CN112653700A (zh) * 2020-12-23 2021-04-13 武汉烽火众智数字技术有限责任公司 一种基于webrtc网页视频通信的方法
CN112995760A (zh) * 2019-12-18 2021-06-18 腾讯科技（深圳）有限公司 视频处理方法、装置、设备及计算机存储介质
CN114390034A (zh) * 2021-12-30 2022-04-22 罗普特科技集团股份有限公司 一种基于混合架构的Web视频直播方法及系统
CN114745361A (zh) * 2022-03-25 2022-07-12 朗新数据科技有限公司 一种用于html5浏览器的音视频播放方法及系统

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103164214A (zh) * 2011-12-19 2013-06-19 北京磊友信息科技有限公司 一种移动终端中浏览器对摄像头的调用方法及系统
CN106060674A (zh) * 2016-06-27 2016-10-26 武汉斗鱼网络科技有限公司 一种在前端实现智能视频直播的系统及方法
CN106506632A (zh) * 2016-10-27 2017-03-15 上海幻电信息科技有限公司 一种基于html5浏览器的音视频直播方法
US20170093939A1 (en) * 2015-09-24 2017-03-30 Flir Commercial Systems, Inc. Real-time video streaming to client video element
CN106993238A (zh) * 2017-04-14 2017-07-28 网宿科技股份有限公司 基于Html5的音视频播放方法及装置、音视频直播方法及系统
CN107995187A (zh) * 2017-11-30 2018-05-04 上海哔哩哔哩科技有限公司 基于html5浏览器的视频主播、直播方法、终端和系统

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103164214A (zh) * 2011-12-19 2013-06-19 北京磊友信息科技有限公司 一种移动终端中浏览器对摄像头的调用方法及系统
US20170093939A1 (en) * 2015-09-24 2017-03-30 Flir Commercial Systems, Inc. Real-time video streaming to client video element
CN106060674A (zh) * 2016-06-27 2016-10-26 武汉斗鱼网络科技有限公司 一种在前端实现智能视频直播的系统及方法
CN106506632A (zh) * 2016-10-27 2017-03-15 上海幻电信息科技有限公司 一种基于html5浏览器的音视频直播方法
CN106993238A (zh) * 2017-04-14 2017-07-28 网宿科技股份有限公司 基于Html5的音视频播放方法及装置、音视频直播方法及系统
CN107995187A (zh) * 2017-11-30 2018-05-04 上海哔哩哔哩科技有限公司 基于html5浏览器的视频主播、直播方法、终端和系统

Cited By (12)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112449250A (zh) * 2019-08-27 2021-03-05 腾讯科技（深圳）有限公司 一种视频资源的下载方法、装置、设备和介质
CN110667508A (zh) * 2019-09-24 2020-01-10 钛马信息网络技术有限公司 车辆告警系统、方法及装置
CN112995760A (zh) * 2019-12-18 2021-06-18 腾讯科技（深圳）有限公司 视频处理方法、装置、设备及计算机存储介质
CN112995760B (zh) * 2019-12-18 2022-06-28 腾讯科技（深圳）有限公司 视频处理方法、装置、设备及计算机存储介质
CN111107391A (zh) * 2020-01-16 2020-05-05 深圳市信义科技有限公司 一种基于分布式的web无插件视频直播方法
CN112423117A (zh) * 2020-06-11 2021-02-26 上海哔哩哔哩科技有限公司 Web端视频播放方法、装置及计算机设备
CN111752661A (zh) * 2020-06-24 2020-10-09 杭州海康威视数字技术股份有限公司 一种界面显示方法、装置、电子设备及存储介质
CN111752661B (zh) * 2020-06-24 2022-09-02 杭州海康威视数字技术股份有限公司 一种界面显示方法、装置、电子设备及存储介质
CN112653700A (zh) * 2020-12-23 2021-04-13 武汉烽火众智数字技术有限责任公司 一种基于webrtc网页视频通信的方法
CN114390034A (zh) * 2021-12-30 2022-04-22 罗普特科技集团股份有限公司 一种基于混合架构的Web视频直播方法及系统
CN114745361A (zh) * 2022-03-25 2022-07-12 朗新数据科技有限公司 一种用于html5浏览器的音视频播放方法及系统
CN114745361B (zh) * 2022-03-25 2024-05-14 朗新数据科技有限公司 一种用于html5浏览器的音视频播放方法及系统

Similar Documents

Publication Publication Date Title
CN108718416A (zh) Html5直播嵌入式摄像机音视频系统及其方法
US10187668B2 (en) Method, system and server for live streaming audio-video file
KR102321859B1 (ko) 자바 스크립트를 이용한 실시간 미디어 스트리밍 방법 및 그 장치
CN106131591B (zh) 直播方法、装置及终端
CN101917389B (zh) 一种网络电视直播系统
CN105025327B (zh) 一种移动终端现场直播的方法及系统
CN103843301B (zh) 经译码多媒体数据的网络串流期间的表示之间的切换
CN104081785A (zh) 来自多个源的多媒体数据的流式传输
WO2016150317A1 (zh) 直播视频的合成方法、装置及系统
KR102464061B1 (ko) 미디어 데이터를 송수신하는 방법 및 장치
CN107925797A (zh) 传输编码的音频数据
CN103069769A (zh) 用于经译码视频数据的网络串流传输的特技模式
CN106134146A (zh) 处理连续的多周期内容
CN101917613A (zh) 一种流媒体采集编码服务系统
CN105900445A (zh) Dash的稳健实况操作
CN110519640B (zh) 视频处理方法、编码器、cdn服务器、解码器、设备及介质
CN101848367B (zh) 基于文件的动态影像网络直播方法
CN103024454A (zh) 在广播电视节目中向受众传送互动入口信息的方法及系统
CN112616065A (zh) 一种屏幕镜像发起方法、装置、计算机设备、可读存储介质及屏幕镜像呈现系统
CN102088631A (zh) 数字电视节目直播和点播方法及相关装置和系统
CN113938470A (zh) 一种浏览器播放rtsp数据源的方法、装置以及流媒体服务器
CN107231564B (zh) 一种视频直播方法、直播系统和直播服务器
CN109040818B (zh) 直播时的音视频同步方法、存储介质、电子设备及系统
CN111510720A (zh) 实时流媒体数据的传输方法、电子装置及服务器
CN114363648A (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
RJ01 Rejection of invention patent application after publication

Application publication date: 20181030