uppy/lib/plugins/Webcam/index.js

Almost as cute as a Puppy :dog:

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var _Promise = typeof Promise === 'undefined' ? require('es6-promise').Promise : Promise;

var Plugin = require('../Plugin');
var WebcamProvider = require('../../uppy-base/src/plugins/Webcam');
var Translator = require('../../core/Translator');

var _require = require('../../core/Utils'),
    extend = _require.extend,
    getFileTypeExtension = _require.getFileTypeExtension,
    supportsMediaRecorder = _require.supportsMediaRecorder;

var WebcamIcon = require('./WebcamIcon');
var CameraScreen = require('./CameraScreen');
var PermissionsScreen = require('./PermissionsScreen'

/**
 * Webcam
 */
);module.exports = function (_Plugin) {
  _inherits(Webcam, _Plugin);

  function Webcam(core, opts) {
    _classCallCheck(this, Webcam);

    var _this

    // Camera controls

    // this.justSmile = this.justSmile.bind(this)

    = _possibleConstructorReturn(this, _Plugin.call(this, core, opts));

    _this.userMedia = true;
    _this.protocol = location.protocol.match(/https/i) ? 'https' : 'http';
    _this.type = 'acquirer';
    _this.id = 'Webcam';
    _this.title = 'Webcam';
    _this.icon = WebcamIcon;
    _this.focus = _this.focus.bind(_this);

    var defaultLocale = {
      strings: {
        smile: 'Smile!'
      }

      // set default options
    };var defaultOptions = {
      enableFlash: true,
      onBeforeSnapshot: function onBeforeSnapshot() {
        return Promise.resolve();
      },
      countdown: false,
      locale: defaultLocale,
      modes: ['video-audio', 'video-only', 'audio-only', 'picture']
    };

    _this.params = {
      swfURL: 'webcam.swf',
      width: 400,
      height: 300,
      dest_width: 800, // size of captured image
      dest_height: 600, // these default to width/height
      image_format: 'jpeg', // image format (may be jpeg or png)
      jpeg_quality: 90, // jpeg image quality from 0 (worst) to 100 (best)
      enable_flash: true, // enable flash fallback,
      force_flash: false, // force flash mode,
      flip_horiz: false, // flip image horiz (mirror mode)
      fps: 30, // camera frames per second
      upload_name: 'webcam', // name of file in upload post data
      constraints: null, // custom user media constraints,
      flashNotDetectedText: 'ERROR: No Adobe Flash Player detected.  Webcam.js relies on Flash for browsers that do not support getUserMedia (like yours).',
      noInterfaceFoundText: 'No supported webcam interface found.',
      unfreeze_snap: true // Whether to unfreeze the camera after snap (defaults to true)


      // merge default options with the ones set by user
    };_this.opts = _extends({}, defaultOptions, opts);

    _this.locale = _extends({}, defaultLocale, _this.opts.locale);
    _this.locale.strings = _extends({}, defaultLocale.strings, _this.opts.locale.strings

    // i18n
    );_this.translator = new Translator({ locale: _this.locale });
    _this.i18n = _this.translator.translate.bind(_this.translator);

    _this.install = _this.install.bind(_this);
    _this.setPluginState = _this.setPluginState.bind(_this);

    _this.render = _this.render.bind(_this);_this.start = _this.start.bind(_this);
    _this.stop = _this.stop.bind(_this);
    _this.takeSnapshot = _this.takeSnapshot.bind(_this);
    _this.startRecording = _this.startRecording.bind(_this);
    _this.stopRecording = _this.stopRecording.bind(_this);
    _this.oneTwoThreeSmile = _this.oneTwoThreeSmile.bind(_this);_this.webcam = new WebcamProvider(_this.opts, _this.params);
    _this.webcamActive = false;

    if (_this.opts.countdown) {
      _this.opts.onBeforeSnapshot = _this.oneTwoThreeSmile;
    }

    // if (typeof opts.onBeforeSnapshot === 'undefined' || !this.opts.onBeforeSnapshot) {
    //   if (this.opts.countdown) {
    //     this.opts.onBeforeSnapshot = this.oneTwoThreeSmile
    //   } else {
    //     this.opts.onBeforeSnapshot = this.justSmile
    //   }
    // }
    return _this;
  }

  /**
   * Little shorthand to update the state with my new state
   */


  Webcam.prototype.setPluginState = function setPluginState(newState) {
    var state = this.core.state;

    var webcam = _extends({}, state.webcam, newState);

    this.core.setState({ webcam: webcam });
  };

  Webcam.prototype.start = function start() {
    var _this2 = this;

    this.webcamActive = true;

    this.webcam.start().then(function (stream) {
      _this2.stream = stream;
      _this2.setPluginState({
        // videoStream: stream,
        cameraReady: true
      });
    }).catch(function (err) {
      _this2.setPluginState({
        cameraError: err
      });
    });
  };

  Webcam.prototype.startRecording = function startRecording() {
    var _this3 = this;

    // TODO We can check here if any of the mime types listed in the
    // mimeToExtensions map in Utils.js are supported, and prefer to use one of
    // those.
    // Right now we let the browser pick a type that it deems appropriate.
    this.recorder = new MediaRecorder(this.stream);
    this.recordingChunks = [];
    this.recorder.addEventListener('dataavailable', function (event) {
      _this3.recordingChunks.push(event.data);
    });
    this.recorder.start();

    this.setPluginState({
      isRecording: true
    });
  };

  Webcam.prototype.stopRecording = function stopRecording() {
    var _this4 = this;

    return new _Promise(function (resolve, reject) {
      _this4.recorder.addEventListener('stop', function () {
        _this4.setPluginState({
          isRecording: false
        });

        var mimeType = _this4.recordingChunks[0].type;
        var fileExtension = getFileTypeExtension(mimeType);

        if (!fileExtension) {
          reject(new Error('Could not upload file: Unsupported media type "' + mimeType + '"'));
          return;
        }

        var file = {
          source: _this4.id,
          name: 'webcam-' + Date.now() + '.' + fileExtension,
          type: mimeType,
          data: new Blob(_this4.recordingChunks, { type: mimeType })
        };

        _this4.core.addFile(file);

        _this4.recordingChunks = null;
        _this4.recorder = null;

        resolve();
      });

      _this4.recorder.stop();
    });
  };

  Webcam.prototype.stop = function stop() {
    this.stream.getAudioTracks().forEach(function (track) {
      track.stop();
    });
    this.stream.getVideoTracks().forEach(function (track) {
      track.stop();
    });
    this.webcamActive = false;
    this.stream = null;
    this.streamSrc = null;
  };

  Webcam.prototype.oneTwoThreeSmile = function oneTwoThreeSmile() {
    var _this5 = this;

    return new _Promise(function (resolve, reject) {
      var count = _this5.opts.countdown;

      var countDown = setInterval(function () {
        if (!_this5.webcamActive) {
          clearInterval(countDown);
          _this5.captureInProgress = false;
          return reject('Webcam is not active');
        }

        if (count > 0) {
          _this5.core.info(count + '...', 'warning', 800);
          count--;
        } else {
          clearInterval(countDown);
          _this5.core.info(_this5.i18n('smile'), 'success', 1500);
          setTimeout(function () {
            return resolve();
          }, 1500);
        }
      }, 1000);
    });
  };

  // justSmile () {
  //   return new Promise((resolve, reject) => {
  //     setTimeout(() => this.core.info(this.i18n('smile'), 'success', 1000), 1500)
  //     setTimeout(() => resolve(), 2000)
  //   })
  // }

  Webcam.prototype.takeSnapshot = function takeSnapshot() {
    var _this6 = this;

    var opts = {
      name: 'webcam-' + Date.now() + '.jpg',
      mimeType: 'image/jpeg'
    };

    this.videoEl = this.target.querySelector('.UppyWebcam-video');

    if (this.captureInProgress) return;
    this.captureInProgress = true;

    this.opts.onBeforeSnapshot().catch(function (err) {
      _this6.core.info(err, 'error', 5000);
      return Promise.reject('onBeforeSnapshot: ' + err);
    }).then(function () {
      var video = _this6.target.querySelector('.UppyWebcam-video');
      if (!video) {
        _this6.captureInProgress = false;
        return Promise.reject('No video element found, likely due to the Webcam tab being closed.');
      }

      var image = _this6.webcam.getImage(video, opts);

      var tagFile = {
        source: _this6.id,
        name: opts.name,
        data: image.data,
        type: opts.mimeType
      };

      _this6.captureInProgress = false;
      _this6.core.addFile(tagFile);
    });
  };

  Webcam.prototype.focus = function focus() {
    var _this7 = this;

    if (this.opts.countdown) return;
    setTimeout(function () {
      _this7.core.info(_this7.i18n('smile'), 'success', 1500);
    }, 1000);
  };

  Webcam.prototype.render = function render(state) {
    if (!this.webcamActive) {
      this.start();
    }

    if (!state.webcam.cameraReady && !state.webcam.useTheFlash) {
      return PermissionsScreen(state.webcam);
    }

    if (!this.streamSrc) {
      this.streamSrc = this.stream ? URL.createObjectURL(this.stream) : null;
    }

    return CameraScreen(extend(state.webcam, {
      onSnapshot: this.takeSnapshot,
      onStartRecording: this.startRecording,
      onStopRecording: this.stopRecording,
      onFocus: this.focus,
      onStop: this.stop,
      modes: this.opts.modes,
      supportsRecording: supportsMediaRecorder(),
      recording: state.webcam.isRecording,
      getSWFHTML: this.webcam.getSWFHTML,
      src: this.streamSrc
    }));
  };

  Webcam.prototype.install = function install() {
    this.webcam.init();
    this.core.setState({
      webcam: {
        cameraReady: false
      }
    });

    var target = this.opts.target;
    var plugin = this;
    this.target = this.mount(target, plugin);
  };

  Webcam.prototype.uninstall = function uninstall() {
    this.webcam.reset();
    this.unmount();
  };

  return Webcam;
}(Plugin);
//# sourceMappingURL=index.js.map