###前提・実現したいこと
javascriptを使用して
動画をリアルタイムに処理できるようなものを作りたいと考えています。
###発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read property 'getContext' of null at grayscale (script.js:30) at HTMLButtonElement.onclick (index.html:64)
###該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>映像とキャンバスを同期</title> 6 7 8 <style type="text/css"> 9#v{ 10 display:none; 11} 12#screen{ 13 width:480px; 14 height:270px; 15 background-color:#000000; 16} 17button{ 18 width:100px; 19 height:50px; 20} 21 </style> 22 </head> 23 <body> 24 <video controls id="v" width="480" height="270"> 25 <source src="movie.mp4" width="480" height="270"> 26 </video> 27 28 <div id="screen"> 29 <canvas id="c" width="480" height="270"></canvas> 30 </div> 31 <script type="text/javascript" src="script.js"></script> 32 33 <button onClick="playVideo()">play/stop</button> 34 <button onClick="restart()">restart</button> 35 <button onClick="grayscale()">grayscale</button> 36 </body> 37</html>
javascript
1//play/stopボタンの設定 2function playVideo(){ 3 var video = document.getElementById("v"); 4 if(video.paused){ 5 video.play(); 6 }else{ 7 video.pause(); 8 } 9 setInterval(function(){ 10 var canvas = document.getElementById("c"); 11 canvas.getContext("2d").drawImage(video, 0, 0, 480, 270); 12 }, 1000/30); 13} 14 15 16//restartボタンの設定 17function restart() { 18 var video = document.getElementById("v"); 19 video.currentTime = 0; 20} 21 22//グレースケールボタンの設定 23function grayscale(){ 24 // 対象のCanvasを取得し、contextも取得する。 25 var canvas = document.querySelector("c"); 26 var context = canvas.getContext("2d"); 27 28 // Canvasから描画内容を保持するimageDataを取得する。 29 var imageData = context.getImageData(0, 0, canvas.width, canvas.height); 30 31 // 描画内容に対して、上記のグレースケールにする式を当てはめながらrgbの値を計算する。 32 var d = imageData.data; 33 for (var i = 0; i < d.length; i+=4) { 34 var g = d[i] * 0.2126 + d[i+1] * 0.7152 + d[i+2] * 0.0722; 35 d[i] = d[i+1] = d[i+2] = g; 36 // d[i+3]に格納されたα値は変更しない 37 } 38 39 40 // 計算結果でCanvasの表示内容を更新する。 41 context.putImageData(imageData, 0, 0); 42 43 /* 44 setInterval(function(){ 45 var canvas = document.getElementById("c"); 46 canvas.getContext("2d").drawImage(video, 0, 0, 480, 270); 47 48 }, 1000/30); 49 */ 50}
###試したこと
webサーバを作らないと難しいということは分かったのですが作り方がわからず苦戦しています。
エラーメッセージについても調べてみたのですが解決策がわからず苦戦しています。
解決策を教えていただけると幸いです。
よろしくお願い致します。
###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/26 09:00
2017/10/26 09:22 編集
2017/11/06 05:31
2017/11/06 05:36
2017/11/10 09:37