Skip to content

Detect cameras and flash #940

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ormsbee merged 3 commits into from
Sep 12, 2013
Merged

Detect cameras and flash #940

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e498ad5
Add hasCamera() method to flash camera detection
Sep 10, 2013
5921bca
adding notification to photo page when no flash or webcam is detected
Sep 11, 2013
7ab5ae9
Add in the ability to detect webcams and flash. Show error messages.
dianakhuang Sep 11, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions lms/static/js/verify_student/CameraCapture.as
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,7 @@ package
ExternalInterface.addCallback("reset", reset);
ExternalInterface.addCallback("imageDataUrl", imageDataUrl);
ExternalInterface.addCallback("cameraAuthorized", cameraAuthorized);
ExternalInterface.addCallback("hasCamera", hasCamera);

// Notify the container that the SWF is ready to be called.
ExternalInterface.call("setSWFIsReady");
Expand Down Expand Up @@ -108,6 +109,10 @@ package
return permissionGiven;
}

public function hasCamera():Boolean {
return (Camera.names.length != 0);
}

public function statusHandler(event:StatusEvent):void {
switch (event.code)
{
Expand Down
Binary file modified lms/static/js/verify_student/CameraCapture.swf
View file
Open in desktop
Binary file not shown.
54 changes: 47 additions & 7 deletions lms/static/js/verify_student/photocapture.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
var onVideoFail = function(e) {
console.log('Failed to get camera access!', e);
if(e == 'NO_DEVICES_FOUND') {
$('#no-webcam').show();
}
else {
console.log('Failed to get camera access!', e);
}
};

// Returns true if we are capable of video capture (regardless of whether the
Expand Down Expand Up @@ -110,6 +115,7 @@ function initSnapshotHandler(names, hasHtml5CameraSupport) {
if (hasHtml5CameraSupport) {
ctx = canvas[0].getContext('2d');
}

var localMediaStream = null;

function snapshot(event) {
Expand Down Expand Up @@ -188,13 +194,38 @@ function initSnapshotHandler(names, hasHtml5CameraSupport) {

}

function browserHasFlash() {
var hasFlash = false;
try {
var fo = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
if(fo) hasFlash = true;
} catch(e) {
if(navigator.mimeTypes["application/x-shockwave-flash"] != undefined) hasFlash = true;
}
return hasFlash;
}

function objectTagForFlashCamera(name) {
return '<object type="application/x-shockwave-flash" id="' +
name + '" name="' + name + '" data=' +
'"/static/js/verify_student/CameraCapture.swf?v=2"' +
'width="500" height="375"><param name="quality" ' +
'value="high"><param name="allowscriptaccess" ' +
'value="sameDomain"></object>';
// detect whether or not flash is available
if(browserHasFlash()) {
// I manually update this to have ?v={2,3,4, etc} to avoid caching of flash
// objects on local dev.
return '<object type="application/x-shockwave-flash" id="' +
name + '" name="' + name + '" data=' +
'"/static/js/verify_student/CameraCapture.swf?v=3"' +
'width="500" height="375"><param name="quality" ' +
'value="high"><param name="allowscriptaccess" ' +
'value="sameDomain"></object>';
}
else {
// display a message informing the user to install flash
$('#no-flash').show();
}
}

function linkNewWindow(e) {
window.open($(e.target).attr('href'));
e.preventDefault();
}

$(document).ready(function() {
Expand Down Expand Up @@ -227,8 +258,17 @@ $(document).ready(function() {
if (!hasHtml5CameraSupport) {
$("#face_capture_div").html(objectTagForFlashCamera("face_flash"));
$("#photo_id_capture_div").html(objectTagForFlashCamera("photo_id_flash"));
// wait for the flash object to be loaded
// TODO: we need a better solution for this
setTimeout(function() {
if(browserHasFlash() && !$('#face_flash')[0].hasOwnProperty('hasCamera')) {
onVideoFail('NO_DEVICES_FOUND');
}
}, 1000);
}

initSnapshotHandler(["photo_id", "face"], hasHtml5CameraSupport);

$('a[rel="external"]').attr('title', gettext('This link will open in a new browser window/tab')).bind('click', linkNewWindow);

});
26 changes: 26 additions & 0 deletions lms/templates/verify_student/photo_verification.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,32 @@
</%block>

<%block name="content">

<div id="no-webcam" style="display: none;" class="wrapper-msg wrapper-msg-activate">
<div class=" msg msg-activate">
<i class="msg-icon icon-warning-sign"></i>
<div class="msg-content">
<h3 class="title">${_("No Webcam Detected")}</h3>
<div class="copy">
<p>${_("You don't seem to have a webcam connected. Double-check that your webcam is connected and working to continue registering, or select to {a_start} audit the course for free {a_end} without verifying.").format(a_start='<a rel="external" href="/course_modes/choose/' + course_id + '">', a_end="</a>")}</p>
</div>
</div>
</div>
</div>

<div id="no-flash" style="display: none;" class="wrapper-msg wrapper-msg-activate">
<div class=" msg msg-activate">
<i class="msg-icon icon-warning-sign"></i>
<div class="msg-content">
<h3 class="title">${_("No Flash Detected")}</h3>
<div class="copy">
<p>${_("You don't seem to have Flash installed. {a_start} Get Flash {a_end} to continue your registration.").format(a_start='<a rel="external" href="http://get.adobe.com/flashplayer/">', a_end="</a>")}</p>
</div>
</div>
</div>
</div>


<div class="container">
<section class="wrapper">

Expand Down