mighty-webcamjs/dist/components/WebcamContainer.js

HTML5 Webcam Image Capture Library with Flash Fallback

'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

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 React = require('react');
var PropTypes = require('prop-types');

var _require = require('react-dom'),
    findDOMNode = _require.findDOMNode;

var atom = require('atom-js');

var BaseComponent = require('./BaseComponent.js');
var FlashLightButton = require('./FlashLightButton');
var SwitchCameraButton = require('./SwitchCameraButton');
var WebRTCComponent = require('./WebRTCComponent');

var _require2 = require('../helpers'),
    localStorage = _require2.localStorage;

var navigator = global.navigator || {};
var location = global.location;
var protocol = location && location.protocol.replace(/:/, '');

var WebcamContainer = function (_BaseComponent) {
	_inherits(WebcamContainer, _BaseComponent);

	function WebcamContainer() {
		var _ref;

		var _temp, _this, _ret;

		_classCallCheck(this, WebcamContainer);

		for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
			args[_key] = arguments[_key];
		}

		return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = WebcamContainer.__proto__ || Object.getPrototypeOf(WebcamContainer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {}, _this.handlePegRef = function (element) {
			_this.props.onPegRef(findDOMNode(element));
		}, _temp), _possibleConstructorReturn(_this, _ret);
	}

	_createClass(WebcamContainer, [{
		key: 'renderFallbackContainer',
		value: function renderFallbackContainer() {
			var _props = this.props,
			    webcam = _props.webcam,
			    cssPrefix = _props.cssPrefix,
			    cameraMode = _props.cameraMode;


			switch (cameraMode) {
				case webcam.constants.CAMERA_MODE_FILE:
					return webcam.getUploadFallbackNode();
				case webcam.constants.CAMERA_MODE_FLASH:
					return this.renderFlashFallbackContainer();
				case webcam.constants.CAMERA_MODE_NONE:
					return React.createElement(
						'div',
						{ className: cssPrefix + '__flash-not-detected' },
						React.createElement(
							'a',
							{ href: 'https://get.adobe.com/pl/flashplayer/', target: '_blank' },
							'Please click here to install or enable Flash Player'
						)
					);
			}
		}
	}, {
		key: 'componentDidMount',
		value: function componentDidMount() {
			var webcam = this.props.webcam;


			if (webcam.params.get('userMedia')) {
				webcam.params.set('cameraMode', webcam.constants.CAMERA_MODE_WEBRTC);
			} else if (!webcam.detectFlash() && webcam.params.get('enable_file_fallback')) {
				webcam.params.set({
					'cameraMode': webcam.constants.CAMERA_MODE_FILE,
					'load': true
				});
			} else if (webcam.params.get('enable_flash') && webcam.detectFlash()) {
				// flash fallback
				global.Webcam = webcam; // needed for flash-to-js interface
				// HACK: Flash does not support higher resolutions so preview is distorted
				webcam.params.set({
					cameraMode: webcam.constants.CAMERA_MODE_FLASH,
					loadedVideoDimensions: {
						width: 640,
						height: 480
					},
					dest_width: 640,
					dest_height: 480,
					width: 640,
					height: 480,
					load: true
				});
			} else {
				webcam.dispatch('error', new webcam.errors.WebcamError(webcam.params.get('no_interface_found_text')));
				webcam.params.set('cameraMode', webcam.constants.CAMERA_MODE_NONE);
			}
		}
	}, {
		key: 'renderFlashFallbackContainer',
		value: function renderFlashFallbackContainer() {
			var _props2 = this.props,
			    webcam = _props2.webcam,
			    cssPrefix = _props2.cssPrefix,
			    webcam_path = _props2.webcam_path;

			var extraMarkup = null;

			// make sure we aren't running locally (flash doesn't work)
			if (protocol.match(/file/)) {
				webcam.dispatch('error', new webcam.errors.FlashError('Flash does not work from local disk.  Please run from a web server.'));
				extraMarkup = React.createElement(
					'h3',
					{ key: 'h3', className: cssPrefix + '__error' },
					'ERROR: the Webcam.js Flash fallback does not work from local disk.  Please run it from a web server.'
				);
			}

			// if this is the user's first visit, set flashvar so flash privacy settings panel is shown first
			if (!localStorage.getItem('webcamjs_visited')) {
				webcam.params.set('new_user', 1);
				try {
					// Safari Private mode does not allow to write any data in localStorage.
					// Exception is thrown instead.
					localStorage.setItem('webcamjs_visited', 1);
				} catch (e) {}
			}

			// construct flashvars string
			var flashvars = '';

			var params = this.params.get();
			for (var key in params) {
				if (params[key] instanceof Object) continue; // exclude function, nodes etc
				if (flashvars) flashvars += '&';
				flashvars += key + '=' + escape(params[key]);
			}

			var html = '<object class="' + cssPrefix + '__flash" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" type="application/x-shockwave-flash" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="' + params.width + '" height="' + params.height + '" id="' + webcam.constants.FLASH_OBJ_ID + '" align="middle"><param name="wmode" value="opaque" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="false" /><param name="movie" value="' + webcam_path + 'webcam.swf" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="best" /><param name="bgcolor" value="#ffffff" /><param name="flashvars" value="' + flashvars + '"/><embed id="' + webcam.constants.FLASH_EMBED_ID + '" src="' + webcam_path + 'webcam.swf" wmode="opaque" loop="false" menu="false" quality="best" bgcolor="#ffffff" width="' + params.width + '" height="' + params.height + '" name="' + webcam.constants.FLASH_EMBED_ID + '" align="middle" allowScriptAccess="always" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="' + flashvars + '"></embed></object>';

			return [React.createElement('div', {
				className: cssPrefix + '__flash-container',
				dangerouslySetInnerHTML: { __html: html },
				key: 'flashcontainer'
			}), extraMarkup];
		}
	}, {
		key: 'renderWebRTCContainer',
		value: function renderWebRTCContainer() {
			var _props3 = this.props,
			    webcam = _props3.webcam,
			    cssPrefix = _props3.cssPrefix,
			    onVideoRef = _props3.onVideoRef;

			if (!webcam.params.get('userMedia')) return null;

			return React.createElement(WebRTCComponent, { webcam: webcam, model: webcam.params, onVideoRef: onVideoRef, cssPrefix: cssPrefix });
		}
	}, {
		key: 'renderSwitchCameraButton',
		value: function renderSwitchCameraButton() {
			var _props4 = this.props,
			    webcam = _props4.webcam,
			    cssPrefix = _props4.cssPrefix,
			    cameraInfs = _props4.cameraInfs;

			if (!webcam.params.get('userMedia')) return null;
			if (cameraInfs.length <= 1) return null;

			return React.createElement(SwitchCameraButton, { webcam: webcam, model: webcam.params, cssPrefix: cssPrefix });
		}
	}, {
		key: 'renderFlashLightButton',
		value: function renderFlashLightButton() {
			var _props5 = this.props,
			    webcam = _props5.webcam,
			    cssPrefix = _props5.cssPrefix;

			if (!webcam.params.get('userMedia')) return null;
			if (!webcam.params.get('live')) return null;

			return React.createElement(FlashLightButton, { webcam: webcam, model: webcam.params, cssPrefix: cssPrefix });
		}
	}, {
		key: 'render',
		value: function render() {
			var _props6 = this.props,
			    cssPrefix = _props6.cssPrefix,
			    width = _props6.width,
			    height = _props6.height;

			var style = {
				width: width + 'px',
				height: height + 'px'
			};
			return React.createElement(
				'div',
				{ style: style },
				React.createElement('div', { className: cssPrefix + '__peg', ref: this.handlePegRef }),
				this.renderWebRTCContainer(),
				this.renderFallbackContainer(),
				this.renderSwitchCameraButton(),
				this.renderFlashLightButton()
			);
		}
	}]);

	return WebcamContainer;
}(BaseComponent);

WebcamContainer.propTypes = {
	webcam: PropTypes.object,
	className: PropTypes.string,
	model: PropTypes.object,
	cssPrefix: PropTypes.string,
	onPegRef: PropTypes.func,
	onVideoRef: PropTypes.func
};
WebcamContainer.defaultProps = {};


module.exports = atom.reactConnect('model', ['live', 'width', 'height', 'userMedia', 'cameraInfs', 'cameraMode', 'webcam_path'])(WebcamContainer);