Add in the ability to detect webcams and flash. Show error messages.

lms/static/js/verify_student/photocapture.js

@@ -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
@@ -110,6 +115,7 @@ function initSnapshotHandler(names, hasHtml5CameraSupport) {
   if (hasHtml5CameraSupport) {
     ctx = canvas[0].getContext('2d');
   }
+
   var localMediaStream = null;
 
   function snapshot(event) {
@@ -188,15 +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) {
-  // 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>';
+  // 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() {
@@ -229,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);
+
 });

lms/templates/verify_student/photo_verification.html

@@ -14,8 +14,7 @@
 
 <%block name="content">
 
-%if is_no_webcam:
-<div class="wrapper-msg wrapper-msg-activate">
+<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">
@@ -26,10 +25,8 @@
     </div>
   </div>
 </div>
-%endif
 
-%if is_no_flash:
-<div class="wrapper-msg wrapper-msg-activate">
+<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">
@@ -40,7 +37,6 @@
     </div>
   </div>
 </div>
-%endif
 
 
 <div class="container">