t2psyto/brython_video_chromakey_test.html

## brython_video_chromakey_test.html
<!doctype html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>video &amp; canvas example</title>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.4.0/brython.min.js"></script>
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.4.0/brython_stdlib.js"></script>
</head>


<script type="text/javascript">

    // 消す色と閾値
    var chromaKeyColor = {r: 255, g: 255, b: 255},
        colorDistance = 100;

    var chromaKey3 = (function (data, width, height) {
        // 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にもどし、描画する
        return data;
    });

var getColorDistance = function (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)
        );
    };

</script>

<body onload="brython()">
<h1>Brython video &amp; canvas example</h1>
<div id='main'>
    <div>
        <input id="color" type="color" value="#00ff00" />
        <input id="distance" type="number" value="100" />
    </div>

    <div id="bg" width="640" height="480">
        <video id="video" width="320" height="240" loop controls ></video><br />
        <canvas id="canvas" width="320" height="240"></canvas>

    </div>
</div>


<script type="text/python">
import browser
from browser import html, document, window

aa = document['main']

#videotag = html.VIDEO(id='video', width='320', height='240', loop=True, controls=True)
#aa.html = ""
#aa <= videotag

#aa <= " "

#canvastag = html.CANVAS(id='canvas', width='320', height='240')
#aa <= canvastag

video = document['video']
video.src = "./big_buck_bunny_240p_1mb.mp4"
#video.play()
#video.style.display = 'none';


canvas = document['canvas']

# 反転
canvas.style.transform = 'rotateY(180deg)'
context = canvas.getContext('2d')


def OnDraw():
    context.drawImage(video, 0, 0, canvas.width, canvas.height)
    #window.chromaKey2()
    chromaKey()
    window.requestAnimationFrame(OnDraw)

def chromaKey():
    global context

    imageData = context.getImageData(0, 0, canvas.width, canvas.height)
    data = imageData.data

    imageData.data = window.chromaKey3(data, canvas.width, canvas.height)

    context.putImageData(imageData, 0, 0)


bg = document['bg']
bg.style.width = str(canvas.width * 2) + 'px';
bg.style.height = str(canvas.height * 2) + 'px';
bg.style.background = '#ff0000 100% 100% no-repeat';
bg.style.backgroundSize = 'cover';

OnDraw()

</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>video & canvas example</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.4.0/brython.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/brython/3.4.0/brython_stdlib.js"></script>
	</head>



	<script type="text/javascript">

	// 消す色と閾値
	var chromaKeyColor = {r: 255, g: 255, b: 255},
	colorDistance = 100;

	var chromaKey3 = (function (data, width, height) {
	// 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にもどし、描画する
	return data;
	});

	var getColorDistance = function (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)
	);
	};

	</script>

	<body onload="brython()">
	<h1>Brython video & canvas example</h1>
	<div id='main'>
	<div>
	<input id="color" type="color" value="#00ff00" />
	<input id="distance" type="number" value="100" />
	</div>

	<div id="bg" width="640" height="480">
	<video id="video" width="320" height="240" loop controls ></video><br />
	<canvas id="canvas" width="320" height="240"></canvas>

	</div>
	</div>


	<script type="text/python">
	import browser
	from browser import html, document, window

	aa = document['main']

	#videotag = html.VIDEO(id='video', width='320', height='240', loop=True, controls=True)
	#aa.html = ""
	#aa <= videotag

	#aa <= " "

	#canvastag = html.CANVAS(id='canvas', width='320', height='240')
	#aa <= canvastag

	video = document['video']
	video.src = "./big_buck_bunny_240p_1mb.mp4"
	#video.play()
	#video.style.display = 'none';


	canvas = document['canvas']

	# 反転
	canvas.style.transform = 'rotateY(180deg)'
	context = canvas.getContext('2d')


	def OnDraw():
	context.drawImage(video, 0, 0, canvas.width, canvas.height)
	#window.chromaKey2()
	chromaKey()
	window.requestAnimationFrame(OnDraw)

	def chromaKey():
	global context

	imageData = context.getImageData(0, 0, canvas.width, canvas.height)
	data = imageData.data

	imageData.data = window.chromaKey3(data, canvas.width, canvas.height)

	context.putImageData(imageData, 0, 0)


	bg = document['bg']
	bg.style.width = str(canvas.width * 2) + 'px';
	bg.style.height = str(canvas.height * 2) + 'px';
	bg.style.background = '#ff0000 100% 100% no-repeat';
	bg.style.backgroundSize = 'cover';

	OnDraw()

	</script>
	</body>
	</html>