Changeset 9800

Timestamp:

04/24/2015 05:44:46 PM (11 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:

• css/avatar-rtl.css (modified) (1 diff)
• css/avatar.css (modified) (1 diff)
• js/webcam.js (modified) (3 diffs)

trunk/src/bp-core/css/avatar-rtl.css

@@ -224 +224 @@
         max-width: 100%;
         width: 100%;
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
 }
 

trunk/src/bp-core/css/avatar.css

@@ -224 +224 @@
         max-width: 100%;
         width: 100%;
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
 }
 

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

@@ -22 +22 @@
                                 capture:        null,
                                 canvas:         null,
-                                warning:        null
+                                warning:        null,
+                                flipped:        false
                         };
 
@@ -44 +45 @@
                         // Create the WebCam view
                         var cameraView = new bp.Views.WebCamAvatar( { model: new Backbone.Model( { user_media: false } ) } );
+
+                        // Make sure the flipped param is reset
+                        this.params.flipped = false;
 
                         // Add it to views
@@ -243 +247 @@
                         sx = ( this.options.video.el.videoWidth - sc ) / 2;
 
+                        // Flip only once.
+                        if ( ! bp.WebCam.params.flipped ) {
+                                this.options.canvas.el.getContext( '2d' ).translate( this.model.get( 'w' ), 0 );
+                                this.options.canvas.el.getContext( '2d' ).scale( -1, 1 );
+                                bp.WebCam.params.flipped = true;
+                        }
+
                         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' ) );
                         bp.WebCam.params.capture = this.options.canvas.el.toDataURL( 'image/png' );