Merge pull request #940 from edx/ormsbee/flash_detect_camera

Detect cameras and flash

lms/static/js/verify_student/CameraCapture.as

@@ -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"); 
@@ -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) 
 			{ 

lms/static/js/verify_student/photocapture.js

 var onVideoFail = function(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,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) {
+  // 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=2"' +
+             '"/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() {
@@ -233,9 +264,18 @@ $(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);
   }
 
   analytics.pageview("Capture Face Photo");
   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

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