-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain2.js
123 lines (110 loc) · 3.91 KB
/
main2.js
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
var constraints_ind = 0;
var constraints_list = ['environment','user'];
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
// Grab elements, create settings, etc.
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
var mediaConfig = { video: true };
var errBack = function(e) {
console.log('An error has occurred!', e)
};
function detectmob() {
if( navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPad/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
|| navigator.userAgent.match(/Windows Phone/i)
){
return true;
}
else {
return false;
}
}
navigator.getUserMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
// Put video listeners into place
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
var constraints = {
advanced: [{
facingMode: constraints_list[constraints_ind]
}]
};
navigator.mediaDevices
.getUserMedia({
video: constraints
})
.then(function(mediaStream) {
window.stream = mediaStream;
video.src = window.URL.createObjectURL(mediaStream);
video.play();
});
}
/* Legacy code below! */
else if(navigator.getUserMedia) { // Standard
var constraints = {
advanced: [{
facingMode: constraints_list[constraints_ind]
}]
};
navigator.getUserMedia(mediaConfig, function(localMediaStream) {
video.src = window.URL.createObjectURL(localMediaStream);
video.play();
}, errBack);
} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
navigator.webkitGetUserMedia(mediaConfig, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, errBack);
} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
navigator.mozGetUserMedia(mediaConfig, function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
}, errBack);
}
else {
alert('Sorry, your browser does not support getUserMedia');
}
// Trigger photo take
document.getElementById('snap').addEventListener('click', function() {
var canvas = document.createElement("canvas");
canvas.width = video.width;
canvas.height = video.height;
if(detectmob() && navigator.userAgent.toLowerCase().indexOf('firefox') >= 0){//} && navigator.userAgent.toLowerCase().indexOf('firefox') >= 0){
//flipHorizontally(video, 0, 0);
//move to x + img.width
canvas.getContext('2d').translate(0, video.height);
//scale x by -1; this trick flips horizontally
canvas.getContext('2d').scale(1,-1);
}
canvas.getContext("2d").drawImage(video, 0, 0, canvas.width, canvas.height);
var pngList = document.getElementById("pngHolder");
if (pngList.hasChildNodes()){
pngList.removeChild(pngList.firstChild);
}
document.getElementById("pngHolder").appendChild(convertCanvasToImage(canvas));
});
// Converts canvas to an image
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png");
return image;
}
/*
function flipHorizontally(img,x,y) {
//move to x + img.width
canvas.getContext('2d').translate(x+img.width, y);
//scale x by -1; this trick flips horizontally
canvas.getContext('2d').scale(-1, 1);
}
*/
}, false);
function change_camera() {
constraints_ind = ++constraints_ind % 2;
}