js处理video的某一帧转化成图片
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js处理video的某一帧转化成图片相关的知识,希望对你有一定的参考价值。
请问,有没有知道怎取出video视屏的一帧数据,base64数据格式的,可以转化为图片。具体就是点击按钮。可以console.log()该视屏的当前的图片的base64,用于上传服务器。canvas可以做类似截屏,但是不是要这种。不知道有没有描述清楚。求大神。拜托拜托。大神你在哪里?求救啊
前提是web开发。
Video.js 截图
流媒体服务有一项功能是抓图,也就是从正在播放的视频流中获取图片。这个功能可以在服务
端实现,具体的思路也比较简单从视频流中获取一帧关键帧,解码后保存成一张图片并推送给请求
客户端就可以了。服务端实现简单但存在一个缺点-:实时性不高。经常抓到的图是数秒以后的图片。
其原因是客户端有播放延时,一般情况下公网下Web客户端播放rtmp及rtsp流延时在1-2S之间,播放
hls流延时在3-5S,这就意味着从正在播放的rtmp及rtsp流中抓图,基本上是1-2S以后的图片,从正
在播放的hls流抓图 基本上是3-5秒以后图片。为此,再提供一种抓图模式:Web前端抓图。
H5 可以直接利用“video标签” 截图,基本代码如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>视频截图</title> <script> window.onload = function () { var button = document.querySelectorAll(‘.screen‘)[0]; var video = document.querySelectorAll(‘video‘)[0]; var canvas = document.querySelectorAll(‘canvas‘)[0]; var ctx = canvas.getContext(‘2d‘); var width = 640; var height = 480; canvas.width = width; canvas.height = height; video.src = ”http://192.168.1.102:12345/cgmedia/hls/getstream/addr=live/34020000001320000001@192.168.1.64_5060/34020000001320000001@192.168.1.64_5060.m3u8“; video.width = width; video.height = height; video.controls = true; video.autoplay = true; button.onclick = function () { ctx.drawImage(video, 0, 0, width, height); }; }; </script> </head> </html>
如果视频使用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
以上是关于js处理video的某一帧转化成图片的主要内容,如果未能解决你的问题,请参考以下文章