캔버스 오버레이가있는 비디오에서 스크린 샷 만들기

Question

나는 html5 비디오와 그 위에 영향을주는 형제 캔버스 한 쌍을 가지고 있습니다. 구조는 다음과 같습니다.

<div id="container_video"> 
    <video id="video1" width="450" height="340" preload="auto"></video> 
    <canvas id="overlay" width="450" height="340"></canvas> 
    <canvas id="webgl" width="450" height="340"></canvas> 
</div> 

오버레이 캔버스가있는 전체 장면에서 스냅 사진을 만들고 싶습니다. 비디오를 캡처하기 만하면되지만 전체 장면은 캡처하지 않습니다.

어떻게해야합니까?

감사합니다.

Answer 1

<video id="video1" width="450" height="340" preload="auto"></video> 
<canvas id="overlay" width="450" height="340"></canvas> 
<canvas id="webgl" width="450" height="340"></canvas> 

canvas = document.createElement("canvas"); 
canvas.width = 450; 
canvas.height = 340; 
var ctx = canvas.getContext("2d"); 
var vid = document.getElementById("video1"); 
var over = document.getElementById("overlay"); 
var gl = document.getElementById("webgl"); 
ctx.drawImage(vid,0,0); 
ctx.drawImage(over,0,0); 
ctx.drawImage(gl,0,0); 

// canvas now contains the 3 elements as one image. 

동영상이로드되었는지 확인하고 원하는 탐색 위치에서 확인해야합니다. 이처럼, 나는 다른 방법을 시도

TypeError: canvas.getContext is not a function in 

var ctx = canvas.getContext("2d"); 

:

Answer 2

Blindman67 @ 내가 이렇게하면 내가 다음 오류를했습니다

작동하지 않습니다

var ctx_full = document.getElementById("canvas_full"); 
ctx = ctx_full.getContext("2d"); 

var vid = document.getElementById("video1"); 
var over = document.getElementById("overlay"); 
var gl = document.getElementById("webgl"); 

ctx.drawImage(vid,0,0); 
ctx.drawImage(over,0,0); 
ctx.drawImage(gl,0,0); 

그리고 나서 오류가 발생했습니다. "TypeError :

Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement, ImageBitmap. in ctx.drawImage(vid,0,0); 

감사합니다.