104 lines
3.6 KiB
JavaScript
104 lines
3.6 KiB
JavaScript
var cameraMixin = {
|
|
props: ['config'],
|
|
|
|
data: function() {
|
|
return {
|
|
bus: new Vue({}),
|
|
streaming: false,
|
|
capturing: false,
|
|
showParams: false,
|
|
url: null,
|
|
attrs: {
|
|
resolution: this.config.resolution || [640, 480],
|
|
device: this.config.device,
|
|
horizontal_flip: this.config.horizontal_flip || 0,
|
|
vertical_flip: this.config.vertical_flip || 0,
|
|
rotate: this.config.rotate || 0,
|
|
scale_x: this.config.scale_x || 1.0,
|
|
scale_y: this.config.scale_y || 1.0,
|
|
fps: this.config.fps || 16.0,
|
|
grayscale: this.config.grayscale || 0,
|
|
stream_format: this.config.stream_format || 'mjpeg',
|
|
},
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
params: function() {
|
|
return {
|
|
resolution: this.attrs.resolution,
|
|
device: this.attrs.device != null && ('' + this.attrs.device).length > 0 ? this.attrs.device : null,
|
|
horizontal_flip: parseInt(0 + this.attrs.horizontal_flip),
|
|
vertical_flip: parseInt(0 + this.attrs.vertical_flip),
|
|
rotate: parseFloat(this.attrs.rotate),
|
|
scale_x: parseFloat(this.attrs.scale_x),
|
|
scale_y: parseFloat(this.attrs.scale_y),
|
|
fps: parseFloat(this.attrs.fps),
|
|
grayscale: parseInt(0 + this.attrs.grayscale),
|
|
};
|
|
},
|
|
|
|
window: function() {
|
|
return window;
|
|
},
|
|
},
|
|
|
|
methods: {
|
|
getUrl: function(plugin, action) {
|
|
return '/camera/' + plugin + '/' + action + '?' +
|
|
Object.entries(this.params).filter(([k, v]) => v != null && ('' + v).length > 0)
|
|
.map(([k, v]) => k + '=' + v).join('&');
|
|
},
|
|
|
|
_startStreaming: function(plugin) {
|
|
if (this.streaming)
|
|
return;
|
|
|
|
this.streaming = true;
|
|
this.capturing = false;
|
|
this.url = this.getUrl(plugin, 'video.' + this.attrs.stream_format);
|
|
},
|
|
|
|
stopStreaming: function() {
|
|
if (!this.streaming)
|
|
return;
|
|
|
|
this.streaming = false;
|
|
this.capturing = false;
|
|
this.url = null;
|
|
},
|
|
|
|
_capture: function(plugin) {
|
|
if (this.capturing)
|
|
return;
|
|
|
|
this.streaming = false;
|
|
this.capturing = true;
|
|
this.url = this.getUrl(plugin, 'photo.jpg') + '&t=' + (new Date()).getTime();
|
|
},
|
|
|
|
onFrameLoaded: function(event) {
|
|
if (this.capturing) {
|
|
this.capturing = false;
|
|
}
|
|
},
|
|
|
|
onDeviceChanged: function(event) {},
|
|
onFlipChanged: function(event) {},
|
|
onSizeChanged: function(event) {
|
|
const degToRad = (deg) => (deg * Math.PI)/180;
|
|
const rot = degToRad(this.params.rotate);
|
|
this.$refs.frameContainer.style.width = Math.round(this.params.scale_x * Math.abs(this.params.resolution[0] * Math.cos(rot) + this.params.resolution[1] * Math.sin(rot))) + 'px';
|
|
this.$refs.frameContainer.style.height = Math.round(this.params.scale_y * Math.abs(this.params.resolution[0] * Math.sin(rot) + this.params.resolution[1] * Math.cos(rot))) + 'px';
|
|
},
|
|
|
|
onFpsChanged: function(event) {},
|
|
onGrayscaleChanged: function(event) {},
|
|
},
|
|
|
|
mounted: function() {
|
|
this.$refs.frame.addEventListener('load', this.onFrameLoaded);
|
|
this.onSizeChanged();
|
|
},
|
|
};
|