一种提升高分辨率视频流截图速度的方法与流程

1.本发明涉及浏览器技术领域，尤其涉及一种提升高分辨率视频流截图速度的方法。


背景技术：

2.浏览器的canvas api具有drawimage()方法，可以将视频标签《video/》代表的元素绘制到《canvas/》标签代表的画布元素上；还具有todataurl()方法，可以将画布元素的内容转化为base64格式的截图信息。在进行截图时，如不对画布元素上的内容进行失真压缩等操作，直接将整张画布执行todataurl()方法来获取base64格式的截图信息，内容分辨率越高，视频流卡顿及闪烁现象越严重。
3.因此，现有技术存在缺陷，需要改进。


技术实现要素：

4.本发明要解决的技术问题是：提供一种提升高分辨率视频流截图速度的方法，大幅提升用户使用浏览器进行视频流截图的体验。
5.本发明的技术方案如下：提供一种提升高分辨率视频流截图速度的方法，主线程对videoelement进行绘制操作，将视频流当前帧绘制到canvas(画布)上，进行分割画布操作，获得分割后的每个区域的图像信息；每个图像格式转换子线程分别将一个区域的图像信息绘制到offscreencanvas上，进行格式转换，转换成blob格式，再次进行格式转换，转换成base64格式；主线程执行对应子线程的onmessage回调函数获取图片信息；合并图像子线程执行onmessage回调函数从主线程处获取所有图片信息，合并图片，获得最终截图。
6.所述提升高分辨率视频流截图速度的方法具体包括以下步骤。
7.s1：通过浏览器的document的createelement()方法，定义一个htmlcanvaselement类型的常量，命名为canvas，即为画布；并通过canvas的getcontext()方法得到一个canvasrenderingcontext2d类型的常量，命名为ctx。
8.s2：指定需要进行截图的htmlvideoelement类型元素，命名为videoelement，将videoelement的高和宽，命名为videoheight和videowidth，将videoelement的高和宽赋值给画布的高和宽，即height属性和width属性。
9.s3：主线程通过ctx的drawimage()方法，传入videoelement、画布绘制起始坐标、画布绘制结束坐标，对videoelement进行截图，并将截取的帧绘制在画布上。
10.s4：将画布分割成n个区域，所述的区域为相同的长方形，分别将n个区域的画布信息数据命名为imagedata[1-n]，分别通过ctx.getimagedata(sx,sy,sw,sh)方法返回的imagedata对象对imagedata[1-n]赋值；sx和sy代表起点的横坐标和纵坐标，sw和sh代表当前分割画布的宽和高；例如，将画布进行十字分割成均匀的四块，4个区域的画布信息数据的命名分别为imagedata[1]、imagedata[2]、imagedata[3]、imagedata[4]；四块分割画布的sx、sy、sw、sh的起点坐标分别为(0,0)、(width/2,0)、(0,height/2)、(width/2,height/
2)，宽和高均为width/2和height/2。
[0011]
s5：创建n个用于分别执行所分割画布内容转化为base64格式的web workers文件，分别命名为takephotoworker[1-n].js，为图像格式转换子线程；再创建1个用于将n个base64格式数据合并为最终所需的base64格式数据的整张图片的web workers文件，命名为combineworker.js，为合并图像子线程。以分割成4个区域为例，4个图像格式转换子线程分别为takephotoworker[1].js、takephotoworker[2].js、takephotoworker[3].js、takephotoworker[4].js。
[0012]
s6：分别执行takephotoworker[1-n]的postmessage(imagedata[1-n])方法，将主线程的画布信息数据传至图像格式转换子线程。
[0013]
s7：在主线程中定义n个worker实例，传入takephotoworker[1-n].js的路径地址作为参数，命名为takephotoworker[1-n]；再定义1个worker实例，传入combineworker.js的路径地址作为参数，命名为combineworker。
[0014]
s8：分别在图像格式转换子线程takephotoworkers[1-n].js里创建offscreencanvas实例，传入画布宽和高为分割后的区域的宽和高，以步骤s4中分割成4块为例，分割后的区域的宽和高为(width/2、height/2)，命名为offscreen；这里使用offscreencanvas而不是浏览器的document的createelement()方法定义一个htmlcanvaselement类型的常量，是因为后者在web worker环境不能使用；然后通过offscreencanvas.getcontext()方法得到一个offscreencanvasrenderingcontext2d类型的常量，命名为octx。
[0015]
s9：分别在takephotoworker[1-n].js里建立onmessage回调函数，函数内用于监听主线程传入的分割图片数据imagedata[1-n]并执行格式转化处理。
[0016]
s10：在onmessage函数上监听到数据传入时，通过参数e中获取数据e.data，该数据就是在主线程的imagedata[1-n]进行拷贝后的数据；执行octx的putimagedata(e.data,0,0)方法以将各个分割画布内容绘制到画布上。
[0017]
s11：执行offscreen.converttoblob()方法得到一个promise对象，promise对象返回一个blob对象，命名为blob，代表为blob格式的图像内容。
[0018]
s12：定义一个filereader实例，命名为reader。
[0019]
s13：执行reader.readasdataurl(blob)方法，则在reader的onload回调函数里，通过reader.result获取blob格式转为base64格式的图像内容，命名为dataurl。
[0020]
s14：执行postmessage(dataurl)，可以将base64格式的图像内容从子线程传回主线程。
[0021]
s15：定义n块区域画布的序号，命名为index；在主线程的takephotoworker[1-n]各自的onmessage回调函数里，通过参数e可以获得回传的dataurl；再通过combineworker的postmessage({dataurl,index,width,height})方法可将其传至处理合并图片的合并图像子线程。
[0022]
s16：在合并图像子线程combineworker.js里建立onmessage回调函数，函数用于监听主线程传入的dataurl并执行合并处理。
[0023]
s17：引入第三方库merge-base64，待所有分割图片内容的dataurl传入后，执行其mergeimages方法，将dataurl、图像宽高、图像起始点坐标信息作为参数传入，返回一个
promise对象，promise对象包含一个blob对象，命名为finaldataurl，即得到的最终合并后的图像结果。
[0024]
进一步地，在步骤s3中，画布绘制起始坐标为坐标系原点(0,0)，画布绘制结束坐标为为画布的高和宽，即画布的height属性和width属性。
[0025]
进一步地，在步骤s4中，画布通过横线和/或竖线进行分割。比如分割成4块时，可以采用3条横线分割成4块，也可以采用竖线分割成4块，也可以采用一条横线、一条竖线十字交叉分割成4块。
[0026]
进一步地，本发明方法基于浏览器的web workers api和canvas api。
[0027]
采用上述方案，本发明提供一种提升高分辨率视频流截图速度的方法，采用web workers api，将画布内容分割成多块后，可将其分配给多个子线程进行blob格式转化再进行base64格式转化，转化完毕后通过引入第三方库进行base64编码合并从而得到最终所需完整的截图信息。能够不对主线程进行阻塞，大大减少卡顿及闪烁现象，且多线程分块处理图片转化，能够大大提高高分辨率视频流截图的速度，能够很好的解决内容分辨率越高时，视频流播放卡顿及闪烁现象越严重的问题。
附图说明
[0028]
图1为本发明的一实施例的方法流程图。
具体实施方式
[0029]
以下结合附图和具体实施例，对本发明进行详细说明。
[0030]
请参阅图1，本实施例提供一种提升高分辨率视频流截图速度的方法，主线程对videoelement进行绘制操作，将视频流当前帧绘制到canvas(画布)上，进行分割画布操作，获得分割后的每个区域的图像信息；每个图像格式转换子线程分别将一个区域的图像信息绘制到offscreencanvas上，进行格式转换，转换成blob格式，再次进行格式转换，转换成base64格式；主线程执行对应子线程的onmessage回调函数获取图片信息；合并图像子线程执行onmessage回调函数从主线程处获取所有图片信息，合并图片，获得最终截图。
[0031]
所述提升高分辨率视频流截图速度的方法具体包括以下步骤。
[0032]
s1：通过浏览器的document的createelement()方法，定义一个htmlcanvaselement类型的常量，命名为canvas，即为画布；并通过canvas的getcontext()方法得到一个canvasrenderingcontext2d类型的常量，命名为ctx。
[0033]
s2：指定需要进行截图的htmlvideoelement类型元素，命名为videoelement，将videoelement的高和宽，命名为videoheight和videowidth，将videoelement的高和宽赋值给画布的高和宽，即height属性和width属性。
[0034]
s3：主线程通过ctx的drawimage()方法，传入videoelement、画布绘制起始坐标、画布绘制结束坐标，对videoelement进行截图，并将截取的帧绘制在画布上。
[0035]
s4：将画布分割成n个区域，所述的区域为相同的长方形，分别将n个区域的画布信息数据命名为imagedata[1-n]，分别通过ctx.getimagedata(sx,sy,sw,sh)方法返回的imagedata对象对imagedata[1-n]赋值；sx和sy代表起点的横坐标和纵坐标，sw和sh代表当前分割画布的宽和高；在本实施例中，将画布进行十字分割成均匀的四块，4个区域的画布
信息数据的命名分别为imagedata[1]、imagedata[2]、imagedata[3]、imagedata[4]；四块分割画布的sx、sy、sw、sh的起点坐标分别为(0,0)、(width/2,0)、(0,height/2)、(width/2,height/2)，宽和高均为width/2和height/2。
[0036]
s5：创建n个用于分别执行所分割画布内容转化为base64格式的web workers文件，分别命名为takephotoworker[1-n].js，为图像格式转换子线程；再创建1个用于将n个base64格式数据合并为最终所需的base64格式数据的整张图片的web workers文件，命名为combineworker.js，为合并图像子线程。本实施例分割成4个区域，4个图像格式转换子线程分别为takephotoworker[1].js、takephotoworker[2].js、takephotoworker[3].js、takephotoworker[4].js。
[0037]
s6：分别执行takephotoworker[1-n]的postmessage(imagedata[1-n])方法，将主线程的画布信息数据传至图像格式转换子线程。
[0038]
s7：在主线程中定义n个worker实例，传入takephotoworker[1-n].js的路径地址作为参数，命名为takephotoworker[1-n]；再定义1个worker实例，传入combineworker.js的路径地址作为参数，命名为combineworker。
[0039]
s8：分别在图像格式转换子线程takephotoworkers[1-n].js里创建offscreencanvas实例，传入画布宽和高为分割后的区域的宽和高，以步骤s4中分割成4块为例，分割后的区域的宽和高为(width/2、height/2)，命名为offscreen；这里使用offscreencanvas而不是浏览器的document的createelement()方法定义一个htmlcanvaselement类型的常量，是因为后者在web worker环境不能使用；然后通过offscreencanvas.getcontext()方法得到一个offscreencanvasrenderingcontext2d类型的常量，命名为octx。
[0040]
s9：分别在takephotoworker[1-n].js里建立onmessage回调函数，函数内用于监听主线程传入的分割图片数据imagedata[1-n]并执行格式转化处理。
[0041]
s10：在onmessage函数上监听到数据传入时，通过参数e中获取数据e.data，该数据就是在主线程的imagedata[1-n]进行拷贝后的数据；执行octx的putimagedata(e.data,0,0)方法以将各个分割画布内容绘制到画布上。
[0042]
s11：执行offscreen.converttoblob()方法得到一个promise对象，promise对象返回一个blob对象，命名为blob，代表为blob格式的图像内容。
[0043]
s12：定义一个filereader实例，命名为reader。
[0044]
s13：执行reader.readasdataurl(blob)方法，则在reader的onload回调函数里，通过reader.result获取blob格式转为base64格式的图像内容，命名为dataurl。
[0045]
s14：执行postmessage(dataurl)，可以将base64格式的图像内容从子线程传回主线程。
[0046]
s15：定义n块区域画布的序号，命名为index；在主线程的takephotoworker[1-n]各自的onmessage回调函数里，通过参数e可以获得回传的dataurl；再通过combineworker的postmessage({dataurl,index,width,height})方法可将其传至处理合并图片的合并图像子线程。
[0047]
s16：在合并图像子线程combineworker.js里建立onmessage回调函数，函数用于监听主线程传入的dataurl并执行合并处理。
[0048]
s17：引入第三方库merge-base64，待所有分割图片内容的dataurl传入后，执行其mergeimages方法，将dataurl、图像宽高、图像起始点坐标信息作为参数传入，返回一个promise对象，promise对象包含一个blob对象，命名为finaldataurl，即得到的最终合并后的图像结果。
[0049]
在本实施例中，在步骤s3中，画布绘制起始坐标为坐标系原点(0,0)，画布绘制结束坐标为为画布的高和宽，即画布的height属性和width属性。
[0050]
在本实施例中，在步骤s4中，画布通过横线和/或竖线进行分割。
[0051]
在本实施例中，本方法基于浏览器的web workers api和canvas api。
[0052]
综上所述，本发明提供一种提升高分辨率视频流截图速度的方法，采用web workers api，将画布内容分割成多块后，可将其分配给多个子线程进行blob格式转化再进行base64格式转化，转化完毕后通过引入第三方库进行base64编码合并从而得到最终所需完整的截图信息。能够不对主线程进行阻塞，大大减少卡顿及闪烁现象，且多线程分块处理图片转化，能够大大提高高分辨率视频流截图的速度，能够很好的解决内容分辨率越高时，视频流播放卡顿及闪烁现象越严重的问题。
[0053]
以上仅为本发明的较佳实施例而已，并不用于限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。

技术特征：
1.一种提升高分辨率视频流截图速度的方法，其特征在于，主线程对videoelement进行绘制操作，将视频流当前帧绘制到canvas上，进行分割画布操作，获得分割后的每个区域的图像信息；每个图像格式转换子线程分别将一个区域的图像信息绘制到offscreencanvas上，进行格式转换，转换成blob格式，再次进行格式转换，转换成base64格式；主线程执行对应子线程的onmessage回调函数获取图片信息；合并图像子线程执行onmessage回调函数从主线程处获取所有图片信息，合并图片，获得最终截图。2.根据权利要求1所述的一种提升高分辨率视频流截图速度的方法，其特征在于，具体包括以下步骤：s1：通过浏览器的document的createelement()方法，定义一个htmlcanvaselement类型的常量，命名为canvas，即为画布；并通过canvas的getcontext()方法得到一个canvasrenderingcontext2d类型的常量，命名为ctx；s2：指定需要进行截图的htmlvideoelement类型元素，命名为videoelement，将videoelement的高和宽，命名为videoheight和videowidth，将videoelement的高和宽赋值给画布的高和宽，即height属性和width属性；s3：主线程通过ctx的drawimage()方法，传入videoelement、画布绘制起始坐标、画布绘制结束坐标，对videoelement进行截图，并将截取的帧绘制在画布上；s4：将画布分割成n个区域，所述的区域为相同的长方形，分别将n个区域的画布信息数据命名为imagedata[1-n]，分别通过ctx.getimagedata(sx,sy,sw,sh)方法返回的imagedata对象对imagedata[1-n]赋值；sx和sy代表起点的横坐标和纵坐标，sw和sh代表当前分割画布的宽和高；s5：创建n个用于分别执行所分割画布内容转化为base64格式的web workers文件，分别命名为takephotoworker[1-n].js，为图像格式转换子线程；再创建1个用于将n个base64格式数据合并为最终所需的base64格式数据的整张图片的web workers文件，命名为combineworker.js，为合并图像子线程；s6：分别执行takephotoworker[1-n]的postmessage(imagedata[1-n])方法，将主线程的画布信息数据传至图像格式转换子线程；s7：在主线程中定义n个worker实例，传入takephotoworker[1-n].js的路径地址作为参数，命名为takephotoworker[1-n]；再定义1个worker实例，传入combineworker.js的路径地址作为参数，命名为combineworker；s8：分别在图像格式转换子线程takephotoworkers[1-n].js里创建offscreencanvas实例，传入画布宽和高为分割后的区域的宽和高，命名为offscreen；然后通过offscreencanvas.getcontext()方法得到一个offscreencanvasrenderingcontext2d类型的常量，命名为octx；s9：分别在takephotoworker[1-n].js里建立onmessage回调函数，函数内用于监听主线程传入的分割图片数据imagedata[1-n]并执行格式转化处理；s10：在onmessage函数上监听到数据传入时，通过参数e中获取数据e.data，该数据就是在主线程的imagedata[1-n]进行拷贝后的数据；执行octx的putimagedata(e.data,0,0)
方法以将各个分割画布内容绘制到画布上；s11：执行offscreen.converttoblob()方法得到一个promise对象，promise对象返回一个blob对象，命名为blob，代表为blob格式的图像内容；s12：定义一个filereader实例，命名为reader；s13：执行reader.readasdataurl(blob)方法，则在reader的onload回调函数里，通过reader.result获取blob格式转为base64格式的图像内容，命名为dataurl；s14：执行postmessage(dataurl)，可以将base64格式的图像内容从子线程传回主线程；s15：定义n块区域画布的序号，命名为index；在主线程的takephotoworker[1-n]各自的onmessage回调函数里，通过参数e可以获得回传的dataurl；再通过combineworker的postmessage({dataurl,index,width,height})方法可将其传至处理合并图片的合并图像子线程；s16：在合并图像子线程combineworker.js里建立onmessage回调函数，函数用于监听主线程传入的dataurl并执行合并处理；s17：引入第三方库merge-base64，待所有分割图片内容的dataurl传入后，执行其mergeimages方法，将dataurl、图像宽高、图像起始点坐标信息作为参数传入，返回一个promise对象，promise对象包含一个blob对象，命名为finaldataurl，即得到的最终合并后的图像结果。3.根据权利要求2所述的一种提升高分辨率视频流截图速度的方法，其特征在于，在步骤s3中，画布绘制起始坐标为坐标系原点(0,0)，画布绘制结束坐标为为画布的高和宽，即画布的height属性和width属性。4.根据权利要求2所述的一种提升高分辨率视频流截图速度的方法，其特征在于，在步骤s4中，画布通过横线和/或竖线进行分割。5.根据权利要求2所述的一种提升高分辨率视频流截图速度的方法，其特征在于，基于浏览器的web workers api和canvas api。

技术总结
本发明公开一种提升高分辨率视频流截图速度的方法，主线程对videoElement进行绘制操作，将视频流当前帧绘制到canvas上，进行分割画布操作，获得分割后的每个区域的图像信息；每个图像格式转换子线程分别将一个区域的图像信息绘制到OffscreenCanvas上，进行格式转换，转换成blob格式，再次进行格式转换，转换成base64格式；主线程执行对应子线程的onmessage回调函数获取图片信息；合并图像子线程执行onmessage回调函数从主线程处获取所有图片信息，合并图片，获得最终截图。本发明能够不对主线程进行阻塞，大大减少卡顿及闪烁现象，且多线程分块处理图片转化，能够大大提高高分辨率视频流截图的速度，能够很好的解决内容分辨率越高时，视频流播放卡顿及闪烁现象越严重的问题。严重的问题。严重的问题。


技术研发人员：王健 高斌 邹琼 周双全
受保护的技术使用者：深圳市瑞云科技股份有限公司
技术研发日：2023.07.13
技术公布日：2023/10/11