rpragana · March 17, 2018 21:31
diff --git a/webrtc.html b/webrtc.html
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <meta content="stuff, to, help, search, engines, not" name="keywords">
 <meta content="What this page is about." name="description">
 <meta content="Display Webcam Stream" name="title">
 <title>Display Webcam Stream</title>
  
 <style>
 #container {
    margin: 0px auto;
    width: 320px;
    height: 240px;
    border: 3px  dashed red;
    float: left;
 }
 #vidElem {
    width: 320px;
    height: 240px;
    background-color: #888;
 }
 #canvElem {
    margin-left: 30px;
    width: 320px;
    height: 240px;
    background-color: #ccc;
 }
 </style>
 </head>
  
 <body>
 <h1>Captura da webcam - WebRTC</h1>
 <div id="container">
    <video onClick="javascript:fotoclick()"
        autoplay="true" controls id="vidElem"></video>
 </div>
    <canvas id="canvElem"></canvas>
    <a id="downLink" href="" download="captura.jpg">
        <img src="data:image/png;base64,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">
    </a>
 <script>
 var video = document.querySelector("#vidElem");
 var canvas = document.querySelector("#canvElem");
 var download = document.querySelector("#download");
 
 if (navigator.getUserMedia) {       
    navigator.getUserMedia({video: true}, handleVideo, videoError);
 }
 
 function handleVideo(stream) {
    video.src = window.URL.createObjectURL(stream);
 }
 
 function videoError(e) {
    // algo deu errado? 
 }

 navigator.mediaDevices.enumerateDevices().then( function (deviceInfos) {
  for (var i = 0; i !== deviceInfos.length; ++i) {
    var deviceInfo = deviceInfos[i];
    //console.log(JSON.stringify(deviceInfo));
    console.log(deviceInfo.deviceId+" # "+deviceInfo.kind+" # "
            +deviceInfo.label);
  }
 })

 function fotoclick() {
  var context = canvas.getContext('2d');
  canvas.width = 320;
  canvas.height = 240;
  context.drawImage(video, 0, 0, 320, 240);
 }

 downLink.addEventListener('click', function(ev){
    var dataURL = canvas.toDataURL('image/jpeg');
    downLink.href = dataURL;
 });
  

 </script>
 </body>
 </html>
diff --git a/WebRTC.md b/WebRTC.md
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta content="stuff, to, help, search, engines, not" name="keywords">
	<meta content="What this page is about." name="description">
	<meta content="Display Webcam Stream" name="title">
	<title>Display Webcam Stream</title>

	<style>
	#container {
	margin: 0px auto;
	width: 320px;
	height: 240px;
	border: 3px dashed red;
	float: left;
	}
	#vidElem {
	width: 320px;
	height: 240px;
	background-color: #888;
	}
	#canvElem {
	margin-left: 30px;
	width: 320px;
	height: 240px;
	background-color: #ccc;
	}
	</style>
	</head>

	<body>
	<h1>Captura da webcam - WebRTC</h1>
	<div id="container">
	<video onClick="javascript:fotoclick()"
	autoplay="true" controls id="vidElem"></video>
	</div>
	<canvas id="canvElem"></canvas>
	<a id="downLink" href="" download="captura.jpg">
	<img src="data:image/png;base64,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">
	</a>
	<script>
	var video = document.querySelector("#vidElem");
	var canvas = document.querySelector("#canvElem");
	var download = document.querySelector("#download");

	if (navigator.getUserMedia) {
	navigator.getUserMedia({video: true}, handleVideo, videoError);
	}

	function handleVideo(stream) {
	video.src = window.URL.createObjectURL(stream);
	}

	function videoError(e) {
	// algo deu errado?
	}

	navigator.mediaDevices.enumerateDevices().then( function (deviceInfos) {
	for (var i = 0; i !== deviceInfos.length; ++i) {
	var deviceInfo = deviceInfos[i];
	//console.log(JSON.stringify(deviceInfo));
	console.log(deviceInfo.deviceId+" # "+deviceInfo.kind+" # "
	+deviceInfo.label);
	}
	})

	function fotoclick() {
	var context = canvas.getContext('2d');
	canvas.width = 320;
	canvas.height = 240;
	context.drawImage(video, 0, 0, 320, 240);
	}

	downLink.addEventListener('click', function(ev){
	var dataURL = canvas.toDataURL('image/jpeg');
	downLink.href = dataURL;
	});


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