Basic WebRtc Video

Basic WebRtc Video.markdown

Basic WebRtc Video

A Pen by Sven Neumann on CodePen.

License.

index.html

<script src="script.js"></script>
<div class="camera">
	<video id="video">Video stream not available.</video>
	<button id="startbutton">Take photo</button>
</div>
<canvas id="canvas"></canvas>
<div class="output">
	<img id="photo" alt="The screen capture will appear in this box.">
</div>

script.js

 document.addEventListener("DOMContentLoaded", function(event) {
	navigator.getMedia = (
		navigator.getUserMedia ||
		navigator.webkitGetUserMedia ||
		navigator.mozGetUserMedia ||
		navigator.msGetUserMedia);
	console.log(navigator.getMedia);
	navigator.getMedia({video: true, audio: false}, function(stream) {
		console.log(stream);
		video.src = window.URL.createObjectURL(stream);
		video.play();
	}, function(err) {
		console.log("An error occured! " + err);
	});
	document.getElementById('startbutton').addEventListener('click', function(e) {
		var video = document.getElementById('video');
		var w = video.videoWidth;
		var h = video.videoHeight;
		var canvas = document.createElement('canvas');
		canvas.width = w;
		canvas.height = h;
		var ctx = canvas.getContext('2d');
		ctx.drawImage(video, 0, 0, w, h);
		var dataUrl = canvas.toDataURL('image/png')
		document.getElementById('photo').setAttribute('src', dataUrl);
	});
});