ikr7/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Broadcaster</title>
	<style>

div, textarea {
	line-height: 1em;
}

	</style>
</head>
<body>
	<div></div>
	<textarea cols="250" rows="100"></textarea>
	<script src="./main.js"></script>
</body>
</html>

## main.js
'use strict';

navigator.getUserMedia = navigator.webkitGetUserMedia;

var w = 640, h = 480;

var pixelsPerDot = 8;         // 1ドットあたり なんpx * なんpx か

var video = document.createElement('video');

video.autoplay = 'autoplay';

var vCanvas = document.createElement('canvas');

vCanvas.width = w;
vCanvas.height = h;

var vContext = vCanvas.getContext('2d');

var div = document.querySelector('div');
var textarea = document.querySelector('textarea');

var loop;

navigator.getUserMedia({
	video: true
}, function(stream){

	video.src = URL.createObjectURL(stream);

	(loop = function(){

		vContext.drawImage(video, 0, 0, vCanvas.width, vCanvas.height);

		var orig = vContext.getImageData(0, 0, vCanvas.width, vCanvas.height);

		var dots = [];

		for (var dy = 0; dy < 480; dy += pixelsPerDot) {
			var col = [];
			for (var dx = 0; dx < 640; dx += pixelsPerDot) {
				var dotBlightness = 0;
				for (var y = dy; y < dy + pixelsPerDot; y++) {
					for (var x = dx; x < dx + pixelsPerDot; x++) {
						var pixelIndex = (vCanvas.width * y + x) << 2;
						dotBlightness += (
							orig.data[pixelIndex + 0] +
							orig.data[pixelIndex + 1] +
							orig.data[pixelIndex + 2]
						) / 3;
					}
				}
				dotBlightness /= Math.pow(pixelsPerDot, 2);
				col.push(dotBlightness | 0);
			}
			dots.push(col);
		}

		// "██▇▅▄▂▁　　"


		textarea.value = dots.map(function(col){
			return col.map(function(dot){
				return `${'██▇▅▄▂▁　　'.charAt(Math.round(dot / 32))}`;
			}).join('');
		}).join('\n');

		requestAnimationFrame(loop);
		// setTimeout(loop, 333);

	})();

}, function(err){
	throw err;
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Broadcaster</title>
	<style>

	div, textarea {
	line-height: 1em;
	}

	</style>
	</head>
	<body>
	<div></div>
	<textarea cols="250" rows="100"></textarea>
	<script src="./main.js"></script>
	</body>
	</html>
	'use strict';

	navigator.getUserMedia = navigator.webkitGetUserMedia;

	var w = 640, h = 480;

	var pixelsPerDot = 8; // 1ドットあたりなんpx * なんpx か

	var video = document.createElement('video');

	video.autoplay = 'autoplay';

	var vCanvas = document.createElement('canvas');

	vCanvas.width = w;
	vCanvas.height = h;

	var vContext = vCanvas.getContext('2d');

	var div = document.querySelector('div');
	var textarea = document.querySelector('textarea');

	var loop;

	navigator.getUserMedia({
	video: true
	}, function(stream){

	video.src = URL.createObjectURL(stream);

	(loop = function(){

	vContext.drawImage(video, 0, 0, vCanvas.width, vCanvas.height);

	var orig = vContext.getImageData(0, 0, vCanvas.width, vCanvas.height);

	var dots = [];

	for (var dy = 0; dy < 480; dy += pixelsPerDot) {
	var col = [];
	for (var dx = 0; dx < 640; dx += pixelsPerDot) {
	var dotBlightness = 0;
	for (var y = dy; y < dy + pixelsPerDot; y++) {
	for (var x = dx; x < dx + pixelsPerDot; x++) {
	var pixelIndex = (vCanvas.width * y + x) << 2;
	dotBlightness += (
	orig.data[pixelIndex + 0] +
	orig.data[pixelIndex + 1] +
	orig.data[pixelIndex + 2]
	) / 3;
	}
	}
	dotBlightness /= Math.pow(pixelsPerDot, 2);
	col.push(dotBlightness \| 0);
	}
	dots.push(col);
	}

	// "██▇▅▄▂▁　　"


	textarea.value = dots.map(function(col){
	return col.map(function(dot){
	return `${'██▇▅▄▂▁　　'.charAt(Math.round(dot / 32))}`;
	}).join('');
	}).join('\n');

	requestAnimationFrame(loop);
	// setTimeout(loop, 333);

	})();

	}, function(err){
	throw err;
	});