CN112423100A - 基于html5的web音视频自定义渲染方法 - Google Patents

基于html5的web音视频自定义渲染方法 Download PDF

Info

Publication number
CN112423100A
CN112423100A CN202011161151.7A CN202011161151A CN112423100A CN 112423100 A CN112423100 A CN 112423100A CN 202011161151 A CN202011161151 A CN 202011161151A CN 112423100 A CN112423100 A CN 112423100A
Authority
CN
China
Prior art keywords
audio
video
data
rendering
frame
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
CN202011161151.7A
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 compuchip Information Technology Co.,Ltd.
Original Assignee
Shenzhen Vclusters 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 Vclusters Information Technology Co ltd filed Critical Shenzhen Vclusters Information Technology Co ltd
Priority to CN202011161151.7A priority Critical patent/CN112423100A/zh
Publication of CN112423100A publication Critical patent/CN112423100A/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/434—Disassembling of a multiplex stream, e.g. demultiplexing audio and video streams, extraction of additional data from a video stream; Remultiplexing of multiplex streams; Extraction or processing of SI; Disassembling of packetised elementary stream
    • H04N21/4341—Demultiplexing of audio and video streams
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • 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/236—Assembling of a multiplex stream, e.g. transport stream, by combining a video stream with other content or additional data, e.g. inserting a URL [Uniform Resource Locator] into a video stream, multiplexing software data into a video stream; Remultiplexing of multiplex streams; Insertion of stuffing bits into the multiplex stream, e.g. to obtain a constant bit-rate; Assembling of a packetised elementary stream
    • H04N21/23608—Remultiplexing multiplex streams, e.g. involving modifying time stamps or remapping the packet identifiers
    • 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/4302—Content synchronisation processes, e.g. decoder synchronisation
    • H04N21/4307—Synchronising the rendering of multiple content streams or additional data on devices, e.g. synchronisation of audio on a mobile phone with the video output on the TV screen
    • 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, rendering scenes according to MPEG-4 scene graphs
    • 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, rendering scenes according to MPEG-4 scene graphs
    • H04N21/44012—Processing of video elementary streams, e.g. splicing a video clip retrieved from local storage with an incoming video stream, rendering scenes according to MPEG-4 scene graphs involving rendering scenes according to scene graphs, e.g. MPEG-4 scene graphs
    • 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/8547—Content authoring involving timestamps for synchronizing content

Abstract

本发明涉及一种基于HTML5的WEB音视频自定义渲染方法，包括步骤：S1、Web端接收需要自定义渲染的音视频帧数据及渲染内容；S2、通过FFMPEG导出导wasm接口将音视频帧数据解码成PCM数据和YUV图像；S3、通过WebAudio和WebGL进行音视频自定义渲染。本发明技术方案提出了一种基于纯Web技术进行自定义渲染视频的方案，用户在使用系统时，不论是PC端还是移动端，都可直接使用浏览器进行访问，免去安装客户端的步骤，极大提升了用户体验。

Description

基于HTML5的WEB音视频自定义渲染方法
技术领域
本发明涉及音视频处理技术领域，尤其是涉及一种基于HTML5的WEB音视频自定义渲染方法。
背景技术
HTML5中虽然提供了video标签，可支持H.264+AAC的MP4、VP8+Vorbis的WebM等视频文件播放，但是编码格式支持有限且画面渲染被封装到了浏览器内部，对外只提供播放、暂停、停止、快进、快退等API接口，无法满足在原始视频的特定帧上进行自定义内容渲染，如在视频AI分析系统的交互界面上，一般会将检测到的目标使用框进行标记、已识别的目标会添加文字说明等。当前在需要进行自定义渲染视频的应用中，PC端一般采用C/S架构进行开发，移动端一般采用Native API进行开发。现有技术缺少直接使用浏览器访问、不需要安装的自定义渲染音视频方案，本发明基于此而研发。
下面对原理及相关技术进行说明：
1、HTML5是W3C发布的最新HTML标准，新增了音视频、Canvas绘图、WebWorker、WebSocket等新特性。其中WebWorker允许Javascript有多个线程，但不能在WebWorker中访问DOM对象，WebWorker一般使用MessageChannel与其他线程进行通信；WebSocket是基于TCP的全双工通信协议，允许客户端与服务器之间进行长链接及双向通信。
2、WebAssembly/wasm是一个由主流浏览器厂商组成的W3C社区团体制定的新规范，可移植、体积小、加载快并且兼容Web的全新二进制格式，具有高效、安全、开放、标准等特点。通过Emscripten SDK，可以将C、C++等语言编写的代码编译成wasm文件，并导出供JavaScript调用的接口。当前主流浏览器均已支持wasm 1.0规范。
3、FFMPEG是一个使用C语言实现的开源、跨平台多媒体框架，包含音视频编解码、复用及解复用、图像转换等功能模块。几乎支持所有格式的音视频解码。
4、WebGL是由Khronos组织制定的基于OpenGL ES的Web版本的2D、3D图形接口，HTML5中使用cavans元素提供对应的Javascript API接口。通过WebGL我们可以将YUV格式的图像渲染到屏幕上，并可以在屏幕上进行画框、贴图、文字显示等。
发明内容
本发明正是针对上述存在的问题，提出一种基于HTML5的WEB音视频自定义渲染方法。
为实现上述目的，本发明的具体技术方案如下：
一种基于HTML5的WEB音视频自定义渲染方法，包括步骤：
S1、Web端接收需要自定义渲染的音视频帧数据及渲染内容；
S2、通过FFMPEG导出导wasm接口将音视频帧数据解码成PCM数据和YUV图像；
S3、通过WebAudio和WebGL进行音视频自定义渲染。
本发明的上述方法，用于整体Web端接收及自定义渲染，涵盖音视频帧数据端解码部分。
优选地，所述步骤S3具体包括：
S31、创建Canvas对象，初始化WebGL，包含YUV图像渲染、自定义内容渲染需要用到的资源；
S32、创建一个YUV图像队列yuvque，该队列用于存储视频解码后的YUV图像及自定义渲染数据；并通过一个回调函数在屏幕刷新时检测当前Audio的播放时间戳acurpts(例如，通过requestAnimationFrame接口注册一个回调函数cbDisplayFun，该回调函数用于在屏幕刷新时检测当前Audio的播放时间戳acurpts)，并将yuvque中所有时间戳PTS小于等于acurpts的YUV图像渲染到屏幕上；
S33、创建2个MessageChannel mc1和mc2，其中mc1用于视频帧数据和自定义渲染数据通信，mc2用于音频帧数据通信；
S34、创建音视频帧接收线程WebWorker1，创建后暂时先不链接服务器，待后续资源准就绪后再传输数据流；设置mc1.port1为视频帧数据发送端，设置mc2.port1为音频帧数据发送端；
S35、创建视频解码线程WebWorker2，绑定mc1.port2为视频帧接收端；创建音频解码线程WebWorker3，绑定mc2.port2为音频帧接收端；
这两个WebWorker都需要加载wasm资源，一般耗时较久，WebWoker1需要在这两个woker资源加载完毕后进行数据传输。
S36、创建WebAudio，使用默认参数对播放设备进行初始化，并调用resume()接口使能声音播放；
S37、等待WebWorker2和WebWorker3中的wasm初始化完毕后，通知WebWorker1链接视频服务器进行视频流传输；
S38、当WebWorker1接收到数据后，解析出其中的音视频帧及自定义渲染数据(自定义渲染数据跟随帧数据一起传输到下一模块)。
优选地，步骤S38具体包括：
S381、如果是视频帧，则发送到视频解码模块，解码完成后，将YUV图像发送到UI线程，并按照YUV图像的显示时间戳PTS升序排序存储到yuvque，cbDisplayFun回调中通过检测音频播放时间戳(需要将acurpts与视频帧PTS转换为统一的单位和基准)将图像帧及自定义数据渲染到屏幕上；
S382、如果是音频帧，则发送到音频解码模块，解码完毕后，将PCM数据发送到UI线程，如果音频参数与WebAudio初始化参数一致，则直接进行音频数据播放，如果音频参数与WebAudio初始化参数不一致，重新初始化WebAudio后，再进行音频数据播放。
优选地，上述还包括如下步骤：
S39、当用户离开页面时，按照以下顺序清理资源：关闭WebWorker1、WebWorker2、WebWorker3，取消cbDisplayFun注册，关闭mc1.port、mc2.port、WebAudio、WebGL，清空yuvque。
本发明还提供另一种基于HTML5的WEB音视频自定义渲染方法，该方法只涉及音视频渲染时的过程，相当于子过程，与前述的音视频接收、及解码等整体过程区别开来，具体包括步骤：
S31、创建Canvas对象，初始化WebGL，包含YUV图像渲染、自定义内容渲染需要用到到资源；
S32、创建一个YUV图像队列yuvque，该队列用于存储视频解码后的YUV图像及自定义渲染数据；并通过一个回调函数cbDisplayFun在屏幕刷新时检测当前Audio的播放时间戳acurpts(例如，通过requestAnimationFrame接口注册一个回调函数cbDisplayFun，该回调函数用于在屏幕刷新时检测当前Audio的播放时间戳acurpts)，并将yuvque中所有时间戳PTS小于等于acurpts的YUV图像渲染到屏幕上；
S33、创建2个MessageChannel mc1和mc2，其中mc1用于视频帧数据和自定义渲染数据通信，mc2用于音频帧数据通信；
S34、创建音视频帧接收线程WebWorker1，创建后暂时先不链接服务器，待后续资源准就绪后再传输数据流；设置mc1.port1为视频帧数据发送端，设置mc2.port1为音频帧数据发送端；
S35、创建视频解码线程WebWorker2，绑定mc1.port2为视频帧接收端；创建音频解码线程WebWorker3，绑定mc2.port2为音频帧接收端；
这两个WebWorker都需要加载wasm资源，一般耗时较久，WebWoker1需要在这两个woker资源加载完毕后进行数据传输。
S36、创建WebAudio，使用默认参数对播放设备进行初始化，并调用resume()接口使能声音播放；
S37、等待WebWorker2和WebWorker3中的wasm初始化完毕后，通知WebWorker1链接视频服务器进行视频流传输；
S38、当WebWorker1接收到数据后，解析出其中的音视频帧及自定义渲染数据(自定义渲染数据跟随帧数据一起传输到下一模块)。
优选地，步骤S38具体包括：
S381、如果是视频帧，则发送到视频解码模块，解码完成后，将YUV图像发送到UI线程，并按照YUV图像的显示时间戳PTS升序排序存储到yuvque，cbDisplayFun回调中通过检测音频播放时间戳(需要将acurpts与视频帧PTS转换为统一的单位和基准)将图像帧及自定义数据渲染到屏幕上；
S382、如果是音频帧，则发送到音频解码模块，解码完毕后，将PCM数据发送到UI线程，如果音频参数与WebAudio初始化参数一致，则直接进行音频数据播放，如果音频参数与WebAudio初始化参数不一致，重新初始化WebAudio后，再进行音频数据播放。
优选地，步骤S3还包括如下步骤：
S39、当用户离开页面时，按照以下顺序清理资源：关闭WebWorker1、WebWorker2、WebWorker3，取消cbDisplayFun注册，关闭mc1.port、mc2.port、WebAudio、WebGL，清空yuvque。
本发明技术方案提出了一种基于纯Web技术进行自定义渲染视频的方案，用户在使用系统时，不论是PC端还是移动端，都可直接使用浏览器进行访问，免去安装客户端的步骤，极大提升了用户体验。
附图说明
图1是本发明一实施例的流程图；
图2是本发明的原理框图。
具体实施方式
为了便于本领域的普通技术人员能够理解并实施本发明，下面将结合附图对本发明实施例作进一步说明。
参考图1至图2，本发明提供的一种基于HTML5的WEB音视频自定义渲染方法，包括步骤：
S1、Web端接收需要自定义渲染的音视频帧数据及渲染内容；
S2、通过FFMPEG导出导wasm接口将音视频帧数据解码成PCM数据和YUV图像；
S3、通过WebAudio和WebGL进行音视频自定义渲染。
具体地，基于FFMPEG编写wasm接口函数，并使用Emscripten SDK编译并导出函数接口供Javascript调用，主要包含初始化、打开解码器、关闭解码器、解码、获取帧信息(图像格式、时间戳等)等接口。Web端通过WebSocket接收需要自定义渲染音视频帧数据及渲染内容发后，通过FFMPEG导出的wasm接口将音视频帧解码成PCM数据和YUV图像，再通过WebAudio和WebGL进行音视频自定义渲染。本方法借用FFMPEG强大的解码能力及WASM的支持，可极大的提升系统通用性。
当用户进入视频渲染模块时，检测浏览器是否支持WebGL、Wasm、WebSocket、WebWorker、WebAudio，如果支持，创建一个指定大小的Canvas对象，并进入以下步骤，如果其中任意对象不支持，提示用户使用最新浏览器进行访问。
1、通过Canvas，初始化WebGL，包含YUV图像渲染、自定义内容渲染需要用到的资源；
2、创建一个YUV图像队列yuvque，该队列用于存储视频解码后的YUV图像及自定义渲染数据；并通过requestAnimationFrame接口注册一个回调函数cbDisplayFun，该回调函数用于在屏幕刷新时检测当前Audio的播放时间戳acurpts，并将yuvque中所有时间戳PTS小于等于acurpts的YUV图像渲染到屏幕上。
3、创建2个MessageChannel mc1和mc2，其中mc1用于视频帧数据和自定义渲染数据通信，mc2用于音频帧数据通信。
4、创建音视频帧接收线程WebWorker1，创建后暂时先不链接服务器，待后续资源准就绪后再传输数据流。设置mc1.port1为视频帧数据发送端，设置mc2.port1为音频帧数据发送端。
5、创建视频解码线程WebWorker2，绑定mc1.port2为视频帧接收端；创建音频解码线程WebWorker3，绑定mc2.port2为音频帧接收端。这两个WebWorker都需要加载wasm资源，一般耗时较久，WebWoker1需要在这两个woker资源加载完毕后进行数据传输。
6、创建WebAudio，使用默认参数对播放设备进行初始化，并调用resume()接口使能声音播放。
7、等待WebWorker2和WebWorker3中的wasm初始化完毕后，通知WebWorker1链接视频服务器进行视频流传输。
8、当WebWorker1接收到数据后，解析出其中的音视频帧及自定义渲染数据(自定义渲染数据跟随帧数据一起传输到下一模块)：
a、如果是视频帧，则发送到视频解码模块，解码完成后，将YUV图像发送到UI线程，并按照YUV图像的显示时间戳PTS升序排序存储到yuvque，cbDisplayFun回调中通过检测音频播放时间戳(需要将acurpts与视频帧PTS转换为统一的单位和基准)将图像帧及自定义数据渲染到屏幕上；
b、如果是音频帧，则发送到音频解码模块，解码完毕后，将PCM数据发送到UI线程，如果音频参数与WebAudio初始化参数一致，则直接进行音频数据播放，如果音频参数与WebAudio初始化参数不一致，重新初始化WebAudio后，再进行音频数据播放。
9、当用户离开页面时，按照以下顺序清理资源：关闭WebWorker1、WebWorker2、WebWorker3，取消cbDisplayFun注册，关闭mc1.port、mc2.port、WebAudio、WebGL，清空yuvque。
以上所述实施例仅表达了本发明的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本发明构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。因此，本发明专利的保护范围应以所附权利要求为准。

Claims (7)

1.一种基于HTML5的WEB音视频自定义渲染方法，其特征在于，包括步骤：
S1、Web端接收需要自定义渲染的音视频帧数据及渲染内容；
S2、通过FFMPEG导出导wasm接口将音视频帧数据解码成PCM数据和YUV图像；
S3、通过WebAudio和WebGL进行音视频自定义渲染。
2.根据权利要求1所述的基于HTML5的WEB音视频自定义渲染方法，其特征在于，所述步骤S3具体包括：
S31、创建Canvas对象，初始化WebGL，包含YUV图像渲染、自定义内容渲染需要用到的资源；
S32、创建一个YUV图像队列yuvque，该队列用于存储视频解码后的YUV图像及自定义渲染数据；并通过一个回调函数在屏幕刷新时检测当前Audio的播放时间戳acurpts，并将yuvque中所有时间戳PTS小于等于acurpts的YUV图像渲染到屏幕上；
S33、创建2个MessageChannel mc1和mc2，其中mc1用于视频帧数据和自定义渲染数据通信，mc2用于音频帧数据通信；
S34、创建音视频帧接收线程WebWorker1，创建后暂时先不链接服务器，待后续资源准就绪后再传输数据流；设置mc1.port1为视频帧数据发送端，设置mc2.port1为音频帧数据发送端；
S35、创建视频解码线程WebWorker2，绑定mc1.port2为视频帧接收端；创建音频解码线程WebWorker3，绑定mc2.port2为音频帧接收端；
S36、创建WebAudio，使用默认参数对播放设备进行初始化，并调用resume()接口使能声音播放；
S37、等待WebWorker2和WebWorker3中的wasm初始化完毕后，通知WebWorker1链接视频服务器进行视频流传输；
S38、当WebWorker1接收到数据后，解析出其中的音视频帧及自定义渲染数据。
3.根据权利要求2所述的基于HTML5的WEB音视频自定义渲染方法，其特征在于，步骤S38具体包括：
S381、如果是视频帧，则发送到视频解码模块，解码完成后，将YUV图像发送到UI线程，并按照YUV图像的显示时间戳PTS升序排序存储到yuvque，cbDisplayFun回调中通过检测音频播放时间戳将图像帧及自定义数据渲染到屏幕上；
S382、如果是音频帧，则发送到音频解码模块，解码完毕后，将PCM数据发送到UI线程，如果音频参数与WebAudio初始化参数一致，则直接进行音频数据播放，如果音频参数与WebAudio初始化参数不一致，重新初始化WebAudio后，再进行音频数据播放。
4.根据权利要求3所述的基于HTML5的WEB音视频自定义渲染方法，其特征在于，步骤S3还包括如下步骤：
S39、当用户离开页面时，按照以下顺序清理资源：关闭WebWorker1、WebWorker2、WebWorker3，取消cbDisplayFun注册，关闭mc1.port、mc2.port、WebAudio、WebGL，清空yuvque。
5.一种基于HTML5的WEB音视频自定义渲染方法，其特征在于，包括步骤：
S31、创建Canvas对象，初始化WebGL，包含YUV图像渲染、自定义内容渲染需要用到到资源；
S32、创建一个YUV图像队列yuvque，该队列用于存储视频解码后的YUV图像及自定义渲染数据；并通过一个回调函数cbDisplayFun在屏幕刷新时检测当前Audio的播放时间戳acurpts，并将yuvque中所有时间戳PTS小于等于acurpts的YUV图像渲染到屏幕上；
S33、创建2个MessageChannel mc1和mc2，其中mc1用于视频帧数据和自定义渲染数据通信，mc2用于音频帧数据通信；
S34、创建音视频帧接收线程WebWorker1，创建后暂时先不链接服务器，待后续资源准就绪后再传输数据流；设置mc1.port1为视频帧数据发送端，设置mc2.port1为音频帧数据发送端；
S35、创建视频解码线程WebWorker2，绑定mc1.port2为视频帧接收端；创建音频解码线程WebWorker3，绑定mc2.port2为音频帧接收端；
S36、创建WebAudio，使用默认参数对播放设备进行初始化，并调用resume()接口使能声音播放；
S37、等待WebWorker2和WebWorker3中的wasm初始化完毕后，通知WebWorker1链接视频服务器进行视频流传输；
S38、当WebWorker1接收到数据后，解析出其中的音视频帧及自定义渲染数据。
6.根据权利要求5所述的基于HTML5的WEB音视频自定义渲染方法，其特征在于，步骤S38具体包括：
S381、如果是视频帧，则发送到视频解码模块，解码完成后，将YUV图像发送到UI线程，并按照YUV图像的显示时间戳PTS升序排序存储到yuvque，cbDisplayFun回调中通过检测音频播放时间戳将图像帧及自定义数据渲染到屏幕上；
S382、如果是音频帧，则发送到音频解码模块，解码完毕后，将PCM数据发送到UI线程，如果音频参数与WebAudio初始化参数一致，则直接进行音频数据播放，如果音频参数与WebAudio初始化参数不一致，重新初始化WebAudio后，再进行音频数据播放。
7.根据权利要求6所述的基于HTML5的WEB音视频自定义渲染方法，其特征在于，还包括步骤：
S39、当用户离开页面时，按照以下顺序清理资源：关闭WebWorker1、WebWorker2、WebWorker3，取消cbDisplayFun注册，关闭mc1.port、mc2.port、WebAudio、WebGL，清空yuvque。
CN202011161151.7A 2020-10-26 2020-10-26 基于html5的web音视频自定义渲染方法 Pending CN112423100A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011161151.7A CN112423100A (zh) 2020-10-26 2020-10-26 基于html5的web音视频自定义渲染方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011161151.7A CN112423100A (zh) 2020-10-26 2020-10-26 基于html5的web音视频自定义渲染方法

Publications (1)

Publication Number Publication Date
CN112423100A true CN112423100A (zh) 2021-02-26

Family

ID=74841727

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011161151.7A Pending CN112423100A (zh) 2020-10-26 2020-10-26 基于html5的web音视频自定义渲染方法

Country Status (1)

Country Link
CN (1) CN112423100A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114095784A (zh) * 2021-11-19 2022-02-25 浩云科技股份有限公司 H.265格式视频流转码播放方法、系统、设备及介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105357545A (zh) * 2015-11-03 2016-02-24 北京英梅吉科技有限公司 基于流媒体方式的无线同屏方法及装置
CN109088887A (zh) * 2018-09-29 2018-12-25 北京金山云网络技术有限公司 一种流媒体解码的方法及装置
CN111083167A (zh) * 2019-12-31 2020-04-28 深圳市思博慧数据科技有限公司 一种跨浏览器的h.265视频播放方法

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105357545A (zh) * 2015-11-03 2016-02-24 北京英梅吉科技有限公司 基于流媒体方式的无线同屏方法及装置
CN109088887A (zh) * 2018-09-29 2018-12-25 北京金山云网络技术有限公司 一种流媒体解码的方法及装置
CN111083167A (zh) * 2019-12-31 2020-04-28 深圳市思博慧数据科技有限公司 一种跨浏览器的h.265视频播放方法

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN114095784A (zh) * 2021-11-19 2022-02-25 浩云科技股份有限公司 H.265格式视频流转码播放方法、系统、设备及介质
CN114095784B (zh) * 2021-11-19 2024-02-09 浩云科技股份有限公司 H.265格式视频流转码播放方法、系统、设备及介质

Similar Documents

Publication Publication Date Title
CN110324671B (zh) 网页视频播放方法及装置、电子设备及存储介质
US20170311006A1 (en) Method, system and server for live streaming audio-video file
CN112422508A (zh) 一种在浏览器网页中播放视频的方法及系统
CN101505365B (zh) 一种基于网络电视机顶盒的实时视频监控系统的实现方法
CN109889907B (zh) 一种基于html5的视频osd的显示方法及装置
CN102026017B (zh) 一种视频解码高效测试方法
CN112653700B (zh) 一种基于webrtc网页视频通信的方法
CN110446114B (zh) 多媒体数据的处理装置、方法、电子设备及存储介质
CN112073809B (zh) 一种支持浏览器播放任意编码格式视频的方法
CN111147947B (zh) 一种基于websocket的flv视频传输及网页播放的方法
CN110012333A (zh) 将视频流中的视频帧传送到显示器的方法及相应装置
CN109640108A (zh) 基于文档类直播交互数据和音视频数据同步方法和系统
CN110996160A (zh) 视频处理方法、装置、电子设备及计算机可读取存储介质
CN112312221B (zh) 一种音视频播放方法、存储介质及装置
CN113938470B (zh) 一种浏览器播放rtsp数据源的方法、装置以及流媒体服务器
CN112423100A (zh) 基于html5的web音视频自定义渲染方法
CN114466246A (zh) 一种视频处理方法及其装置
CN105592081A (zh) 一种终端与服务器之间的视频转换方法
US20160142784A1 (en) System and method for providing cloud based user interfaces
CN106254962A (zh) 一种直播客户端快速启动播放的方法及系统
CN102098572B (zh) 基于flash的自定义流媒体嵌入与播放系统及其实现方法
CN115134617A (zh) 直播质检系统、方法、Web服务器及存储介质
CN105812922A (zh) 多媒体文件数据的处理方法及系统、播放器和客户端
CN106851134B (zh) 传输图像数据的方法、装置及系统
CN113573100B (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
TA01 Transfer of patent application right
TA01 Transfer of patent application right

Effective date of registration: 20211220

Address after: 518000 B901, Shenzhen national engineering laboratory building, No. 20, Gaoxin South seventh Road, high tech Zone community, Yuehai street, Nanshan District, Shenzhen, Guangdong

Applicant after: Shenzhen compuchip Information Technology Co.,Ltd.

Address before: 518000 Building 201, No. 1, Qianwan Road, Qianhai Shenzhen-Hong Kong Cooperation Zone, Shenzhen, Guangdong Province (Admitted to Shenzhen Qianhai Business Secretary Co., Ltd.)

Applicant before: SHENZHEN VCLUSTERS INFORMATION TECHNOLOGY Co.,Ltd.

RJ01 Rejection of invention patent application after publication
RJ01 Rejection of invention patent application after publication

Application publication date: 20210226