rvms-vue 0.1.7 → 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.
- package/README.md +38 -2
- package/package.json +4 -2
- package/src/App.vue +25 -0
- package/src/components/RvmsVideo.vue +747 -0
- package/src/components/RvmsVideoPlayer.vue +861 -0
- package/src/export.ts +10 -0
- package/src/main.ts +4 -0
- package/src/pages/AlarmsDemo.vue +393 -0
- package/src/pages/VideoDemo.vue +151 -0
- package/src/pages/WelcomePage.vue +184 -0
- package/src/shims-vue.d.ts +5 -0
- package/src/types/index.ts +43 -0
package/README.md
CHANGED
|
@@ -53,7 +53,7 @@ function playRecording() {
|
|
|
53
53
|
</template>
|
|
54
54
|
```
|
|
55
55
|
|
|
56
|
-
## Simple player
|
|
56
|
+
## Simple player — live
|
|
57
57
|
|
|
58
58
|
```vue
|
|
59
59
|
<script setup>
|
|
@@ -70,6 +70,31 @@ import { RvmsVideo } from 'rvms-vue';
|
|
|
70
70
|
</template>
|
|
71
71
|
```
|
|
72
72
|
|
|
73
|
+
## Simple player — playback
|
|
74
|
+
|
|
75
|
+
```vue
|
|
76
|
+
<script setup>
|
|
77
|
+
import { ref } from 'vue';
|
|
78
|
+
import { RvmsVideo } from 'rvms-vue';
|
|
79
|
+
|
|
80
|
+
const mode = ref('playback');
|
|
81
|
+
const from = '2025-01-15T10:00:00Z';
|
|
82
|
+
const to = '2025-01-15T11:00:00Z';
|
|
83
|
+
</script>
|
|
84
|
+
|
|
85
|
+
<template>
|
|
86
|
+
<RvmsVideo
|
|
87
|
+
nvr-id="a1b2c3d4-..."
|
|
88
|
+
channel-id="201"
|
|
89
|
+
:mode="mode"
|
|
90
|
+
:from="from"
|
|
91
|
+
:to="to"
|
|
92
|
+
width="100%"
|
|
93
|
+
height="480px"
|
|
94
|
+
/>
|
|
95
|
+
</template>
|
|
96
|
+
```
|
|
97
|
+
|
|
73
98
|
## Components
|
|
74
99
|
|
|
75
100
|
### `RvmsVideoPlayer`
|
|
@@ -100,4 +125,15 @@ Lightweight player with built-in controls (play/stop, live/playback toggle, HD/S
|
|
|
100
125
|
|
|
101
126
|
## Backend
|
|
102
127
|
|
|
103
|
-
These components need a backend that proxies `/ws/stream`, `/ws/alarms`, and `/api/*` to RVMS. See [rvms-backend](https://www.npmjs.com/package/rvms-backend)
|
|
128
|
+
These components need a backend that proxies `/ws/stream`, `/ws/alarms`, and `/api/*` to RVMS. See [rvms-backend](https://www.npmjs.com/package/rvms-backend).
|
|
129
|
+
|
|
130
|
+
## Full example
|
|
131
|
+
|
|
132
|
+
This package includes the complete demo application. The source is in the `src/` directory:
|
|
133
|
+
- `src/App.vue` — demo page with `RvmsVideoPlayer`
|
|
134
|
+
- `src/components/RvmsVideoPlayer.vue` — full player with alarms
|
|
135
|
+
- `src/components/RvmsVideo.vue` — simple player
|
|
136
|
+
- `src/pages/` — demo pages (VideoDemo, AlarmsDemo, WelcomePage)
|
|
137
|
+
- `src/types/` — TypeScript interfaces
|
|
138
|
+
|
|
139
|
+
See `src/pages/VideoDemo.vue` for a working example of live + playback mode with profile switching.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rvms-vue",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "RVMS (Video-MS) Vue 3 components — RvmsVideoPlayer, RvmsVideo",
|
|
6
6
|
"main": "./dist/lib/index.js",
|
|
@@ -12,7 +12,9 @@
|
|
|
12
12
|
}
|
|
13
13
|
},
|
|
14
14
|
"files": [
|
|
15
|
-
"dist/lib"
|
|
15
|
+
"dist/lib",
|
|
16
|
+
"src",
|
|
17
|
+
"README.md"
|
|
16
18
|
],
|
|
17
19
|
"scripts": {
|
|
18
20
|
"dev": "vite",
|
package/src/App.vue
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
/**
|
|
3
|
+
* App.vue — Root page switcher.
|
|
4
|
+
*
|
|
5
|
+
* Renders the welcome page by default. Navigate to sub-pages via $emit.
|
|
6
|
+
*/
|
|
7
|
+
import { ref } from 'vue';
|
|
8
|
+
import WelcomePage from './pages/WelcomePage.vue';
|
|
9
|
+
import VideoDemo from './pages/VideoDemo.vue';
|
|
10
|
+
import AlarmsDemo from './pages/AlarmsDemo.vue';
|
|
11
|
+
|
|
12
|
+
type Page = 'welcome' | 'video' | 'alarms';
|
|
13
|
+
|
|
14
|
+
const currentPage = ref<Page>('welcome');
|
|
15
|
+
|
|
16
|
+
function goTo(page: Page) {
|
|
17
|
+
currentPage.value = page;
|
|
18
|
+
}
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<template>
|
|
22
|
+
<WelcomePage v-if="currentPage === 'welcome'" @goto="goTo" />
|
|
23
|
+
<VideoDemo v-else-if="currentPage === 'video'" @back="goTo('welcome')" />
|
|
24
|
+
<AlarmsDemo v-else-if="currentPage === 'alarms'" @back="goTo('welcome')" />
|
|
25
|
+
</template>
|