opentok-rvc/dist/OTSubscriber.js

Opentok react video chat which support stream connection and signalling

'use strict';

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _uuid = require('uuid');

var _uuid2 = _interopRequireDefault(_uuid);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

// Random string for the image file name
var randomString = function(length, chars) {
	var mask = '';
	if (chars.indexOf('a') > -1) mask += 'abcdefghijklmnopqrstuvwxyz';
	if (chars.indexOf('A') > -1) mask += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
	if (chars.indexOf('#') > -1) mask += '0123456789';
	if (chars.indexOf('!') > -1) mask += '~`!@#$%^&*()_+-={}[]:";\'<>?,./|\\';
	var result = '';
	for (var i = length; i > 0; --i) result += mask[Math.round(Math.random() * (mask.length - 1))];
	return result;
}

// Save the screenshot
// Create a filename have randomstring
// Create a downloadable link for the file
var saveScreenshot = function(canvas) {
	var fileName = randomString(6, 'aA');
	const link = document.createElement('a');
	link.download = fileName + '.png';
	canvas.toBlob(function(blob) {
		link.href = URL.createObjectURL(blob);
		link.click();
	});
};

var OTSubscriber = function (_Component) {
	_inherits(OTSubscriber, _Component);

	function OTSubscriber(props) {
		_classCallCheck(this, OTSubscriber);

		var _this = _possibleConstructorReturn(this, (OTSubscriber.__proto__ || Object.getPrototypeOf(OTSubscriber)).call(this, props));

		_this.state = {
			subscriber: null
		};
		return _this;
	}

	_createClass(OTSubscriber, [
		{
			key: 'componentDidMount',
			value: function componentDidMount() {
				this.createSubscriber();
			}
		},
		{
			key: 'componentDidUpdate',
			value: function componentDidUpdate(prevProps) {
				var _this2 = this;

				var cast = function cast(value, Type, defaultValue) {
					return value === undefined ? defaultValue : Type(value);
				};

				var updateSubscriberProperty = function updateSubscriberProperty(key) {
					var previous = cast(prevProps.properties[key], Boolean, true);
					var current = cast(_this2.props.properties[key], Boolean, true);
					if (previous !== current) {
						_this2.state.subscriber[key](current);
					}
				};

				updateSubscriberProperty('subscribeToAudio');
				updateSubscriberProperty('subscribeToVideo');

				if (this.props.session !== prevProps.session || this.props.stream !== prevProps.stream) {
					this.destroySubscriber(prevProps.session);
					this.createSubscriber();
				}

				// watch resolution changes
				if(this.props.properties.resolution !== prevProps.properties.resolution) {
					console.log('subscriber video resolution =>', this.props.properties.resolution)
					prevProps.properties.resolution = this.props.properties.resolution;
					_this2.state.subscriber.resolution = prevProps.properties.resolution;
					this.destroySubscriber();
					this.createSubscriber();
				}

				// watch dimension changes
				if(this.props.properties.width !== prevProps.properties.width) {
					console.log('subscriber video dimension =>', this.props.properties.width)
					prevProps.properties.width = this.props.properties.width;
					_this2.state.subscriber.width = prevProps.properties.width;
					this.destroySubscriber();
					this.createSubscriber();
				}

				// watch fitMode changes
				if(this.props.properties.fitMode !== prevProps.properties.fitMode) {
					console.log('subscriber video fitmode =>', this.props.properties.fitMode)
					prevProps.properties.fitMode = this.props.properties.fitMode;
					_this2.state.subscriber.fitMode = prevProps.properties.fitMode;
					this.destroySubscriber();
					this.createSubscriber();
				}

				// Check user asked for the screenshot
				var canIterate = true;
				if(this.props.properties.screenShot === true && canIterate === true) {
					canIterate = false;
					prevProps.properties.screenShot = false;
					_this2.state.subscriber.screenShot = false;
					var imgData = _this2.state.subscriber.getImgData();

					const pageImage = new Image();
					pageImage.src = 'data:image/png;base64,' + imgData;
					pageImage.onload = function() {
						const canvas = document.createElement('canvas');
						canvas.width = pageImage.naturalWidth;
						canvas.height= pageImage.naturalHeight;

						const ctx = canvas.getContext('2d');
						ctx.imageSmoothingEnabled = false;
						ctx.drawImage(pageImage, 0, 0);
						
						saveScreenshot(canvas);
					}
				}
			}
		},
		{
			key: 'componentWillUnmount',
			value: function componentWillUnmount() {
				this.destroySubscriber();
			}
		},
		{
			key: 'getSubscriber',
			value: function getSubscriber() {
				return this.state.subscriber;
			}
		},
		{
			key: 'createSubscriber',
			value: function createSubscriber() {
				var _this3 = this;

				var subscribers = {};

				if (!this.props.session || !this.props.stream) {
					this.setState({ subscriber: null });
					return;
				}

				var container = document.createElement('div');
				container.setAttribute('class', 'OTSubscriberContainer');
				// container.setAttribute('id', this.props.stream.streamId); 
				this.node.appendChild(container);

				this.subscriberId = (0, _uuid2.default)();
				var subscriberId = this.subscriberId;

				var subscriber = this.props.session.subscribe(this.props.stream, container, this.props.properties, function (err) {
					if (subscriberId !== _this3.subscriberId) {
						// Either this subscriber has been recreated or the
						// component unmounted so don't invoke any callbacks
						return;
					}
					if (err && typeof _this3.props.onError === 'function') {
						_this3.props.onError(err);
					} else if (!err && typeof _this3.props.onSubscribe === 'function') {
						_this3.props.onSubscribe();
					}
				});

				if (this.props.eventHandlers && _typeof(this.props.eventHandlers) === 'object') {
					subscriber.on(this.props.eventHandlers);
				}

				subscribers[this.subscriberId] = subscriber;

				this.setState({ subscriber: subscriber });
			}
		},
		{
			key: 'destroySubscriber',
			value: function destroySubscriber() {
				var _this4 = this;

				var session = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props.session;

				delete this.subscriberId;

				if (this.state.subscriber) {
					if (this.props.eventHandlers && _typeof(this.props.eventHandlers) === 'object') {
						this.state.subscriber.once('destroyed', function () {
							_this4.state.subscriber.off(_this4.props.eventHandlers);
						});
					}

					if (session) {
						session.unsubscribe(this.state.subscriber);
					}
				}
			}
		},
		{
			key: 'render',
			value: function render() {
				var _this5 = this;

				return _react2.default.createElement('div', {
					ref: function ref(node) {
						return _this5.node = node;
					}
				});
			}
		}
	]);

	return OTSubscriber;
}(_react.Component);

exports.default = OTSubscriber;

OTSubscriber.propTypes = {
	stream: _propTypes2.default.shape({
		streamId: _propTypes2.default.string
	}),
	session: _propTypes2.default.shape({
		subscribe: _propTypes2.default.func,
		unsubscribe: _propTypes2.default.func
	}),
	properties: _propTypes2.default.object, // eslint-disable-line react/forbid-prop-types
	eventHandlers: _propTypes2.default.objectOf(_propTypes2.default.func),
	onSubscribe: _propTypes2.default.func,
	onError: _propTypes2.default.func,
	resolution: _propTypes2.default.string
};

OTSubscriber.defaultProps = {
	stream: null,
	session: null,
	properties: {},
	eventHandlers: null,
	onSubscribe: null,
	onError: null
};