キャンバスオーバーレイでビデオからスクリーンショットを作る

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); 

ありがとう