Changeset 9800

Timestamp:

04/24/2015 05:44:46 PM (10 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' );