Rocket.Chat/app/ui-vrecord/client/vrecord.js

import { Template } from 'meteor/templating';
import { TAPi18n } from 'meteor/rocketchat:tap-i18n';
import { ReactiveVar } from 'meteor/reactive-var';
import _ from 'underscore';

import { VRecDialog } from './VRecDialog';
import { VideoRecorder, fileUpload } from '../../ui';

Template.vrecDialog.helpers({
	recordIcon() {
		if (VideoRecorder.cameraStarted.get() && VideoRecorder.recording.get()) {
			return 'icon-stop';
		}
		return 'icon-circle';
	},

	okDisabled() {
		if (VideoRecorder.cameraStarted.get() && VideoRecorder.recordingAvailable.get()) {
			return '';
		}
		return 'disabled';
	},

	recordDisabled() {
		return VideoRecorder.cameraStarted.get() ? '' : 'disabled';
	},

	time() {
		return Template.instance().time.get();
	},

});

const recordingInterval = new ReactiveVar(null);

Template.vrecDialog.events({
	'click .vrec-dialog .cancel'(e, t) {
		VideoRecorder.stop();
		VRecDialog.close();
		t.time.set('');
		if (recordingInterval.get()) {
			clearInterval(recordingInterval.get());
			recordingInterval.set(null);
		}
	},

	'click .vrec-dialog .record'(e, t) {
		if (VideoRecorder.recording.get()) {
			VideoRecorder.stopRecording();
			if (recordingInterval.get()) {
				clearInterval(recordingInterval.get());
				recordingInterval.set(null);
			}
		} else {
			VideoRecorder.record();
			t.time.set('00:00');
			const startTime = new Date();
			recordingInterval.set(setInterval(() => {
				const now = new Date();
				const distance = (now.getTime() - startTime.getTime()) / 1000;
				const minutes = Math.floor(distance / 60);
				const seconds = Math.floor(distance % 60);
				t.time.set(`${ String(minutes).padStart(2, '0') }:${ String(seconds).padStart(2, '0') }`);
			}, 1000));
		}
	},

	'click .vrec-dialog .ok'(e, instance) {
		const [rid, tmid, input] = [instance.rid.get(), instance.tmid.get(), instance.input.get()];
		const cb = (blob) => {
			fileUpload([{ file: blob, type: 'video', name: `${ TAPi18n.__('Video record') }.webm` }], input, { rid, tmid });
			VRecDialog.close();
		};
		VideoRecorder.stop(cb);
		instance.time.set('');
		if (recordingInterval.get()) {
			clearInterval(recordingInterval.get());
			recordingInterval.set(null);
		}
	},
});

Template.vrecDialog.onCreated(function() {
	this.width = 400;
	this.height = 290;

	this.rid = new ReactiveVar();
	this.tmid = new ReactiveVar();
	this.input = new ReactiveVar();
	this.time = new ReactiveVar('');
	this.update = ({ rid, tmid, input }) => {
		this.rid.set(rid);
		this.tmid.set(tmid);
		this.input.set(input);
	};

	this.setPosition = function(dialog, source, anchor = 'left') {
		const _set = () => {
			const sourcePos = $(source).offset();
			let top = sourcePos.top - this.height - 5;

			if (top < 0) {
				top = 10;
			}
			if (anchor === 'left') {
				let right = window.innerWidth - (sourcePos.left + source.offsetWidth - 25);
				if (right < 0) {
					right = 10;
				}
				return dialog.css({ top: `${ top }px`, right: `${ right }px` });
			}
			let left = (sourcePos.left - this.width) + 100;
			if (left < 0) {
				left = 10;
			}
			return dialog.css({ top: `${ top }px`, left: `${ left }px` });
		};

		const set = _.debounce(_set, 2000);
		_set();
		this.remove = set;
		$(window).on('resize', set);
	};
});

Template.vrecDialog.onDestroyed(function() {
	$(window).off('resize', this.remove);
});