javascriptを使用した動画のリアルタイム処理のやり方

###前提・実現したいこと
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}

###試したこと
ｗｅｂサーバを作らないと難しいということは分かったのですが作り方がわからず苦戦しています。
エラーメッセージについても調べてみたのですが解決策がわからず苦戦しています。
解決策を教えていただけると幸いです。
よろしくお願い致します。

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

行動規範の内容に同意します

回答1件

ベストアンサー

document.querySelector("c")では<c>というタグを探していることになります。正しくは
document.querySelector("#c")またはdocument.getElementById("c")です。他の部分の動作はわかりませんが、今提示されているエラーはこれで消えるはずです。

追記

ローカルのHTMLファイルを直接開いてcross-originでハマっているようなので解決法を貼っておきます。Chromeの起動オプションに–allow-file-access-from-filesをつけることでローカルの実行でもcross-origin問題を解決できるようです。
http://www.finefinefine.jp/howto/kiji861/

投稿2017/10/26 08:49

編集2017/11/06 05:36

masaya_ohashi

総合スコア9206

west826

2017/10/26 09:00

ありがとうございます。上記のエラーメッセージは解決しました。直してやってみたところ以下のようなエラーが出ました。 Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. at grayscale at HTMLButtonElement.onclick 調べてみたのですが、いまいちよくわかりませんでした。このエラーの解決策はありますか？何度も質問してしまい申し訳ございません。

masaya_ohashi

2017/10/26 09:22 編集

おそらくですが、そのCanvas上にcross-origin data、つまり「自分のサイトのものではないデータ」が含まれているから「権利的にgetImageDataすることは許さん」というエラーだと思います。movie.mp4というデータは本当は外部の動画ファイルではありませんか？もしくは今このHTMLはブラウザにHTMLファイルを直接読み込ませて表示していませんか？ローカルでの実行の場合も同様のエラーが起きます。 https://ja.stackoverflow.com/questions/19761/getimagedata%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%82%82%E3%83%AD%E3%83%BC%E3%82%AB%E3%83%AB%E7%92%B0%E5%A2%83%E3%81%A0%E3%81%A8%E7%94%BB%E5%83%8F%E3%81%8C%E4%B8%8A%E6%89%8B%E3%81%8F%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%81%E3%81%BE%E3%81%9B%E3%82%93

west826

2017/11/06 05:31

HTMLファイルをGoogle Chromeに直接ドラッグ＆ドロップをしています。動画は他のサイトからダウンロードしたものを使用しています。

masaya_ohashi

2017/11/06 05:36

追記しました。追記したサイトの説明を見ながら試してみてください。私は試していないのでこれで直る保証もないですが、おそらく現象から推測するにこれで直ります。

west826

2017/11/10 09:37

ありがとうございます。解決しました。

行動規範の内容に同意します