luci-app-mjpg-streamer: migrate to js

Signed-off-by: Ayushman Tripathi <ayushmantripathi7724@gmail.com>
[fix commit message]
Signed-off-by: Jo-Philipp Wich <jo@mein.io>

1 files changed, 264 insertions, 0 deletions

diff --git a/applications/luci-app-mjpg-streamer/htdocs/luci-static/resources/view/mjpg-streamer/mjpg-streamer.js b/applications/luci-app-mjpg-streamer/htdocs/luci-static/resources/view/mjpg-streamer/mjpg-streamer.js
new file mode 100644
index 0000000000..6fb6f3c27b
--- /dev/null
+++ b/applications/luci-app-mjpg-streamer/htdocs/luci-static/resources/view/mjpg-streamer/mjpg-streamer.js
@@ -0,0 +1,264 @@
+'use strict';
+'require view';
+'require form';
+'require uci';
+'require ui';
+'require poll';
+
+/* Copyright 2014 Roger D < rogerdammit@gmail.com>
+Licensed to the public under the Apache License 2.0. */
+
+return view.extend({
+	load: function () {
+		var self = this;
+		poll.add(function () {
+			self.render();
+		}, 5);
+
+		document
+			.querySelector('head')
+			.appendChild(
+				E('style', { type: 'text/css' }, [
+					'.img-preview {display: inline-block !important;height: auto;width: 640px;padding: 4px;line-height: 1.428571429;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;margin-bottom: 5px;display: none;}',
+				]),
+			);
+
+		return Promise.all([uci.load('mjpg-streamer')]);
+	},
+	render: function () {
+		var m, s, o;
+
+		m = new form.Map('mjpg-streamer', 'MJPG-streamer', _('mjpg streamer is a streaming application for Linux-UVC compatible webcams'));
+
+		//General settings
+
+		var section_gen = m.section(form.TypedSection, 'mjpg-streamer', _('General'));
+		section_gen.addremove = false;
+		section_gen.anonymous = true;
+
+		var enabled = section_gen.option(form.Flag, 'enabled', _('Enabled'), _('Enable MJPG-streamer'));
+
+		var input = section_gen.option(form.ListValue, 'input', _('Input plugin'));
+		input.depends('enabled', '1');
+		input.value('uvc', 'UVC');
+		// input: value("file", "File")
+		input.optional = false;
+
+		var output = section_gen.option(form.ListValue, 'output', _('Output plugin'));
+		output.depends('enabled', '1');
+		output.value('http', 'HTTP');
+		output.value('file', 'File');
+		output.optional = false;
+
+		//Plugin settings
+
+		s = m.section(form.TypedSection, 'mjpg-streamer', _('Plugin settings'));
+		s.addremove = false;
+		s.anonymous = true;
+
+		s.tab('output_http', _('HTTP output'));
+		s.tab('output_file', _('File output'));
+		s.tab('input_uvc', _('UVC input'));
+		// s: tab("input_file", _("File input"))
+
+		// Input UVC settings
+
+		var this_tab = 'input_uvc';
+
+		var device = s.taboption(this_tab, form.Value, 'device', _('Device'));
+		device.default = '/dev/video0';
+		//device.datatype = "device"
+		device.value('/dev/video0', '/dev/video0');
+		device.value('/dev/video1', '/dev/video1');
+		device.value('/dev/video2', '/dev/video2');
+		device.optional = false;
+
+		var resolution = s.taboption(this_tab, form.Value, 'resolution', _('Resolution'));
+		resolution.default = '640x480';
+		resolution.value('320x240', '320x240');
+		resolution.value('640x480', '640x480');
+		resolution.value('800x600', '800x600');
+		resolution.value('864x480', '864x480');
+		resolution.value('960x544', '960x544');
+		resolution.value('960x720', '960x720');
+		resolution.value('1280x720', '1280x720');
+		resolution.value('1280x960', '1280x960');
+		resolution.value('1920x1080', '1920x1080');
+		resolution.optional = true;
+
+		var fps = s.taboption(this_tab, form.Value, 'fps', _('Frames per second'));
+		fps.datatype = 'and(uinteger, min(1))';
+		fps.placeholder = '5';
+		fps.optional = true;
+
+		var yuv = s.taboption(this_tab, form.Flag, 'yuv', _('Enable YUYV format'), _('Automatic disabling of MJPEG mode'));
+
+		var quality = s.taboption(
+			this_tab,
+			form.Value,
+			'quality',
+			_('JPEG compression quality'),
+			_('Set the quality in percent. This setting activates YUYV format, disables MJPEG'),
+		);
+		quality.datatype = 'range(0, 100)';
+
+		var minimum_size = s.taboption(
+			this_tab,
+			form.Value,
+			'minimum_size',
+			_('Drop frames smaller than this limit'),
+			_('Set the minimum size if the webcam produces small-sized garbage frames. May happen under low light conditions'),
+		);
+		minimum_size.datatype = 'uinteger';
+
+		var no_dynctrl = s.taboption(this_tab, form.Flag, 'no_dynctrl', _("Don't initialize dynctrls"), _('Do not initialize dynctrls of Linux-UVC driver'));
+
+		var led = s.taboption(this_tab, form.ListValue, 'led', _('Led control'));
+		led.value('on', _('On'));
+		led.value('off', _('Off'));
+		led.value('blink', _('Blink'));
+		led.value('auto', _('Auto'));
+		led.optional = true;
+
+		// Output HTTP settings
+
+		this_tab = 'output_http';
+
+		var port = s.taboption(this_tab, form.Value, 'port', _('Port'), _('TCP port for this HTTP server'));
+		port.datatype = 'port';
+		port.placeholder = '8080';
+
+		var enable_auth = s.taboption(this_tab, form.Flag, 'enable_auth', _('Authentication required'), _('Ask for username and password on connect'));
+		enable_auth.default = false;
+
+		var username = s.taboption(this_tab, form.Value, 'username', _('Username'));
+		username.depends('enable_auth', '1');
+		username.optional = false;
+
+		var password = s.taboption(this_tab, form.Value, 'password', _('Password'));
+		password.depends('enable_auth', '1');
+		password.password = true;
+		password.optional = false;
+		password.default = false;
+
+		var www = s.taboption(this_tab, form.Value, 'www', _('WWW folder'), _('Folder that contains webpages'));
+		www.datatype = 'directory';
+		www.default = '/www/webcam/';
+		www.optional = false;
+
+
+		function init_stream() {
+			console.log('init_stream');
+			start_stream();
+		}
+
+		function _start_stream() {
+			console.log('_start_stream');
+
+			var port = uci.get('mjpg-streamer', 'core', 'port');
+
+			if (uci.get('mjpg-streamer', 'core', 'enable_auth') == '1') {
+				var user = uci.get('mjpg-streamer', 'core', 'username');
+				var pass = uci.get('mjpg-streamer', 'core', 'password');
+				var login = user + ':' + pass + '@';
+			} else {
+				var login = '';
+			}
+
+			var img = document.getElementById('video_preview') || video_preview;
+			img.src = 'http://' + login + location.hostname + ':' + port + '/?action=snapshot' + '&t=' + new Date().getTime();
+		}
+
+		function start_stream() {
+			console.log('start_stream');
+
+			setTimeout(function () {
+				_start_stream();
+			}, 500);
+		}
+
+		function on_error() {
+			console.log('on_error');
+
+			var img = video_preview;
+			img.style.display = 'none';
+
+			var stream_stat = document.getElementById('stream_status') || stream_status;
+			stream_stat.style.display = 'block';
+
+			start_stream();
+		}
+
+		function on_load() {
+			console.log('on_load');
+
+			var img = video_preview;
+			img.style.display = 'block';
+
+			var stream_stat = stream_status;
+			stream_stat.style.display = 'none';
+		}
+
+		//HTTP preview
+		var video_preview = E('img', {
+			'id': 'video_preview',
+			'class': 'img-preview',
+			'error': on_error,
+			'load': on_load,
+		});
+
+		var stream_status = E(
+			'p',
+			{
+				'id': 'stream_status',
+				'style': 'text-align: center; color: orange; font-weight: bold;',
+			},
+			_('Stream unavailable'),
+		);
+
+
+		init_stream();
+
+		var preview = s.taboption(this_tab, form.DummyValue, '_dummy');
+		preview.render = L.bind(function (view, section_id) {
+			return E([], [
+				video_preview,
+				stream_status
+			]);
+		}, preview, this);
+		preview.depends('output', 'http');
+
+		//Output file settings
+
+		this_tab = 'output_file';
+
+		var folder = s.taboption(this_tab, form.Value, 'folder', _('Folder'), _('Set folder to save pictures'));
+		folder.placeholder = '/tmp/images';
+		folder.datatype = 'directory';
+
+		//mjpeg=s.taboption(this_tab, Value, "mjpeg", _("Mjpeg output"), _("Check to save the stream to an mjpeg file"))
+
+		var delay = s.taboption(this_tab, form.Value, 'delay', _('Interval between saving pictures'), _('Set the interval in millisecond'));
+		delay.placeholder = '5000';
+		delay.datatype = 'uinteger';
+
+		var ringbuffer = s.taboption(this_tab, form.Value, 'ringbuffer', _('Ring buffer size'), _('Max. number of pictures to hold'));
+		ringbuffer.placeholder = '10';
+		ringbuffer.datatype = 'uinteger';
+
+		var exceed = s.taboption(this_tab, form.Value, 'exceed', _('Exceed'), _('Allow ringbuffer to exceed limit by this amount'));
+		exceed.datatype = 'uinteger';
+
+		var command = s.taboption(
+			this_tab,
+			form.Value,
+			'command',
+			_('Command to run'),
+			_('Execute command after saving picture. Mjpg-streamer parses the filename as first parameter to your script.'),
+		);
+
+		var link = s.taboption(this_tab, form.Value, 'link', _('Link newest picture to fixed file name'), _('Link the last picture in ringbuffer to fixed named file provided.'));
+
+		return m.render();
+	},
+});