JavaScript/usar_camara.js at master · ArnuelGM/JavaScript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
window.URL = window.URL || window.webkitURL;
if( !!navigator.mediaDevices && navigator.mediaDevices.getUserMedia ){
	navigator.mediaDevices.getUserMedia( { video: true } )
	.then( VIDEOCAPTURE.handleSuccess )
	.catch( VIDEOCAPTURE.handleError );
}
else{
	alert('La captura de video no está soportada en este momento!!');
}

// HANDLER FOR SUCCESS VIDEO CAPTURE
VIDEOCAPTURE.handleSuccess = function(stream) {

	VIDEOCAPTURE.video_element.onloadedmetadata = function(e) {
  	VIDEOCAPTURE.video_element.play();
	};

	VIDEOCAPTURE.stream = stream;

	if( 'srcObject' in VIDEOCAPTURE.video_element ){
  	VIDEOCAPTURE.video_element.srcObject = stream;
	}
	else{
 	VIDEOCAPTURE.video_element.src = window.URL.createObjectURL(stream);
	}

}

// HANDLER FOR ERROR VIDEO CAPTURE
VIDEOCAPTURE.handleError = function(error) {
	alert( 'error: \n' + `${error.name} : ${error.message}` );
	console.log( `${error.name} : ${error.message}` );
}

VIDEOCAPTURE.take_picture = function(){

if( VIDEOCAPTURE.stream ){
	var canvasElement = document.querySelector('#photo_img');
	var ctx = canvasElement.getContext('2d');
	ctx.drawImage( VIDEOCAPTURE.video_element, 0, 0, 100, 100);

	var canvas_img = document.querySelector('#_img');
	var ctx_img = canvas_img.getContext('2d');
	ctx_img.drawImage(  VIDEOCAPTURE.video_element, 0, 0, 150, 200);
	// canvas_img.removeAttribute('hidden');

	VIDEOCAPTURE.video_element.setAttribute('hidden', "true");
	canvasElement.removeAttribute('hidden');

	document.querySelector('#btn_take').setAttribute('hidden', "true");
	document.querySelector('#btn_new').removeAttribute('hidden');

}
else{
	alert('Stream de video no encontrado!!');
}
}