BlankTar

about | blog | works | photo

pythonのOpenCVで作った画像をOpenCVでそのまま描画すると何だかインターフェースが微妙です。なんとなくですが、速さも無い感じがします。
折角ならもっと描画向きのライブラリを使いたいと思ったので、pygameと連携してみることにしました。

変換は以下のような感じで出来ます。

>>> opencv_image = opencv_image[:,:,::-1]  # OpenCVはBGR、pygameはRGBなので変換してやる必要がある。
>>> shape = opencv_image.shape[1::-1]  # OpenCVは(高さ, 幅, 色数)、pygameは(幅, 高さ)なのでこれも変換。
>>> pygame_image = pygame.image.frombuffer(opencv_image.tostring(), shape, 'RGB')
<Surface(848x480x24 SW)>

こんな感じ。色の順番と、サイズの順番の両方を変換する必要がある、というのがポイントです。

描画するときは普通に読み込んだ画像と同じく以下のように。

>>> x = 0
>>> y = 0
>>> screen.blit(img, (x, y))

ふつうです。

参考: python - OpenCV cv2 image to PyGame image? - Stack Overflow

先程の記事でHTML5を使った音の解析をやったので、ついでに映像をやってみようかと思いまして。
pythonでやって好評だった笑い男をやってみました。

とりあえず、必要なライブラリを揃えておきます。といってもccv.jsだけ出来ます。
必要なのはccv.jsface.jsです。適当にダウンロードします。
あと、当然ながら笑い男も用意します。

で、とりあえず実行例。


こんなもん。ちょっと、いやすごく重い。

で、ソースコード。

<script src="ccv.js"></script>
<script src="face.js"></script>

<canvas></canvas>

<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var video = document.createElement('video');
var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

var laughingman = new Image();
laughingman.src = 'laughing.png';

navigator.getUserMedia(
	{video: true},
	function(stream){
		video.src = URL.createObjectURL(stream);

		video.addEventListener('loadedmetadata', function(){
			canvas.width = video.videoWidth;
			canvas.height = video.videoHeight;

			(function animation(){
				context.drawImage(video, 0, 0);

				ccv.detect_objects({
					'canvas': ccv.pre(canvas),
					'cascade': cascade,
					'interval': 5,
					'min_neighbors': 1
				}).forEach(function(x){
					context.drawImage(laughingman, x.x, x.y, x.width, x.height);
				});

				requestAnimationFrame(animation);
			})();
		});
	},
	console.log
);
</script>

実にシンプルです。
getUserMediaで映像を取得して、準備が出来たらcanvasのサイズを設定。
映像はcanvasに描画させて、そいつをccv.detect_objectsに渡すことで検出を行なっています。
出来ればvideoタグで描画させたかったのだけれど、videoタグを渡して検出させる方法が分からなかったのでcanvasを利用。

face.jsの中に認識に使うデータが書かれていて、そいつがcascadeって変数に入るようです。
なのでこいつを別のファイルに差し替えれば顔以外も検出出来るはず。

参考: WebRTC(2)ccv.jsと組み合わせて顔認識を実装〜笑い男〜 | potter0517

なんか面白いものを作ろうかと思って、HTML5のAnalyzerNodeとやらを使ってみました。
細かいことはともかくとして、大雑把に使い方を。

なんかこんな感じのやつが出来る。マイクの付いた新しめのブラウザでご覧下さい。

ソースコードはこんな感じです。

<audio muted></audio>
<canvas width=640 height=480></canvas>
<script>
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

var canvas = document.querySelector('canvas');
var context = canvas.getContext('2d');

canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;

navigator.getUserMedia(
	{audio : true},
	function(stream){
		document.querySelector('audio').src = URL.createObjectURL(stream);
		var audioContext = new AudioContext();
		var analyser = audioContext.createAnalyser();
		var timeDomain = new Float32Array(analyser.frequencyBinCount);
		var frequency = new Uint8Array(analyser.frequencyBinCount);
		audioContext.createMediaStreamSource(stream).connect(analyser);

		(function animation(){
			analyser.getFloatTimeDomainData(timeDomain);
			analyser.getByteFrequencyData(frequency);

			context.clearRect(0, 0, canvas.width, canvas.height);

			context.strokeStyle = 'blue';
			context.beginPath();
			context.moveTo(0, canvas.height - frequency[0]*canvas.height/255);
			for(var i=0; i<frequency.length; i++){
				context.lineTo(
					i*canvas.width/frequency.length,
					canvas.height - Math.max(0, frequency[i]*canvas.height/255)
				);
			}
			context.stroke();

			context.strokeStyle = 'red';
			context.beginPath();
			context.moveTo(0, canvas.height/2 + timeDomain[0]*canvas.height/2);
			for(var i=0; i<timeDomain.length; i++){
				context.lineTo(
					i*canvas.width/timeDomain.length,
					canvas.height/2 + timeDomain[i]*canvas.height/2
				);
			}
			context.stroke();

			requestAnimationFrame(animation);
		})();

	},
	console.log
);
</script>

配列とAudioContextとやらを作って、AnalyzerNodeAudioSourceNodeに接続。
あとはgetFloatTimeDomainDataってやつで波形、getByteFrequencyDataってやつで周波数(波形をフーリエ変換したやつ)を取得出来ます。
どちらもgetFloatを使うと浮動小数点で、getByteから始まるやつを使うと0から255までの値で取得出来ます。分かりやすくて良いね。

マイクからリアルタイムに音を取得したい場合はcreateMediaStreamSourceの代わりにcreateMediaElementSourceを使います。大体こんな感じ。

<audio src="music.mp3" controls></audio>
<script>
	var audioContext = new AudioContext();
	var analyser = audioContext.createAnalyser();
	audioContext.createMediaElementSource(document.querySelector('audio')).connect(analyser);
</script>

それ以外の使い方は一緒です。getUserMediaとかやらなくて良いだけもっとシンプル。

普通にcanvasを使っているので、わりと何でも出来ます。楽しい。

余談ですが、google chromeでgetUserMediaを使おうとする場合はhttpsを使わないといけないようです。Firefoxとかは分からん。
そんなわけでこのページもHTTPSになってるはず。

[ << ] [ 8 ] [ 10 ] [ 12 ] [ >> ]