Skip to:
Content

BuddyPress.org

Changeset 9800


Ignore:
Timestamp:
04/24/2015 05:44:46 PM (5 years ago)
Author:
imath
Message:

Avatar UI: Improve the webcam capture

Flip the video and the video capture horizontally so that it is easier and more natural to use.

Props DJPaul

See #6290

Location:
trunk/src/bp-core
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/bp-core/css/avatar-rtl.css

    r9799 r9800  
    224224    max-width: 100%;
    225225    width: 100%;
     226    -webkit-transform: scaleX(-1);
     227    transform: scaleX(-1);
    226228}
    227229
  • trunk/src/bp-core/css/avatar.css

    r9799 r9800  
    224224    max-width: 100%;
    225225    width: 100%;
     226    -webkit-transform: scaleX(-1);
     227    transform: scaleX(-1);
    226228}
    227229
  • trunk/src/bp-core/js/webcam.js

    r9754 r9800  
    2222                capture:        null,
    2323                canvas:         null,
    24                 warning:        null
     24                warning:        null,
     25                flipped:        false
    2526            };
    2627
     
    4445            // Create the WebCam view
    4546            var cameraView = new bp.Views.WebCamAvatar( { model: new Backbone.Model( { user_media: false } ) } );
     47
     48            // Make sure the flipped param is reset
     49            this.params.flipped = false;
    4650
    4751            // Add it to views
     
    243247            sx = ( this.options.video.el.videoWidth - sc ) / 2;
    244248
     249            // Flip only once.
     250            if ( ! bp.WebCam.params.flipped ) {
     251                this.options.canvas.el.getContext( '2d' ).translate( this.model.get( 'w' ), 0 );
     252                this.options.canvas.el.getContext( '2d' ).scale( -1, 1 );
     253                bp.WebCam.params.flipped = true;
     254            }
     255
    245256            this.options.canvas.el.getContext( '2d' ).drawImage( this.options.video.el, sx, 0, sc, sc, 0, 0, this.model.get( 'w' ), this.model.get( 'h' ) );
    246257            bp.WebCam.params.capture = this.options.canvas.el.toDataURL( 'image/png' );
Note: See TracChangeset for help on using the changeset viewer.