Skip to content

Commit

Permalink
luci-app-mjpg-streamer: migrate to js
Browse files Browse the repository at this point in the history 
Signed-off-by: Ayushman Tripathi <[email protected]>
[fix commit message]
Signed-off-by: Jo-Philipp Wich <[email protected]>
  • Loading branch information
@Ayushmanwebdeveloper @jow-
Ayushmanwebdeveloper authored and jow- committed Aug 31, 2023
1 parent 96b11ae commit 1b8e6e0
Show file tree
Hide file tree
Showing 5 changed files with 280 additions and 233 deletions.
2 changes: 1 addition & 1 deletion applications/luci-app-mjpg-streamer/Makefile
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
include $(TOPDIR)/rules.mk

LUCI_TITLE:=MJPG-Streamer service configuration module
LUCI_DEPENDS:=+luci-compat +mjpg-streamer
LUCI_DEPENDS:= +mjpg-streamer

include ../../luci.mk

Expand Down
264 changes: 264 additions & 0 deletions ...s/luci-app-mjpg-streamer/htdocs/luci-static/resources/view/mjpg-streamer/mjpg-streamer.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,264 @@
'use strict';
'require view';
'require form';
'require uci';
'require ui';
'require poll';

/* Copyright 2014 Roger D < [email protected]>
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();
},
});
Loading

0 comments on commit 1b8e6e0

Please sign in to comment.