基于HTML5的WEB音视频自定义渲染方法技术

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

【技术实现步骤摘要】
基于HTML5的WEB音视频自定义渲染方法


[0001]本专利技术涉及音视频处理
，尤其是涉及一种基于HTML5的WEB音视频自定义渲染方法。

技术介绍

[0002]HTML5中虽然提供了video标签，可支持H.264+AAC的MP4、VP8+Vorbis的WebM等视频文件播放，但是编码格式支持有限且画面渲染被封装到了浏览器内部，对外只提供播放、暂停、停止、快进、快退等API接口，无法满足在原始视频的特定帧上进行自定义内容渲染，如在视频AI分析系统的交互界面上，一般会将检测到的目标使用框进行标记、已识别的目标会添加文字说明等。当前在需要进行自定义渲染视频的应用中，PC端一般采用C/S架构进行开发，移动端一般采用Native API进行开发。现有技术缺少直接使用浏览器访问、不需要安装的自定义渲染音视频方案，本专利技术基于此而研发。
[0003]下面对原理及相关技术进行说明：
[0004]1、HTML5是W3C发布的最新HTML标准，新增了音视频、Canvas绘图、WebWorker、WebSocket等新特性。其中WebWorker允许Javascript有多个线程，但不能在WebWorker中访问DOM对象，WebWorker一般使用MessageChannel与其他线程进行通信；WebSocket是基于TCP的全双工通信协议，允许客户端与服务器之间进行长链接及双向通信。
[0005]2、WebAssembly/wasm是一个由主流浏览器厂商组成的W3C社区团体制定的新规范，可移植、体积小、加载快并且兼容Web的全新二进制格式，具有高效、安全、开放、标准等特点。通过Emscripten SDK，可以将C、C++等语言编写的代码编译成wasm文件，并导出供JavaScript调用的接口。当前主流浏览器均已支持wasm 1.0规范。
[0006]3、FFMPEG是一个使用C语言实现的开源、跨平台多媒体框架，包含音视频编解码、复用及解复用、图像转换等功能模块。几乎支持所有格式的音视频解码。
[0007]4、WebGL是由Khronos组织制定的基于OpenGL ES的Web版本的2D、3D图形接口，HTML5中使用cavans元素提供对应的Javascript API接口。通过WebGL我们可以将YUV格式的图像渲染到屏幕上，并可以在屏幕上进行画框、贴图、文字显示等。

技术实现思路

[0008]本专利技术正是针对上述存在的问题，提出一种基于HTML5的WEB音视频自定义渲染方法。
[0009]为实现上述目的，本专利技术的具体技术方案如下：
[0010]一种基于HTML5的WEB音视频自定义渲染方法，包括步骤：
[0011]S1、Web端接收需要自定义渲染的音视频帧数据及渲染内容；
[0012]S2、通过FFMPEG导出导wasm接口将音视频帧数据解码成PCM数据和YUV图像；
[0013]S3、通过WebAudio和WebGL进行音视频自定义渲染。
[0014]本专利技术的上述方法，用于整体Web端接收及自定义渲染，涵盖音视频帧数据端解码
部分。
[0015]优选地，所述步骤S3具体包括：
[0016]S31、创建Canvas对象，初始化WebGL，包含YUV图像渲染、自定义内容渲染需要用到的资源；
[0017]S32、创建一个YUV图像队列yuvque，该队列用于存储视频解码后的YUV图像及自定义渲染数据；并通过一个回调函数在屏幕刷新时检测当前Audio的播放时间戳acurpts(例如，通过requestAnimationFrame接口注册一个回调函数cbDisplayFun，该回调函数用于在屏幕刷新时检测当前Audio的播放时间戳acurpts)，并将yuvque中所有时间戳PTS小于等于acurpts的YUV图像渲染到屏幕上；
[0018]S33、创建2个MessageChannel mc1和mc2，其中mc1用于视频帧数据和自定义渲染数据通信，mc2用于音频帧数据通信；
[0019]S34、创建音视频帧接收线程WebWorker1，创建后暂时先不链接服务器，待后续资源准就绪后再传输数据流；设置mc1.port1为视频帧数据发送端，设置mc2.port1为音频帧数据发送端；
[0020]S35、创建视频解码线程WebWorker2，绑定mc1.port2为视频帧接收端；创建音频解码线程WebWorker3，绑定mc2.port2为音频帧接收端；
[0021]这两个WebWorker都需要加载wasm资源，一般耗时较久，WebWoker1需要在这两个woker资源加载完毕后进行数据传输。
[0022]S36、创建WebAudio，使用默认参数对播放设备进行初始化，并调用resume()接口使能声音播放；
[0023]S37、等待WebWorker2和WebWorker3中的wasm初始化完毕后，通知WebWorker1链接视频服务器进行视频流传输；
[0024]S38、当WebWorker1接收到数据后，解析出其中的音视频帧及自定义渲染数据(自定义渲染数据跟随帧数据一起传输到下一模块)。
[0025]优选地，步骤S38具体包括：
[0026]S381、如果是视频帧，则发送到视频解码模块，解码完成后，将YUV图像发送到UI线程，并按照YUV图像的显示时间戳PTS升序排序存储到yuvque，cbDisplayFun回调中通过检测音频播放时间戳(需要将acurpts与视频帧PTS转换为统一的单位和基准)将图像帧及自定义数据渲染到屏幕上；
[0027]S382、如果是音频帧，则发送到音频解码模块，解码完毕后，将PCM数据发送到UI线程，如果音频参数与WebAudio初始化参数一致，则直接进行音频数据播放，如果音频参数与WebAudio初始化参数不一致，重新初始化WebAudio后，再进行音频数据播放。
[0028]优选地，上述还包括如下步骤：
[0029]S39、当用户离开页面时，按照以下顺序清理资源：关闭WebWorker1、WebWorker2、WebWorker3，取消cbDisplayFun注册，关闭mc1.port、mc2.port、WebAudio、WebGL，清空yuvque。
[0030]本专利技术还提供另一种基于HTML5的WEB音视频自定义渲染方法，该方法只涉及音视频渲染时的过程，相当于子过程，与前述的音视频接收、及解码等整体过程区别开来，具体包括步骤：
[0031]S31、创建Canvas对象，初始化WebGL，包含YUV图像渲染、自定义内容渲染需要用到到资源；
[0032]S32、创建一个YUV图像队列yuvque，该队列用于存储视频解码后的YUV图像及自定义渲染数据；并通过一个回调函数cbDisplayFun在屏幕刷新时检测当前Audio的播放时间戳acurpts(例如，通过requestAni本文档来自技高网...

【技术保护点】

【技术特征摘要】
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、WebWor...

【专利技术属性】
技术研发人员：汪云，刘毅，王涛，
申请(专利权)人：深圳市瑞驰信息技术有限公司，
类型：发明
国别省市：