[发明专利]一种截取WebRTC视频流当前帧图像的方法

说明书

本发明公开一种截取WebRTC视频流当前帧图像的方法，包括以下步骤。S1：通过浏览器的document的createElement()API，定义一个HTMLCanvasElement类型的常量canvas，作为画布使用；S2：通过canvas的getContext()API得到一个常量ctx；S3：指定需要进行截图的HTMLVideoElement类型元素videoElement，将其的videoHeight属性和videoWidth属性，赋值给canvas画布的height属性和width属性；S4：通过ctx的drawImage()API，传入videoElement、画布绘制起始坐标、画布绘制结束坐标，将视频截取的帧绘制在画布上；S5：执行画布canvas的ToDataURL()API，即得到截图。本发明能够很好的解决ImageCapture API无法被诸如Safari及Firefox以及许多移动端的浏览器所支持的问题，关键的两个API无论是drawImage()还是ToDataURL()，都能被所有主流浏览器所支持，从而很好的解决截取WebRTC视频流当前帧图像的问题。

技术领域

本发明涉及浏览器的WebRTC技术领域，尤其涉及一种截取WebRTC视频流当前帧图像的方法。

背景技术

浏览器的WebRTC API的MediaStreamTrack接口下的ImageCaptureAPI具有grabFrame()方法及takePhtoto()方法，使用这两个方法可分别获取ImageBitmap类型或Blob类型的图像信息。

目前各大主流浏览器对于grabFrame()方法及takePhtoto()方法的支持程度并不高，Safari及Firefox以及许多移动端的浏览器并不支持ImageCapture接口下的包括grabFrame()及takePhtoto()的所有API，且通过takePhoto()所得到的Blob类型信息需要再通过URL.createObjectURL()或createImageBitmap()方法进行进一步的图像信息转化，且各大主流浏览器对于createImageBitmap()的支持程度也不高，而Opera Mini也不支持URL.createObjectURL()。

因此，现有技术存在缺陷，需要改进。

发明内容

本发明要解决的技术问题是：提供一种截取WebRTC视频流当前帧图像的方法，方便用户对WebRTC视频流的当前帧进行截取，以便用户使用。

本发明的技术方案如下：提供一种截取WebRTC视频流当前帧图像的方法，基于浏览器的Canvas API和HTMLVideoElement，包括以下步骤。

S1：通过浏览器的document的createElement()API，定义一个HTMLCanvasElement类型的常量canvas，作为画布使用。

S2：通过canvas的getContext()API得到一个常量ctx。

S3：指定需要进行截图的HTMLVideoElement类型元素videoElement，将其的videoHeight属性和videoWidth属性，赋值给canvas画布的height属性和width属性。

S4：通过ctx的drawImage()API，传入videoElement、画布绘制起始坐标、画布绘制结束坐标，将视频截取的帧绘制在画布上。

S5：执行画布canvas的ToDataURL()API，即得到截图。

进一步地，画布绘制起始坐标为坐标系原点(0、0)，画布绘制结束坐标为画布的高和宽，即height属性和width属性。

进一步地，所述常量ctx为CanvasRenderingContext2D类型。