mighty-webcamjs/components/FlashLightButton.js

HTML5 Webcam Image Capture Library with Flash Fallback

const React = require('react');
const PropTypes = require('prop-types');
const atom = require('atom-js');

const BaseComponent = require('./BaseComponent.js');

class FlashLightButton extends BaseComponent {

	static propTypes = {
		webcam: PropTypes.object.isRequired,
		model: PropTypes.object.isRequired,
		cssPrefix: PropTypes.string.isRequired,
	};

	static defaultProps = {};

	state = {
		flashLightEnabled: false,
	};

	handleClick = () => {
		const { webcam } = this.props;
		const track = webcam.video.srcObject.getVideoTracks()[0];
		const flashLightEnabledNow = !this.state.flashLightEnabled;
		track.applyConstraints({
			advanced: [{ torch: flashLightEnabledNow }]
		});
		this.setState({ flashLightEnabled: flashLightEnabledNow });
	}

	render() {
		const { use_ImageCapture_API, photoCapabilities } = this.props;
		const { flashLightEnabled } = this.state;

		if (
			!use_ImageCapture_API
			|| !photoCapabilities
			|| !photoCapabilities.fillLightMode
			|| !photoCapabilities.fillLightMode.includes('flash')
		) return null;

		const cn = `${this.props.cssPrefix}__flash-light-button`;

		return (
			<button
				disabled={ !this.props.live }
				className={ `${cn} ${cn}--${flashLightEnabled ? 'enabled' : 'disabled'}` }
				type="button"
				onClick={ this.handleClick }
			>
				{ this.props.flash_light_node }
			</button>
		);
	}
}

module.exports = atom.reactConnect('model', [
	'live',
	'use_ImageCapture_API',
	'photoCapabilities',
	'flash_light_node',
])(FlashLightButton);