Video.js 截圖 Failed to execute 'drawImage' on 'CanvasRenderingContext2D'
阿新 • • 發佈：2020-08-04
流媒體服務有一項功能是抓圖，也就是從正在播放的視訊流中獲取圖片。這個功能可以在服務
端實現，具體的思路也比較簡單從視訊流中獲取一幀關鍵幀，解碼後儲存成一張圖片並推送給請求
客戶端就可以了。服務端實現簡單但存在一個缺點-：實時性不高。經常抓到的圖是數秒以後的圖片。
其原因是客戶端有播放延時，一般情況下公網下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/[email protected]_5060/[email protected]_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]
否則會獲取圖片失敗，報“Failedtoexecute'drawImage'on'CanvasRenderingContext2D':Theprovidedvalue
isnotoftype'(CSSImageValueorHTMLImageElementorSVGImageElementorHTMLVideoElementor
HTMLCanvasElementorImageBitmaporOffscreenCanvas)'錯誤。
如需交流可加QQ群766718184，1038388075 或者QQ3501870，
視訊下載地址：http://www.chungen90.com/?news_3/
Demo下載地址：http://www.chungen90.com/?news_2