diff --git a/platypush/backend/http/static/css/dist/webpanel/plugins/camera.css b/platypush/backend/http/static/css/dist/webpanel/plugins/camera.css
index 5037c711c4..1b515f9234 100644
--- a/platypush/backend/http/static/css/dist/webpanel/plugins/camera.css
+++ b/platypush/backend/http/static/css/dist/webpanel/plugins/camera.css
@@ -1 +1 @@
-.camera{min-height:90%;margin-top:4%;overflow:auto;display:flex;flex-direction:column;align-items:center}.camera .camera-container{min-width:640px;min-height:480px;position:relative;background:#000;margin-bottom:1em}.camera .camera-container .frame,.camera .camera-container .no-frame{position:absolute;top:0;width:100%;height:100%}.camera .camera-container .frame{z-index:1}.camera .camera-container .no-frame{display:flex;background:rgba(0,0,0,0.1);color:#fff;align-items:center;justify-content:center;z-index:2}
+.camera{min-height:90%;margin-top:4%;overflow:auto;display:flex;flex-direction:column;align-items:center}.camera .camera-container{position:relative;background:#000;margin-bottom:1em}.camera .camera-container .frame,.camera .camera-container .no-frame{position:absolute;top:0;width:100%;height:100%}.camera .camera-container .frame{z-index:1}.camera .camera-container .no-frame{display:flex;background:rgba(0,0,0,0.1);color:#fff;align-items:center;justify-content:center;z-index:2}.camera .url{width:640px;display:flex;margin:1em}.camera .url .row{width:100%;display:flex;align-items:center}.camera .url .name{width:140px}.camera .url input{width:500px;font-weight:normal}.camera .params{margin-top:1em;padding:1em;width:640px;display:flex;flex-direction:column;border:1px solid #ccc;border-radius:1em}.camera .params label{font-weight:normal}.camera .params .head{display:flex;justify-content:center}.camera .params .head label{width:100%;display:flex;justify-content:right}.camera .params .head label .name{margin-right:1em}.camera .params .body{display:flex;flex-direction:column;margin:0 0 0 -1em}.camera .params .body .row{width:100%;display:flex;align-items:center;padding:.5em}.camera .params .body .row .name{width:30%}.camera .params .body .row input{width:70%}.camera .params .body .row:nth-child(even){background:#e4e4e4}.camera .params .body .row:hover{background:#def6ea}
diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/camera.android.ipcam b/platypush/backend/http/static/css/source/webpanel/plugins/camera.android.ipcam
index 74de6c32f7..5f839334fe 120000
--- a/platypush/backend/http/static/css/source/webpanel/plugins/camera.android.ipcam
+++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera.android.ipcam
@@ -1 +1 @@
-camera.cv
\ No newline at end of file
+camera
\ No newline at end of file
diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/camera.ffmpeg b/platypush/backend/http/static/css/source/webpanel/plugins/camera.ffmpeg
new file mode 120000
index 0000000000..5f839334fe
--- /dev/null
+++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera.ffmpeg
@@ -0,0 +1 @@
+camera
\ No newline at end of file
diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/camera.ir.mlx90640 b/platypush/backend/http/static/css/source/webpanel/plugins/camera.ir.mlx90640
index 74de6c32f7..5f839334fe 120000
--- a/platypush/backend/http/static/css/source/webpanel/plugins/camera.ir.mlx90640
+++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera.ir.mlx90640
@@ -1 +1 @@
-camera.cv
\ No newline at end of file
+camera
\ No newline at end of file
diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/camera.pi b/platypush/backend/http/static/css/source/webpanel/plugins/camera.pi
index 74de6c32f7..5f839334fe 120000
--- a/platypush/backend/http/static/css/source/webpanel/plugins/camera.pi
+++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera.pi
@@ -1 +1 @@
-camera.cv
\ No newline at end of file
+camera
\ No newline at end of file
diff --git a/platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss b/platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss
new file mode 100644
index 0000000000..f8fc3bccc8
--- /dev/null
+++ b/platypush/backend/http/static/css/source/webpanel/plugins/camera/index.scss
@@ -0,0 +1,116 @@
+@import 'common/vars';
+
+.camera {
+ min-height: 90%;
+ margin-top: 4%;
+ overflow: auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ .camera-container {
+ position: relative;
+ background: black;
+ margin-bottom: 1em;
+
+ .frame, .no-frame {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ .frame {
+ z-index: 1;
+ }
+
+ .no-frame {
+ display: flex;
+ background: rgba(0, 0, 0, 0.1);
+ color: white;
+ align-items: center;
+ justify-content: center;
+ z-index: 2;
+ }
+ }
+
+ .url {
+ width: 640px;
+ display: flex;
+ margin: 1em;
+
+ .row {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ }
+
+ .name {
+ width: 140px;
+ }
+
+ input {
+ width: 500px;
+ font-weight: normal;
+ }
+ }
+
+ .params {
+ margin-top: 1em;
+ padding: 1em;
+ width: 640px;
+ display: flex;
+ flex-direction: column;
+ border: $default-border-3;
+ border-radius: 1em;
+
+ label {
+ font-weight: normal;
+ }
+
+ .head {
+ display: flex;
+ justify-content: center;
+
+ label {
+ width: 100%;
+ display: flex;
+ justify-content: right;
+
+ .name {
+ margin-right: 1em;
+ }
+ }
+ }
+
+ .body {
+ display: flex;
+ flex-direction: column;
+ margin: 0 0 0 -1em;
+
+ .row {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ padding: 0.5em;
+
+ .name {
+ width: 30%;
+ }
+
+ input {
+ width: 70%;
+ }
+
+ &:nth-child(even) {
+ background: $default-bg-6;
+ }
+
+ &:hover {
+ background: $hover-bg;
+ }
+ }
+ }
+ }
+}
+
diff --git a/platypush/backend/http/static/js/plugins/camera.ffmpeg/index.js b/platypush/backend/http/static/js/plugins/camera.ffmpeg/index.js
new file mode 100644
index 0000000000..5e8ee3213b
--- /dev/null
+++ b/platypush/backend/http/static/js/plugins/camera.ffmpeg/index.js
@@ -0,0 +1,15 @@
+Vue.component('camera-ffmpeg', {
+ template: '#tmpl-camera-ffmpeg',
+ mixins: [cameraMixin],
+
+ methods: {
+ startStreaming: function() {
+ this._startStreaming('ffmpeg');
+ },
+
+ capture: function() {
+ this._capture('ffmpeg');
+ },
+ },
+});
+
diff --git a/platypush/backend/http/static/js/plugins/camera.pi/index.js b/platypush/backend/http/static/js/plugins/camera.pi/index.js
index d7f4a9c039..7341c58910 100644
--- a/platypush/backend/http/static/js/plugins/camera.pi/index.js
+++ b/platypush/backend/http/static/js/plugins/camera.pi/index.js
@@ -11,9 +11,5 @@ Vue.component('camera-pi', {
this._capture('pi');
},
},
-
- mounted: function() {
- this.attrs.resolution = [640, 480];
- }
});
diff --git a/platypush/backend/http/templates/plugins/camera.ffmpeg/index.html b/platypush/backend/http/templates/plugins/camera.ffmpeg/index.html
new file mode 100644
index 0000000000..bb22481cdc
--- /dev/null
+++ b/platypush/backend/http/templates/plugins/camera.ffmpeg/index.html
@@ -0,0 +1,6 @@
+
+
+
+