diff options
Diffstat (limited to 'applications/luci-app-mjpg-streamer/htdocs/luci-static')
| -rw-r--r-- | applications/luci-app-mjpg-streamer/htdocs/luci-static/resources/view/mjpg-streamer/mjpg-streamer.js | 264 |
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(); + }, +}); |