Lines 53-94
Link Here
|
53 |
|
53 |
|
54 |
<script> |
54 |
<script> |
55 |
function turn_on() { |
55 |
function turn_on() { |
56 |
// Detect camera |
56 |
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { |
57 |
navigator.getMedia = ( navigator.getUserMedia || |
57 |
navigator.mediaDevices.getUserMedia({video: true}).then( |
58 |
navigator.webkitGetUserMedia || |
|
|
59 |
navigator.mozGetUserMedia || |
60 |
navigator.msGetUserMedia ); |
61 |
if (navigator.getMedia) { |
62 |
// keep it on, and set object sizes |
63 |
navigator.getMedia( |
64 |
{video: true}, |
65 |
function(stream) { |
58 |
function(stream) { |
66 |
var takebutton = document.getElementById('webcam_capture'); |
|
|
67 |
var savebutton = document.getElementById('webcam_save'); |
68 |
var video = document.getElementById('videoFeed'); |
69 |
var canvas = document.getElementById('canvas'); |
70 |
var picture = document.getElementById('picture'); |
71 |
video.srcObject = stream; |
59 |
video.srcObject = stream; |
72 |
video.autoplay = true; |
60 |
video.play(); |
73 |
// use 200ms timeout to set because mobile switches height/width |
61 |
// use 200ms timeout to set because mobile switches height/width |
74 |
// until used and the videoWidth and videoHeight are checked |
62 |
// until used and the videoWidth and videoHeight are checked |
75 |
setTimeout(function(){ |
63 |
setTimeout(function(){ |
76 |
width = video.videoWidth; |
64 |
var width = video.videoWidth; |
77 |
height = video.videoHeight; |
65 |
var height = video.videoHeight; |
78 |
var ratio = height.toFixed(6)/width.toFixed(6); |
66 |
var ratio = height.toFixed(6)/width.toFixed(6); |
79 |
var rheight = 240 * ratio; |
67 |
var rheight = 240 * ratio; |
80 |
video.height = rheight; |
68 |
video.height = rheight; |
81 |
canvas.height = rheight; |
69 |
canvas.height = rheight; |
82 |
picture.height = rheight; |
70 |
picture.height = rheight; |
83 |
takebutton.disabled = false; |
71 |
takepicture.disabled = false; |
84 |
}, 200); |
72 |
}, 200); |
85 |
}, |
|
|
86 |
function() { |
87 |
alert('Webcam not detected or permission denied!'); |
88 |
} |
73 |
} |
89 |
); |
74 |
); |
90 |
} else { |
75 |
} else { |
91 |
alert('Webcam not detected or permission denied!'); |
76 |
// Detect camera |
|
|
77 |
navigator.getMedia = ( navigator.getUserMedia || |
78 |
navigator.webkitGetUserMedia || |
79 |
navigator.mozGetUserMedia || |
80 |
navigator.msGetUserMedia ); |
81 |
if (navigator.getMedia) { |
82 |
// keep it on, and set object sizes |
83 |
navigator.getMedia( |
84 |
{video: true}, |
85 |
function(stream) { |
86 |
var takebutton = document.getElementById('webcam_capture'); |
87 |
var savebutton = document.getElementById('webcam_save'); |
88 |
var video = document.getElementById('videoFeed'); |
89 |
var canvas = document.getElementById('canvas'); |
90 |
var picture = document.getElementById('picture'); |
91 |
video.srcObject = stream; |
92 |
video.autoplay = true; |
93 |
// use 200ms timeout to set because mobile switches height/width |
94 |
// until used and the videoWidth and videoHeight are checked |
95 |
setTimeout(function(){ |
96 |
width = video.videoWidth; |
97 |
height = video.videoHeight; |
98 |
var ratio = height.toFixed(6)/width.toFixed(6); |
99 |
var rheight = 240 * ratio; |
100 |
video.height = rheight; |
101 |
canvas.height = rheight; |
102 |
picture.height = rheight; |
103 |
takebutton.disabled = false; |
104 |
}, 200); |
105 |
}, |
106 |
function() { |
107 |
alert('Webcam not detected or permission denied!'); |
108 |
} |
109 |
); |
110 |
} else { |
111 |
alert('Webcam not detected or permission denied!'); |
112 |
} |
92 |
} |
113 |
} |
93 |
} |
114 |
} |
94 |
|
115 |
|
Lines 153-197
Link Here
|
153 |
} |
174 |
} |
154 |
</script> |
175 |
</script> |
155 |
<script> |
176 |
<script> |
156 |
//if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { |
177 |
var video = document.getElementById('videoFeed'); |
157 |
// navigator.mediaDevices.getUserMedia(mediaConfig).then( |
178 |
var canvas = document.getElementById('canvas'); |
158 |
// function(stream) { |
179 |
var picture = document.getElementById('picture'); |
159 |
// video.srcObject = stream; |
|
|
160 |
// video.play(); |
161 |
// } |
162 |
// ); |
163 |
//} |
164 |
|
165 |
var takepicture = document.getElementById('webcam_capture'); |
180 |
var takepicture = document.getElementById('webcam_capture'); |
166 |
var savepicture = document.getElementById('webcam_save'); |
181 |
var savepicture = document.getElementById('webcam_save'); |
167 |
savepicture.disabled = true; |
182 |
savepicture.disabled = true; |
168 |
|
183 |
|
169 |
// Detect camera |
184 |
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { |
170 |
navigator.getMedia = ( navigator.getUserMedia || |
185 |
navigator.mediaDevices.getUserMedia({video: true}).then( |
171 |
navigator.webkitGetUserMedia || |
|
|
172 |
navigator.mozGetUserMedia || |
173 |
navigator.msGetUserMedia ); |
174 |
// If no camera... |
175 |
if (! navigator.getMedia) { |
176 |
// Disable the buttons. |
177 |
var webcamoff = document.getElementById('webcam_off'); |
178 |
var webcamon = document.getElementById('webcam_on'); |
179 |
webcamon.disabled = true; |
180 |
webcamoff.disabled = true; |
181 |
takepicture.disabled = true; |
182 |
document.getElementById('capture-patron-image').style.visibility = "hidden"; |
183 |
document.getElementById('capture-patron-image').remove(); |
184 |
} else { |
185 |
// If camera... |
186 |
// keep it on and set objects height and width |
187 |
navigator.getMedia( |
188 |
{video: true}, |
189 |
function(stream) { |
186 |
function(stream) { |
190 |
var video = document.getElementById('videoFeed'); |
|
|
191 |
var canvas = document.getElementById('canvas'); |
192 |
var picture = document.getElementById('picture'); |
193 |
video.srcObject = stream; |
187 |
video.srcObject = stream; |
194 |
video.autoplay = true; |
188 |
video.play(); |
195 |
// use 200ms timeout to set because mobile switches height/width |
189 |
// use 200ms timeout to set because mobile switches height/width |
196 |
// until used and the videoWidth and videoHeight are checked |
190 |
// until used and the videoWidth and videoHeight are checked |
197 |
setTimeout(function(){ |
191 |
setTimeout(function(){ |
Lines 204-214
Link Here
|
204 |
picture.height = rheight; |
198 |
picture.height = rheight; |
205 |
takepicture.disabled = false; |
199 |
takepicture.disabled = false; |
206 |
}, 200); |
200 |
}, 200); |
207 |
}, |
|
|
208 |
function() { |
209 |
alert('Webcam not detected or permission denied!'); |
210 |
} |
201 |
} |
211 |
); |
202 |
); |
|
|
203 |
} else { |
204 |
// Detect camera |
205 |
navigator.getMedia = ( navigator.getUserMedia || |
206 |
navigator.webkitGetUserMedia || |
207 |
navigator.mozGetUserMedia || |
208 |
navigator.msGetUserMedia ); |
209 |
// If camera... |
210 |
if (navigator.getMedia) { |
211 |
// keep it on and set objects height and width |
212 |
navigator.getMedia( |
213 |
{video: true}, |
214 |
function(stream) { |
215 |
video.srcObject = stream; |
216 |
video.autoplay = true; |
217 |
// use 200ms timeout to set because mobile switches height/width |
218 |
// until used and the videoWidth and videoHeight are checked |
219 |
setTimeout(function(){ |
220 |
var width = video.videoWidth; |
221 |
var height = video.videoHeight; |
222 |
var ratio = height.toFixed(6)/width.toFixed(6); |
223 |
var rheight = 240 * ratio; |
224 |
video.height = rheight; |
225 |
canvas.height = rheight; |
226 |
picture.height = rheight; |
227 |
takepicture.disabled = false; |
228 |
}, 200); |
229 |
}, |
230 |
function() { |
231 |
alert('Webcam not detected or permission denied!'); |
232 |
} |
233 |
); |
234 |
} else { |
235 |
// Otherwise just delete the whole div section. |
236 |
document.getElementById('capture-patron-image').remove(); |
237 |
} |
212 |
} |
238 |
} |
213 |
</script> |
239 |
</script> |
214 |
</html> |
240 |
</html> |
215 |
- |
|
|