yying/video.html Secret

## video.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title> </title>
        <link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/min/1.5/min.min.css">
        <style>
        body,textarea,input,select {
            background:0;
            border-radius:0;
            font:16px sans-serif;
            margin:0
        }
        .addon,.btn-sm,.nav,textarea,input,select{
            outline:0;
            font-size:14px
        }
        .smooth{
            transition:all .2s
        }
        .btn,.nav a{
            text-decoration:none
        }
        .container{
            margin:0 20px;
            width:auto
        }
        @media(min-width:1310px){
            .container{
                margin:auto;
                width:1270px
            }
        }
        .btn,h2{
            font-size:2em
        }
        .msg{
            background:#def;
            border-left:5px solid #59d;
            padding:1.5em
        }
        .warning{
            background:#fdd;
            border-left:5px solid #e44
        }
        #errorMsg{
            display:none
        }
        #meterGraph{
            height:30px;
            width:400px;
            border:1px solid #000;
            margin:10px 10px 10px 10px;
        }
        #meter{
            background: #00ff00;
            width: 0%;
            height: 100%;
        }
        </style>
        <script type="text/javascript">
        function showError(msg) {
            var errorMsg = document.getElementById('errorMsg');
            errorMsg.innerHTML = '<strong>Error:</strong>\n' + msg;
            errorMsg.style.display = 'block';
        }

        window.onload = function () {
            navigator.getUserMedia = (navigator.getUserMedia ||
                                      navigator.webkitGetUserMedia ||
                                      navigator.mozGetUserMedia);
            navigator.getUserMedia({
                video : true,
                audio : false
            }, function (stream) {
                var screen = document.createElement('canvas');
                var video = document.createElement('video');
                var context = screen.getContext('2d');
                var v = document.getElementById('v');
                var c = v.getContext('2d');
                video.src = URL.createObjectURL(stream);

                function grab(context, draw, width, height) {
                    context.drawImage(video, 0, 0, width, height);

                    var data = context.getImageData(0, 0, width, height);

                    // XXX: send this data to web sockets?

                    draw.putImageData(data, 0, 0);
                    setTimeout(function () { grab(context, draw, width, height); }, 0);
                }

                video.addEventListener('play', function (e) {
                    screen.width = this.videoWidth;
                    screen.height = this.videoHeight;
                    v.width = screen.width;
                    v.height = screen.height;
                    grab(context, c, screen.width, screen.height);
                });
                video.addEventListener('loadedmetadata', function (e) {
                    this.play();
                });
            }, function (err) {
                showError(err);
            });
        }
        </script>
    </head>
    <body>
        <div id="errorMsg" class="msg warning">

        </div>
        <canvas id="v"></canvas>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title> </title>
	<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/min/1.5/min.min.css">
	<style>
	body,textarea,input,select {
	background:0;
	border-radius:0;
	font:16px sans-serif;
	margin:0
	}
	.addon,.btn-sm,.nav,textarea,input,select{
	outline:0;
	font-size:14px
	}
	.smooth{
	transition:all .2s
	}
	.btn,.nav a{
	text-decoration:none
	}
	.container{
	margin:0 20px;
	width:auto
	}
	@media(min-width:1310px){
	.container{
	margin:auto;
	width:1270px
	}
	}
	.btn,h2{
	font-size:2em
	}
	.msg{
	background:#def;
	border-left:5px solid #59d;
	padding:1.5em
	}
	.warning{
	background:#fdd;
	border-left:5px solid #e44
	}
	#errorMsg{
	display:none
	}
	#meterGraph{
	height:30px;
	width:400px;
	border:1px solid #000;
	margin:10px 10px 10px 10px;
	}
	#meter{
	background: #00ff00;
	width: 0%;
	height: 100%;
	}
	</style>
	<script type="text/javascript">
	function showError(msg) {
	var errorMsg = document.getElementById('errorMsg');
	errorMsg.innerHTML = '<strong>Error:</strong>\n' + msg;
	errorMsg.style.display = 'block';
	}

	window.onload = function () {
	navigator.getUserMedia = (navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia);
	navigator.getUserMedia({
	video : true,
	audio : false
	}, function (stream) {
	var screen = document.createElement('canvas');
	var video = document.createElement('video');
	var context = screen.getContext('2d');
	var v = document.getElementById('v');
	var c = v.getContext('2d');
	video.src = URL.createObjectURL(stream);

	function grab(context, draw, width, height) {
	context.drawImage(video, 0, 0, width, height);

	var data = context.getImageData(0, 0, width, height);

	// XXX: send this data to web sockets?

	draw.putImageData(data, 0, 0);
	setTimeout(function () { grab(context, draw, width, height); }, 0);
	}

	video.addEventListener('play', function (e) {
	screen.width = this.videoWidth;
	screen.height = this.videoHeight;
	v.width = screen.width;
	v.height = screen.height;
	grab(context, c, screen.width, screen.height);
	});
	video.addEventListener('loadedmetadata', function (e) {
	this.play();
	});
	}, function (err) {
	showError(err);
	});
	}
	</script>
	</head>
	<body>
	<div id="errorMsg" class="msg warning">

	</div>
	<canvas id="v"></canvas>
	</body>
	</html>