###前提・実現したいこと
canvas上で動画を重ねて表示したいと考えています。
何の処理もしていない動画(#v)の上に
クロマキー処理をした動画(#v2)を表示したいと思っています。
###発生している問題
個々の操作はできるのですが、組合わせ方がわかりません。
###HTML クロマキー処理
<<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Chroma key</title> <style type="text/css"> #v{ display:none; } </style> </head> <body> <video controls id="v" width="480" height="270"> <source src="movie.mp4" width="480" height="270"> </video> <div id="screen"> <canvas id="c" width="480" height="270"></canvas> </div> <div class="kouka"> <button onClick="playVideo()">play/stop</button> <button onClick="restart()">restart</button> </div> <div> <video id="v2" width="160px" height="90px" autoplay src="m1.mp4.mp4" loop ></video> <span>不透明度</span> <input type="range" id="opacity1" min="0" max="100" step="1" > <span id="opacityvalue1"></span> </div> <script type="text/javascript" > var video = document.getElementById("v2"); var canvas = document.getElementById("c"); var context = canvas.getContext('2d'); //opacity値の出力 opacity1.oninput = e => opacityvalue1.textContent = opacity1.value; // r,g,bというkeyを持ったobjectが第一引数と第二引数に渡される想定 function getColorDistance(rgb1, rgb2) { // 三次元空間の距離が返る return Math.sqrt( Math.pow((rgb1.r - rgb2.r), 2) + Math.pow((rgb1.g - rgb2.g), 2) + Math.pow((rgb1.b - rgb2.b), 2) ); }; // videoの映像をcanvasに描画する function draw() { //グラフィックをクリア context.clearRect(0, 0, canvas.width, canvas.height); //opacity(alpha)値を設定 context.globalAlpha = opacity1.value/100; context.drawImage(video, 0, 0, canvas.width, canvas.height); // ここでクロマキー処理をする chromaKey(); requestAnimationFrame(draw); }; // 消す色と閾値 var chromaKeyColor = {r: 0, g: 0, b: 0}, colorDistance = 30; // クロマキー処理 function chromaKey() { var imageData = context.getImageData(0, 0, canvas.width, canvas.height), data = imageData.data; // dataはUint8ClampedArray // 長さはcanvasの width * height * 4(r,g,b,a) // 先頭から、一番左上のピクセルのr,g,b,aの値が順に入っており、 // 右隣のピクセルのr,g,b,aの値が続く // n から n+4 までが1つのピクセルの情報となる for (var i = 0, l = data.length; i < l; i += 4) { var target = { r: data[i], g: data[i + 1], b: data[i + 2] }; // chromaKeyColorと現在のピクセルの三次元空間上の距離を閾値と比較する // 閾値より小さい(色が近い)場合、そのピクセルを消す if (getColorDistance(chromaKeyColor, target) < colorDistance) { // alpha値を0にすることで見えなくする data[i + 3] = 0; } } // 書き換えたdataをimageDataにもどし、描画する imageData.data = data; context.putImageData(imageData, 0, 0); }; draw(); </script> </body> </html>
###HTML 動画のの再生処理
//play/stopボタンの設定 function playVideo(){ var video = document.getElementById("v"); if(video.paused){ video.play(); }else{ video.pause(); } setInterval(function(){ var canvas = document.getElementById("c"); canvas.getContext("2d").drawImage(video, 0, 0, 480, 270); }, 1000/30); } //restartボタンの設定 function restart() { var video = document.getElementById("v"); video.currentTime = 0; }
###補足情報(言語/FW/ツール等のバージョンなど)
わかる方がいらっしゃいましたら教えていただけると幸いです。
よろしくお願い致します。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。