[Summary view] [Print] [Text view]

   1  /* global BP_Uploader, _, Backbone */
   2  
   3  window.bp = window.bp || {};
   4  
   5  ( function( bp ) {
   6  
   7      // Bail if not set.
   8      if ( typeof BP_Uploader === 'undefined' ) {
   9          return;
  10      }
  11  
  12      bp.Models      = bp.Models || {};
  13      bp.Collections = bp.Collections || {};
  14      bp.Views       = bp.Views || {};
  15  
  16      bp.WebCam = {
  17          start: function() {
  18              this.params = {
  19                  video:          null,
  20                  videoStream:    null,
  21                  capture_enable: false,
  22                  capture:        null,
  23                  canvas:         null,
  24                  warning:        null,
  25                  flipped:        false
  26              };
  27  
  28              bp.Avatar.nav.on( 'bp-avatar-view:changed', _.bind( this.setView, this ) );
  29          },
  30  
  31          setView: function( view ) {
  32              if ( 'camera' !== view ) {
  33                  // Stop the camera if needed.
  34                  if ( ! _.isNull( this.params.video ) ) {
  35                      this.stop();
  36  
  37                      // Remove all warnings as we're changing the view.
  38                      this.removeWarning();
  39                  }
  40  
  41                  // Stop as this is not Camera area.
  42                  return;
  43              }
  44  
  45              // Create the WebCam view.
  46              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;
  50  
  51              // Add it to views.
  52              bp.Avatar.views.add( { id: 'camera', view: cameraView } );
  53  
  54              // Display it.
  55              cameraView.inject( '.bp-avatar' );
  56          },
  57  
  58          removeView: function() {
  59              var camera;
  60  
  61              if ( ! _.isUndefined( bp.Avatar.views.get( 'camera' ) ) ) {
  62                  camera = bp.Avatar.views.get( 'camera' );
  63                  camera.get( 'view' ).remove();
  64                  bp.Avatar.views.remove( { id: 'camera', view: camera } );
  65              }
  66          },
  67  
  68          gotStream: function( stream ) {
  69              var video = bp.WebCam.params.video;
  70              bp.WebCam.params.videoStream = stream;
  71  
  72              // User Feedback.
  73              bp.WebCam.displayWarning( 'loaded' );
  74  
  75              video.onerror = function () {
  76                  // User Feedback.
  77                  bp.WebCam.displayWarning( 'videoerror' );
  78  
  79                  if ( video ) {
  80                      bp.WebCam.stop();
  81                  }
  82              };
  83  
  84              stream.onended = bp.WebCam.noStream();
  85  
  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() {
  95                  video.play();
  96              };
  97  
  98              bp.WebCam.params.capture_enable = true;
  99          },
 100  
 101          stop: function() {
 102              bp.WebCam.params.capture_enable = false;
 103              if ( bp.WebCam.params.videoStream ) {
 104                  if ( bp.WebCam.params.videoStream.stop ) {
 105                      bp.WebCam.params.videoStream.stop();
 106                  } else if ( bp.WebCam.params.videoStream.msStop ) {
 107                      bp.WebCam.params.videoStream.msStop();
 108                  }
 109                  bp.WebCam.params.videoStream.onended = null;
 110                  bp.WebCam.params.videoStream = null;
 111              }
 112              if ( bp.WebCam.params.video ) {
 113                  bp.WebCam.params.video.onerror = null;
 114                  bp.WebCam.params.video.pause();
 115                  if ( bp.WebCam.params.video.mozSrcObject ) {
 116                      bp.WebCam.params.video.mozSrcObject = null;
 117                  }
 118                  bp.WebCam.params.video.src = '';
 119              }
 120          },
 121  
 122          noStream: function() {
 123              if ( _.isNull( bp.WebCam.params.videoStream ) ) {
 124                  // User Feedback.
 125                  bp.WebCam.displayWarning( 'noaccess' );
 126  
 127                  bp.WebCam.removeView();
 128              }
 129          },
 130  
 131          setAvatar: function( avatar ) {
 132              if ( ! avatar.get( 'url' ) ) {
 133                  bp.WebCam.displayWarning( 'nocapture' );
 134              }
 135  
 136              // Remove the view.
 137              bp.WebCam.removeView();
 138  
 139              bp.Avatar.setAvatar( avatar );
 140          },
 141  
 142          removeWarning: function() {
 143              if ( ! _.isNull( this.params.warning ) ) {
 144                  this.params.warning.remove();
 145              }
 146          },
 147  
 148          displayWarning: function( code ) {
 149              this.removeWarning();
 150  
 151              this.params.warning = new bp.Views.uploaderWarning( {
 152                  value: BP_Uploader.strings.camera_warnings[code]
 153              } );
 154  
 155              this.params.warning.inject( '.bp-avatar-status' );
 156          }
 157      };
 158  
 159      // BuddyPress WebCam view.
 160      bp.Views.WebCamAvatar = bp.View.extend( {
 161          tagName: 'div',
 162          id: 'bp-webcam-avatar',
 163          template: bp.template( 'bp-avatar-webcam' ),
 164  
 165          events: {
 166              'click .avatar-webcam-capture': 'captureStream',
 167              'click .avatar-webcam-save': 'saveCapture'
 168          },
 169  
 170          initialize: function() {
 171              var params;
 172  
 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' ) {
 183                  // We need to add some cropping stuff to use bp.Avatar.setAvatar().
 184                  params = _.extend( _.pick( BP_Uploader.settings.defaults.multipart_params.bp_params,
 185                      'object',
 186                      'item_id',
 187                      'nonces'
 188                      ), {
 189                          user_media:  true,
 190                          w: BP_Uploader.settings.crop.full_w,
 191                          h: BP_Uploader.settings.crop.full_h,
 192                          x: 0,
 193                          y: 0,
 194                          type: 'camera'
 195                      }
 196                  );
 197  
 198                  this.model.set( params );
 199              }
 200  
 201              this.on( 'ready', this.useStream, this );
 202          },
 203  
 204          useStream:function() {
 205              // No support for user media... Stop!
 206              if ( ! this.model.get( 'user_media' ) ) {
 207                  return;
 208              }
 209  
 210              this.options.video = new bp.Views.WebCamVideo();
 211              this.options.canvas = new bp.Views.WebCamCanvas();
 212  
 213              this.$el.find( '#avatar-to-crop' ).append( this.options.video.el );
 214              this.$el.find( '#avatar-crop-pane' ).append( this.options.canvas.el );
 215  
 216              bp.WebCam.params.video = this.options.video.el;
 217              bp.WebCam.params.canvas = this.options.canvas.el;
 218  
 219              // User Feedback.
 220              bp.WebCam.displayWarning( 'requesting' );
 221  
 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!
 230              } else {
 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                  });
 240              }
 241          },
 242  
 243          captureStream: function( event ) {
 244              var sx, sc;
 245              event.preventDefault();
 246  
 247              if ( ! bp.WebCam.params.capture_enable ) {
 248                  // User Feedback.
 249                  bp.WebCam.displayWarning( 'loading' );
 250                  return;
 251              }
 252  
 253              if ( this.model.get( 'h' ) > this.options.video.el.videoHeight || this.model.get( 'w' ) > this.options.video.el.videoWidth ) {
 254                  bp.WebCam.displayWarning( 'videoerror' );
 255                  return;
 256              }
 257  
 258              // Set the offset.
 259              sc = this.options.video.el.videoHeight;
 260              sx = ( this.options.video.el.videoWidth - sc ) / 2;
 261  
 262              // Flip only once.
 263              if ( ! bp.WebCam.params.flipped ) {
 264                  this.options.canvas.el.getContext( '2d' ).translate( this.model.get( 'w' ), 0 );
 265                  this.options.canvas.el.getContext( '2d' ).scale( -1, 1 );
 266                  bp.WebCam.params.flipped = true;
 267              }
 268  
 269              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' ) );
 270              bp.WebCam.params.capture = this.options.canvas.el.toDataURL( 'image/png' );
 271              this.model.set( 'url', bp.WebCam.params.capture );
 272  
 273              // User Feedback.
 274              bp.WebCam.displayWarning( 'ready' );
 275          },
 276  
 277          saveCapture: function( event ) {
 278              event.preventDefault();
 279  
 280              if ( ! bp.WebCam.params.capture ) {
 281                  // User Feedback.
 282                  bp.WebCam.displayWarning( 'nocapture' );
 283                  return;
 284              }
 285  
 286              bp.WebCam.stop();
 287              bp.WebCam.setAvatar( this.model );
 288          }
 289      } );
 290  
 291      // BuddyPress Video stream view.
 292      bp.Views.WebCamVideo = bp.View.extend( {
 293          tagName: 'video',
 294          id: 'bp-webcam-video',
 295          attributes: {
 296              autoplay: 'autoplay'
 297          }
 298      } );
 299  
 300      // BuddyPress Canvas (capture) view.
 301      bp.Views.WebCamCanvas = bp.View.extend( {
 302          tagName: 'canvas',
 303          id: 'bp-webcam-canvas',
 304          attributes: {
 305              width:  150,
 306              height: 150
 307          },
 308  
 309          initialize: function() {
 310              // Make sure to take in account bp_core_avatar_full_height or bp_core_avatar_full_width php filters.
 311              if ( ! _.isUndefined( BP_Uploader.settings.crop.full_h ) && ! _.isUndefined( BP_Uploader.settings.crop.full_w ) ) {
 312                  this.el.attributes.width.value  = BP_Uploader.settings.crop.full_w;
 313                  this.el.attributes.height.value = BP_Uploader.settings.crop.full_h;
 314              }
 315          }
 316      } );
 317  
 318      bp.WebCam.start();
 319  
 320  })( window.bp );