Skip to:
Content

BuddyPress.org

Changeset 11944


Ignore:
Timestamp:
04/03/2018 04:58:03 PM (19 months 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:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-core/js/webcam.js

    r10496 r11944  
    8484            stream.onended = bp.WebCam.noStream();
    8585
    86             if ( video.mozSrcObject !== undefined ) {
    87                 video.mozSrcObject = stream;
     86            // Older browsers may not have srcObject
     87            if ( 'srcObject' in video ) {
     88                video.srcObject = stream;
     89            } else {
     90                // Avoid using this in new browsers, as it is going away.
     91                video.src = window.URL.createObjectURL( stream );
     92            }
     93
     94            video.onloadedmetadata = function() {
    8895                video.play();
    89             } else if ( navigator.mozGetUserMedia ) {
    90                 video.src = stream;
    91                 video.play();
    92             } else if ( video.srcObject !== undefined ) {
    93                 video.srcObject = stream;
    94             } else if ( window.URL ) {
    95                 video.src = window.URL.createObjectURL( stream );
    96             } else {
    97                 video.src = stream;
    98             }
     96            };
    9997
    10098            bp.WebCam.params.capture_enable = true;
     
    173171            var params;
    174172
    175             if ( navigator.getUserMedia || navigator.oGetUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia ) {
    176 
     173            // Standardize getUserMedia browser call.
     174            navigator.getUserMedia = (
     175                navigator.getUserMedia ||
     176                navigator.webkitGetUserMedia ||
     177                navigator.mozGetUserMedia ||
     178                navigator.msGetUserMedia ||
     179                navigator.oGetUserMedia
     180            );
     181
     182            if ( typeof navigator.getUserMedia !== 'undefined' ) {
    177183                // We need to add some cropping stuff to use bp.Avatar.setAvatar()
    178184                params = _.extend( _.pick( BP_Uploader.settings.defaults.multipart_params.bp_params,
     
    214220            bp.WebCam.displayWarning( 'requesting' );
    215221
    216             if ( navigator.getUserMedia ) {
    217                 navigator.getUserMedia( { video:true }, bp.WebCam.gotStream, bp.WebCam.noStream );
    218             }  else if ( navigator.oGetUserMedia ) {
    219                 navigator.oGetUserMedia( { video:true }, bp.WebCam.gotStream, bp.WebCam.noStream );
    220             } else if ( navigator.mozGetUserMedia ) {
    221                 navigator.mozGetUserMedia( { video:true }, bp.WebCam.gotStream, bp.WebCam.noStream );
    222             } else if ( navigator.webkitGetUserMedia ) {
    223                 navigator.webkitGetUserMedia( { video:true }, bp.WebCam.gotStream, bp.WebCam.noStream );
    224             } else if (navigator.msGetUserMedia) {
    225                 navigator.msGetUserMedia( { video:true, audio:false }, bp.WebCams.gotStream, bp.WebCam.noStream );
     222            // Use deprecated getUserMedia call for browsers that require it.
     223            if ( typeof navigator.mediaDevices.getUserMedia === 'undefined' ) {
     224                navigator.getUserMedia({
     225                    audio: false,
     226                    video: true
     227                }, bp.WebCam.gotStream, bp.WebCam.noStream);
     228
     229            // Teh new hotness!
    226230            } else {
    227                 // User Feedback
    228                 bp.WebCam.displayWarning( 'errormsg' );
     231                navigator.mediaDevices.getUserMedia({
     232                    audio: false,
     233                    video: true
     234                }).then(bp.WebCam.gotStream, bp.WebCam.noStream)
     235                // ES3 compatibility.
     236                ['catch'](function() {
     237                    // User Feedback
     238                    bp.WebCam.displayWarning( 'errormsg' );
     239                });
    229240            }
    230241        },
Note: See TracChangeset for help on using the changeset viewer.