v4l2camera-ui 0.1.8 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/assets/index-442177d6.css +5 -0
  2. package/dist/assets/index-4ccde23d.js +11 -0
  3. package/dist/assets/materialdesignicons-webfont-28c8f97f.woff +0 -0
  4. package/dist/assets/materialdesignicons-webfont-31010194.woff2 +0 -0
  5. package/dist/assets/{materialdesignicons-webfont-a58ecb54.ttf → materialdesignicons-webfont-5159a347.eot} +0 -0
  6. package/dist/assets/{materialdesignicons-webfont-67d24abe.eot → materialdesignicons-webfont-be825c12.ttf} +0 -0
  7. package/dist/index.html +2 -2
  8. package/package.json +3 -2
  9. package/src/App.vue +26 -22
  10. package/src/components/Controls.vue +8 -6
  11. package/src/components/Format.vue +11 -5
  12. package/src/components/Video.vue +10 -7
  13. package/dist/assets/index-61de2798.js +0 -9
  14. package/dist/assets/index-9ce2a5f1.css +0 -5
  15. package/dist/assets/materialdesignicons-webfont-80bb28b3.woff +0 -0
  16. package/dist/assets/materialdesignicons-webfont-c1c004a9.woff2 +0 -0
package/dist/index.html CHANGED
@@ -5,8 +5,8 @@
5
5
  <link rel="icon" href="/favicon.png" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
7
7
  <title>v4l2camera</title>
8
- <script type="module" crossorigin src="/assets/index-61de2798.js"></script>
9
- <link rel="stylesheet" href="/assets/index-9ce2a5f1.css">
8
+ <script type="module" crossorigin src="/assets/index-4ccde23d.js"></script>
9
+ <link rel="stylesheet" href="/assets/index-442177d6.css">
10
10
  </head>
11
11
  <body>
12
12
  <div id="app"></div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "v4l2camera-ui",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "scripts": {
5
5
  "serve": "vite --host=0.0.0.0 preview",
6
6
  "build": "vite build --emptyOutDir",
@@ -14,8 +14,9 @@
14
14
  },
15
15
  "devDependencies": {
16
16
  "@mdi/font": "^7.0.96",
17
+ "@types/jmuxer": "^2.0.3",
17
18
  "@vitejs/plugin-vue": "^4.0.0",
18
- "vite": "^4.0.4",
19
+ "vite": "^4.0.0",
19
20
  "vite-plugin-vuetify": "^1.0.1",
20
21
  "vue-cli-plugin-vuetify": "~2.5.5"
21
22
  }
package/src/App.vue CHANGED
@@ -1,23 +1,24 @@
1
1
  <template>
2
- <v-app>
3
- <h1>{{ msg }}</h1>
4
- <v-divider></v-divider>
5
- <Video/>
6
- <v-divider></v-divider>
7
- <h3>Formats</h3>
8
- <Format/>
9
- <v-divider></v-divider>
10
- <h3>Controls</h3>
11
- <Controls/>
12
- <v-divider></v-divider>
13
- <v-footer>
14
- <v-container>
15
- <v-row align="center" justify="center">
16
- <v-icon>mdi-github</v-icon><a href="https://github.com/mpromonet/v4l2camera">v4l2camera</a><p>{{ version }}</p>
17
- </v-row>
18
- </v-container>
19
- </v-footer>
20
- </v-app>
2
+ <v-app>
3
+ <h1>{{ msg }}</h1>
4
+ <v-divider></v-divider>
5
+ <v-content id="content">
6
+ <Video/>
7
+ <v-divider></v-divider>
8
+ <h3>Formats</h3>
9
+ <Format/>
10
+ <h3>Controls</h3>
11
+ <Controls/>
12
+ </v-content>
13
+ <v-divider></v-divider>
14
+ <v-footer>
15
+ <v-container>
16
+ <v-row align="center" justify="center">
17
+ <v-icon>mdi-github</v-icon><a href="https://github.com/mpromonet/v4l2camera">v4l2camera</a><p>{{ version }}</p>
18
+ </v-row>
19
+ </v-container>
20
+ </v-footer>
21
+ </v-app>
21
22
  </template>
22
23
 
23
24
  <script>
@@ -47,7 +48,6 @@ export default {
47
48
  data() {
48
49
  return {
49
50
  msg: "...",
50
- panel: [1],
51
51
  version: "",
52
52
  };
53
53
  }
@@ -55,8 +55,12 @@ export default {
55
55
  </script>
56
56
 
57
57
  <style>
58
- #app {
59
- font-family: 'Avenir', Helvetica, Arial, sans-serif;
58
+ html {
59
+ overflow-y: hidden;
60
+ }
61
+ #content {
62
+ height: calc(100vh - 100px);
63
+ overflow-y: auto;
60
64
  }
61
65
  h1 {
62
66
  text-align: center;
package/src/components/Controls.vue CHANGED
@@ -33,10 +33,9 @@
33
33
  :min="c.minimum"
34
34
  :max="c.maximum"
35
35
  :step="c.step"
36
- ticks="always"
37
36
  thumb-label="always"
38
37
  :disabled="disabled(c.flags)"
39
- @update:modelValue="updateValue(c.id,c.value)"
38
+ @end="updateValue(c.id,c.value)"
40
39
  >
41
40
  <template v-slot:prepend>{{c.minimum}}</template>
42
41
  <template v-slot:append>{{c.maximum}}</template>
@@ -60,9 +59,7 @@ import axios from "axios";
60
59
 
61
60
  export default {
62
61
  mounted() {
63
- axios.get("/api/controls").then(
64
- (response) => this.controls = response.data
65
- );
62
+ this.updateAll();
66
63
  },
67
64
  data() {
68
65
  return {
@@ -70,10 +67,15 @@ export default {
70
67
  };
71
68
  },
72
69
  methods: {
70
+ updateAll() {
71
+ axios.get("/api/controls").then(
72
+ (response) => this.controls = response.data
73
+ );
74
+ },
73
75
  updateValue(id, value) {
74
76
  axios.post("/api/control", {id, value} ).then(
75
77
  (response) => this.controls.filter((d) => d.id == id).forEach((element) => element.value = response.data.value)
76
- );
78
+ ).finally(() => this.updateAll());
77
79
  },
78
80
  getItems(menu) {
79
81
  return menu.map(item => ({"title": item.label, "value": item.value}));
package/src/components/Format.vue CHANGED
@@ -25,9 +25,10 @@
25
25
  :min="format.frameSizes[0].width.min"
26
26
  :max="format.frameSizes[0].width.max"
27
27
  :step="format.frameSizes[0].width.step"
28
+ label="Width"
28
29
  color="blue"
29
30
  thumb-label="always"
30
- @update:modelValue="updateValue(format)"
31
+ @end="updateValue(format)"
31
32
  >
32
33
  <template v-slot:prepend>{{format.frameSizes[0].width.min}}</template>
33
34
  <template v-slot:append>{{format.frameSizes[0].width.max}}</template>
@@ -37,21 +38,24 @@
37
38
  v-model.number="format.height"
38
39
  :min="format.frameSizes[0].height.min"
39
40
  :max="format.frameSizes[0].height.max"
41
+ label="Height"
40
42
  color="blue"
41
43
  thumb-label="always"
42
44
  :step="format.frameSizes[0].height.step" @change="alert($event)"
43
- @update:modelValue="updateValue(format)"
45
+ @end="updateValue(format)"
44
46
  >
45
47
  <template v-slot:prepend>{{format.frameSizes[0].height.min}}</template>
46
48
  <template v-slot:append>{{format.frameSizes[0].height.max}}</template>
47
49
  </v-slider>
48
50
  </v-col>
49
- <v-col cols="1" v-if="format.frameSizes && format.frameSizes[0] && typeof format.frameSizes[0].width === 'object' && typeof format.frameSizes[0].height === 'object'">
51
+ <v-col cols="1" v-if="format.frameSizes && format.frameSizes[0] && typeof format.frameSizes[0].width === 'object' && typeof format.frameSizes[0].height === 'object' || !format.frameSizes || !format.frameSizes.length">
50
52
  <v-text-field
53
+ label="Width"
51
54
  v-model.number="format.width"
52
55
  @update:modelValue="updateValue(format)">
53
56
  </v-text-field>
54
57
  <v-text-field
58
+ label="Height"
55
59
  v-model.number="format.height"
56
60
  @update:modelValue="updateValue(format)">
57
61
  </v-text-field>
@@ -69,17 +73,19 @@
69
73
  v-model.number="format.fps"
70
74
  :min="format.frameSizes[0].intervals[0].fps.min"
71
75
  :max="format.frameSizes[0].intervals[0].fps.max"
76
+ label="Fps"
72
77
  color="blue"
73
78
  thumb-label="always"
74
79
  :step="format.frameSizes[0].intervals[0].fps.step"
75
- @update:modelValue="updateValue(format)"
80
+ @end="updateValue(format)"
76
81
  >
77
82
  <template v-slot:prepend>{{format.frameSizes[0].intervals[0].fps.min}}</template>
78
83
  <template v-slot:append>{{format.frameSizes[0].intervals[0].fps.max}}</template>
79
84
  </v-slider>
80
85
  </v-col>
81
- <v-col cols="1" v-if="format.frameSizes && format.frameSizes[0] && typeof format.frameSizes[0].intervals[0].fps === 'object'">
86
+ <v-col cols="1" v-if="format.frameSizes && format.frameSizes[0] && typeof format.frameSizes[0].intervals[0].fps === 'object' || !format.frameSizes || !format.frameSizes.length">
82
87
  <v-text-field
88
+ label="Fps"
83
89
  v-model.number="format.fps"
84
90
  @update:modelValue="updateValue(format)">
85
91
  </v-text-field>
package/src/components/Video.vue CHANGED
@@ -7,10 +7,10 @@
7
7
  </v-row>
8
8
  </v-container>
9
9
  <v-container>
10
- <v-row align="center" justify="center">
11
- <img v-if="visibility && !message" :src="image" />
12
- <video v-if="visibility && !image && !message" id="player" autoplay muted playsinline ></video>
13
- <div v-if="message">{{this.message}}</div>
10
+ <v-row align="center" justify="center" style="height: 33vh;">
11
+ <img v-if="visibility && image && !message" :src="image" class="h-100"/>
12
+ <video v-show="visibility && !image && !message" id="player" autoplay muted playsinline class="h-100"></video>
13
+ <div v-if="message" class="h-100">{{this.message}}</div>
14
14
  </v-row>
15
15
  </v-container>
16
16
  <v-container>
@@ -23,7 +23,7 @@
23
23
 
24
24
  <script>
25
25
  import axios from "axios";
26
- import JMuxer from 'jmuxer';
26
+ import JMuxer from "jmuxer";
27
27
 
28
28
  export default {
29
29
  data() {
@@ -58,13 +58,16 @@ export default {
58
58
  }
59
59
  this.message = null;
60
60
  this.image = "data:image/jpeg;base64," + btoa(binaryStr);
61
+ if (this.ws.jmuxer) {
62
+ this.ws.jmuxer.destroy();
63
+ }
61
64
  this.ws.jmuxer = null;
62
65
  } else if ( (bytes.length > 3) && (bytes[0] === 0) && (bytes[1] === 0) && (bytes[2] === 0) && (bytes[3] === 1)) {
63
66
  this.image = null;
64
67
  this.message = null;
65
68
  // H264
66
69
  if (!this.ws.jmuxer) {
67
- this.ws.jmuxer = new JMuxer({node: 'player', mode: 'video', readFpsFromTrack: true, flushingTime: 1000});
70
+ this.ws.jmuxer = new JMuxer({node: 'player', mode: 'video', readFpsFromTrack: true});
68
71
  }
69
72
  this.ws.jmuxer.feed({ video: bytes })
70
73
  } else {
@@ -91,4 +94,4 @@ export default {
91
94
  </script>
92
95
 
93
96
  <style>
94
- </style>
97
+ </style>