rvms-vue 0.1.4 → 0.1.6
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 +103 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,103 @@
|
|
|
1
|
+
# rvms-vue
|
|
2
|
+
|
|
3
|
+
Vue 3 components for **RVMS (Video-MS)** — video player with MSE streaming, live and playback modes, and optional alarm panel.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install rvms-vue
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Live stream
|
|
12
|
+
|
|
13
|
+
```vue
|
|
14
|
+
<script setup>
|
|
15
|
+
import { RvmsVideoPlayer } from 'rvms-vue';
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<template>
|
|
19
|
+
<RvmsVideoPlayer
|
|
20
|
+
nvr-id="a1b2c3d4-..."
|
|
21
|
+
device-id="201"
|
|
22
|
+
:show-alarms="true"
|
|
23
|
+
/>
|
|
24
|
+
</template>
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Playback
|
|
28
|
+
|
|
29
|
+
```vue
|
|
30
|
+
<script setup>
|
|
31
|
+
import { ref } from 'vue';
|
|
32
|
+
import { RvmsVideoPlayer } from 'rvms-vue';
|
|
33
|
+
|
|
34
|
+
const player = ref(null);
|
|
35
|
+
const from = '2025-01-15T10:00:00Z';
|
|
36
|
+
const to = '2025-01-15T11:00:00Z';
|
|
37
|
+
|
|
38
|
+
function playRecording() {
|
|
39
|
+
player.value?.start();
|
|
40
|
+
}
|
|
41
|
+
</script>
|
|
42
|
+
|
|
43
|
+
<template>
|
|
44
|
+
<RvmsVideoPlayer
|
|
45
|
+
ref="player"
|
|
46
|
+
nvr-id="a1b2c3d4-..."
|
|
47
|
+
device-id="201"
|
|
48
|
+
mode="playback"
|
|
49
|
+
:from="from"
|
|
50
|
+
:to="to"
|
|
51
|
+
/>
|
|
52
|
+
<button @click="playRecording">▶ Play recording</button>
|
|
53
|
+
</template>
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Simple player (no alarms)
|
|
57
|
+
|
|
58
|
+
```vue
|
|
59
|
+
<script setup>
|
|
60
|
+
import { RvmsVideo } from 'rvms-vue';
|
|
61
|
+
</script>
|
|
62
|
+
|
|
63
|
+
<template>
|
|
64
|
+
<RvmsVideo
|
|
65
|
+
nvr-id="a1b2c3d4-..."
|
|
66
|
+
channel-id="201"
|
|
67
|
+
width="100%"
|
|
68
|
+
height="480px"
|
|
69
|
+
/>
|
|
70
|
+
</template>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Components
|
|
74
|
+
|
|
75
|
+
### `RvmsVideoPlayer`
|
|
76
|
+
|
|
77
|
+
Full-featured player with alarm overlay. Supports live and playback. Exposes `start()` / `stop()` via template ref.
|
|
78
|
+
|
|
79
|
+
| Prop | Type | Default | Description |
|
|
80
|
+
|------|------|---------|-------------|
|
|
81
|
+
| `nvrId` | `string` | required | NVR UUID |
|
|
82
|
+
| `deviceId` | `string` | required | Device/channel id |
|
|
83
|
+
| `mode` | `'live' \| 'playback'` | `'live'` | Stream mode |
|
|
84
|
+
| `from` | `string` | — | ISO 8601 start (playback only) |
|
|
85
|
+
| `to` | `string` | — | ISO 8601 end (playback only) |
|
|
86
|
+
| `initialProfile` | `'main' \| 'sub' \| 'third'` | `'main'` | Stream quality |
|
|
87
|
+
| `showAlarms` | `boolean` | `true` | Show alarm panel |
|
|
88
|
+
|
|
89
|
+
### `RvmsVideo`
|
|
90
|
+
|
|
91
|
+
Lightweight player with built-in controls (play/stop, live/playback toggle, HD/SD). No alarm panel.
|
|
92
|
+
|
|
93
|
+
| Prop | Type | Default | Description |
|
|
94
|
+
|------|------|---------|-------------|
|
|
95
|
+
| `nvrId` | `string` | required | NVR UUID |
|
|
96
|
+
| `channelId` | `string` | required | Channel id |
|
|
97
|
+
| `initialProfile` | `'main' \| 'sub'` | `'main'` | Stream quality |
|
|
98
|
+
| `width` | `string` | `'100%'` | CSS width |
|
|
99
|
+
| `height` | `string` | `'auto'` | CSS height |
|
|
100
|
+
|
|
101
|
+
## Backend
|
|
102
|
+
|
|
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) or the [example](https://github.com/humsyong/video-ms/tree/main/example).
|