あむちょです。

動画のリアルタイムエフェクトやってみました。

HTML5の新しい機能として、<video>タグによるプラグイン不要の動画再生があるので、使ってみました。

<video>タグに対応しているブラウザーなら以下に動画が表示されているはず。動画はNHKの素材ライブラリーから、犬とイワシの群れを使わせていただきました。

NHKクリエイティブ・ライブラリー

方法は非常に簡単で、

<br />
&lt;video src=&quot;test.mp4&quot; width=&quot;400&quot; controls loop&gt;&lt;/video&gt;<br />

だけです。controls属性は、コントローラーの表示です。loop属性で繰り返しとなります。

サーバーやブラウザーによっては、「Content-Typeが不適切」や「MIMEが対応してない」といったエラーが出ます。

一番簡単な解決方法は.htaccessに

AddType video/mp4 .mp4

と追加すれば直るはず。

ただ動画を再生するだけではつまらないので、webカメラの映像を動画として読み込んで、エフェクトをかけてみました。

webカメラの映像が取れない時は、犬とイワシの群れが表示されます。

ブラウザーによっては自動再生されないので、再生ボタンを押してください。PC専用です。

webカメラエフェクト

動画をキャプチャして画像として取り出し、1秒間に30回画像処理を行ってます。

videoから画像をとりだす方法は、

<br />
var video=document.getElementById(&#8216;video&#8217;);</p>
<p>context.drawImage(video,0,0);<br />
var imgD=context.getImageData(0,0,canvas.width,canvas.height);<br />

canvasに画像として描画した後、イメージデータとして読み込んでます。画像処理は以下の記事で書いてある方法でやりました。

HTML5とJavaScriptでローカル画像をドラッグで画像処理する

webカメラ映像の所得は

<br />
video=document.getElementById(&#8216;video&#8217;);</p>
<p>var windowURL = window.URL || window.webkitURL;</p>
<p>navigator.getUserMedia = navigator.getUserMedia ||<br />
    navigator.webkitGetUserMedia ||<br />
    navigator.mozGetUserMedia ||<br />
    navigator.msGetUserMedia;</p>
<p>    navigator.getUserMedia({video: true},<br />
        function(localMediaStream){<br />
    	    video.src=window.URL.createObjectURL(localMediaStream);<br />
        },<br />
        function(err){<br />
            alert(&#8216;カメラから映像を取得できません&#8217;);<br />
            video.src=&quot;test.mp4&quot;;<br />
        }<br />
    );<br />

でいけるはず。

二値化した寝起きの私です。

　[ad]