Video.js 截图

Posted 王纲

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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

以上是关于Video.js 截图的主要内容，如果未能解决你的问题，请参考以下文章

Video.js 控件显示奇怪，为啥？

如何在 Android 片段中禁用屏幕截图？

在当前的android片段中禁用屏幕截图[重复]

html5 video.js 使用及兼容所有浏览器

如何使用 video.js 播放 .swf 文件？

webpack 与 video.js 一同使用的一些坑