Changeset 11944

Timestamp:

04/03/2018 04:58:03 PM (7 years ago)

Author:

r-a-y

Message:

Avatars: Fix webcam functionality when taking a photo in Firefox.

The navigator.getUserMedia API, which our webcam functionality relies on,
is deprecated. As a result, webcam functionality does not work in Firefox.

This commit addresses this by supporting the newer navigator.mediaDevices
API, while also adding backward-compatible support for those browsers that
still require navigator.getUserMedia.

Props r-a-y, DJPaul, hnla.

Fixes #7676.

File:

• trunk/src/bp-core/js/webcam.js (modified) (3 diffs)

trunk/src/bp-core/js/webcam.js

@@ -84 +84 @@
             stream.onended = bp.WebCam.noStream();
 
-            if ( video.mozSrcObject !== undefined ) {
-                video.mozSrcObject = stream;
+            // Older browsers may not have srcObject
+            if ( 'srcObject' in video ) {
+                video.srcObject = stream;
+            } else {
+                // Avoid using this in new browsers, as it is going away.
+                video.src = window.URL.createObjectURL( stream );
+            }
+
+            video.onloadedmetadata = function() {
                 video.play();
-            } else if ( navigator.mozGetUserMedia ) {
-                video.src = stream;
-                video.play();
-            } else if ( video.srcObject !== undefined ) {
-                video.srcObject = stream;
-            } else if ( window.URL ) {
-                video.src = window.URL.createObjectURL( stream );
-            } else {
-                video.src = stream;
-            }
+            };
 
             bp.WebCam.params.capture_enable = true;
@@ -173 +171 @@
             var params;
 
-            if ( navigator.getUserMedia || navigator.oGetUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia ) {
-
+            // Standardize getUserMedia browser call.
+            navigator.getUserMedia = (
+                navigator.getUserMedia ||
+                navigator.webkitGetUserMedia ||
+                navigator.mozGetUserMedia ||
+                navigator.msGetUserMedia ||
+                navigator.oGetUserMedia
+            );
+
+            if ( typeof navigator.getUserMedia !== 'undefined' ) {
                 // We need to add some cropping stuff to use bp.Avatar.setAvatar()
                 params = _.extend( _.pick( BP_Uploader.settings.defaults.multipart_params.bp_params,
@@ -214 +220 @@
             bp.WebCam.displayWarning( 'requesting' );
 
-            if ( navigator.getUserMedia ) {
-                navigator.getUserMedia( { video:true }, bp.WebCam.gotStream, bp.WebCam.noStream );
-            }  else if ( navigator.oGetUserMedia ) {
-                navigator.oGetUserMedia( { video:true }, bp.WebCam.gotStream, bp.WebCam.noStream );
-            } else if ( navigator.mozGetUserMedia ) {
-                navigator.mozGetUserMedia( { video:true }, bp.WebCam.gotStream, bp.WebCam.noStream );
-            } else if ( navigator.webkitGetUserMedia ) {
-                navigator.webkitGetUserMedia( { video:true }, bp.WebCam.gotStream, bp.WebCam.noStream );
-            } else if (navigator.msGetUserMedia) {
-                navigator.msGetUserMedia( { video:true, audio:false }, bp.WebCams.gotStream, bp.WebCam.noStream );
+            // Use deprecated getUserMedia call for browsers that require it.
+            if ( typeof navigator.mediaDevices.getUserMedia === 'undefined' ) {
+                navigator.getUserMedia({
+                    audio: false,
+                    video: true
+                }, bp.WebCam.gotStream, bp.WebCam.noStream);
+
+            // Teh new hotness!
             } else {
-                // User Feedback
-                bp.WebCam.displayWarning( 'errormsg' );
+                navigator.mediaDevices.getUserMedia({
+                    audio: false,
+                    video: true
+                }).then(bp.WebCam.gotStream, bp.WebCam.noStream)
+                // ES3 compatibility.
+                ['catch'](function() {
+                    // User Feedback
+                    bp.WebCam.displayWarning( 'errormsg' );
+                });
             }
         },