流媒體服務有一項功能是抓圖，也就是從正在播放的視頻流中獲取圖片。這個功能可以在服務
端實現，具體的思路也比較簡單從視頻流中獲取一幀關鍵幀，解碼后保存成一張圖片並推送給請求
客戶端就可以了。服務端實現簡單但存在一個缺點-：實時性不高。經常抓到的圖是數秒以后的圖片。
其原因是客戶端有播放延時，一般情況下公網下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_33/
Demo下載地址： http://www.chungen90.com/?news_34