avatar.client.directive.html

<div class="mg-avatar">
  <div data-ng-if="showCamera" class="mg-webcam-display">
    <webcam
      on-stream="onStream(stream)"
      on-error="onError(err)"
      on-streaming="onSuccess()"
      channel="channel"></webcam>
    <div data-ng-show="showWebcamControls" class="mg-webcam-controls">
      <button data-ng-hide="!showCamera" class="btn-shoot btn btn-default" type="button" ng-click="makeSnapshot()" title="Tomar foto"><span class="glyphicon glyphicon-unchecked" aria-hidden="true"></span></button>
      <button data-ng-click="removeAvatar()" class="btn-remove btn btn-default" type="button" title="Quitar foto"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
      <button data-ng-click="startCamera()" class="btn-off btn btn-default pull-right" type="button" title="Apagar camara"><span class="glyphicon glyphicon-off" aria-hidden="true"></span></button>
    </div>

  </div>
  <div class="mg-avatar-container">
    <div class="mg-avatar-frame">
      <canvas data-ng-if="showControls" data-ng-show="photoExists" id="snapshot" class="" width="320" height="240"></canvas>
      <img ng-src="{{hasPhoto}}" alt=""/>
    </div>
    <div data-ng-if="showControls" class="avatar-controls">
      <button data-ng-hide="showCamera" class="ctrl-photo btn btn-default" type="button" ng-click="startCamera()" title="Encender camara"><span class="glyphicon glyphicon-camera" aria-hidden="true"></span></button>
      <button class="ctrl-upload btn btn-default" type="button" title="Subir imagen"><span class="glyphicon glyphicon-upload" aria-hidden="true"></span></button>
    </div>
  </div>
</div>