mighty-webcamjs/components/WebcamContainer.js

HTML5 Webcam Image Capture Library with Flash Fallback

const React = require('react');
const PropTypes = require('prop-types');
const { findDOMNode } = require('react-dom');
const atom = require('atom-js');

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

const { localStorage } = require('../helpers');

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


class WebcamContainer extends BaseComponent {

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

	static defaultProps = {};

	state = {};

	handlePegRef = (element) => {
		this.props.onPegRef(findDOMNode(element));
	}

	renderFallbackContainer() {
		const { webcam, cssPrefix, cameraMode } = this.props;

		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 (
				<div className={ `${cssPrefix}__flash-not-detected` }>
					<a href="https://get.adobe.com/pl/flashplayer/" target="_blank">Please click here to install or enable Flash Player</a>
				</div>
			);
		}
	}

	componentDidMount() {
		const { webcam } = this.props;

		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);
		}
	}

	renderFlashFallbackContainer() {
		const { webcam, cssPrefix, webcam_path } = this.props;
		let 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 = <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.</h3>;
		}

		// 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
		let flashvars = '';

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

		const 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 [
			<div
				className={`${cssPrefix}__flash-container`}
				dangerouslySetInnerHTML={{ __html: html }}
				key="flashcontainer"
			>
			</div>,
			extraMarkup
		];
	}

	renderWebRTCContainer() {
		const { webcam, cssPrefix, onVideoRef } = this.props;
		if (!webcam.params.get('userMedia')) return null;

		return <WebRTCComponent webcam={ webcam } model={ webcam.params } onVideoRef={ onVideoRef } cssPrefix={ cssPrefix } />;
	}

	renderSwitchCameraButton() {
		const { webcam, cssPrefix, cameraInfs } = this.props;
		if (!webcam.params.get('userMedia')) return null;
		if (cameraInfs.length <= 1) return null;

		return <SwitchCameraButton webcam={ webcam } model={ webcam.params } cssPrefix={ cssPrefix } />;
	}

	renderFlashLightButton() {
		const { webcam, cssPrefix } = this.props;
		if (!webcam.params.get('userMedia')) return null;
		if (!webcam.params.get('live')) return null;

		return <FlashLightButton webcam={ webcam } model={ webcam.params } cssPrefix={ cssPrefix } />;
	}

	render() {
		const { cssPrefix, width, height } = this.props;
		const style = {
			width: `${width}px`,
			height: `${height}px`,
		};
		return (
			<div style={ style }>
				<div className={ `${cssPrefix}__peg` } ref={ this.handlePegRef }></div>

				{ this.renderWebRTCContainer() }

				{ this.renderFallbackContainer() }

				{ this.renderSwitchCameraButton() }

				{ this.renderFlashLightButton() }
			</div>
		);
	}
}

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