|
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 |
- |
|
|