[发明专利]基于HTML5的WEB音视频自定义渲染方法

权利要求书

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。