Video.js 截图

2021-01-14 07:14

阅读:578

YPE html>

标签:情况   set   dem   auto   idt   ext2   客户   原因   htm   

     流媒体服务有一项功能是抓图,也就是从正在播放的视频流中获取图片。这个功能可以在服务

端实现,具体的思路也比较简单从视频流中获取一帧关键帧,解码后保存成一张图片并推送给请求

客户端就可以了。服务端实现简单但存在一个缺点-:实时性不高。经常抓到的图是数秒以后的图片。

其原因是客户端有播放延时,一般情况下公网下Web客户端播放rtmp及rtsp流延时在1-2S之间,播放

hls流延时在3-5S,这就意味着从正在播放的rtmp及rtsp流中抓图,基本上是1-2S以后的图片,从正

在播放的hls流抓图 基本上是3-5秒以后图片。为此,再提供一种抓图模式:Web前端抓图。

     H5 可以直接利用“video标签” 截图,基本代码如下:

视频截图

    如果视频使用video.js播放请注意drawImage方法第一个参数不能直接传video,需要传video.childNodes[0] 

 否则会获取图片失败,报“Failed to execute ‘drawImage‘ on ‘CanvasRenderingContext2D‘: The provided  value

 is not of type ‘(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVide oElement or 

HTMLCanvasElement or ImageBitmap or OffscreenCanvas)‘错误。

如需交流可加QQ群766718184,1038388075 或者QQ3501870,

视频下载地址:http://www.chungen90.com/?news_3/

 Demo下载地址: http://www.chungen90.com/?news_2

Video.js 截图

标签:情况   set   dem   auto   idt   ext2   客户   原因   htm   

原文地址:https://www.cnblogs.com/wanggang123/p/13436120.html


评论


亲,登录后才可以留言!