rvms-vue

rvms-vue

Vue 3 component for RVMS (Video-MS) — video player with MSE streaming, live and playback modes.

Install

npm install rvms-vue

Live stream

<script setup>
import { RvmsVideo } from 'rvms-vue';
</script>

<template>
  <RvmsVideo
    nvr-id="a1b2c3d4-..."
    channel-id="201"
  />
</template>

Playback

<script setup>
import { ref } from 'vue';
import { RvmsVideo } from 'rvms-vue';

const mode = ref('playback');
const from = '2025-01-15T10:00:00Z';
const to   = '2025-01-15T11:00:00Z';
</script>

<template>
  <RvmsVideo
    nvr-id="a1b2c3d4-..."
    channel-id="201"
    :mode="mode"
    :from="from"
    :to="to"
  />
</template>

Simple player — live

<script setup>
import { RvmsVideo } from 'rvms-vue';
</script>

<template>
  <RvmsVideo
    nvr-id="a1b2c3d4-..."
    channel-id="201"
    width="100%"
    height="480px"
  />
</template>

Simple player — playback

<script setup>
import { ref } from 'vue';
import { RvmsVideo } from 'rvms-vue';

const mode = ref('playback');
const from = '2025-01-15T10:00:00Z';
const to   = '2025-01-15T11:00:00Z';
</script>

<template>
  <RvmsVideo
    nvr-id="a1b2c3d4-..."
    channel-id="201"
    :mode="mode"
    :from="from"
    :to="to"
    width="100%"
    height="480px"
  />
</template>

Props

All components accept baseUrl and token props:

<RvmsVideo
  nvr-id="..."
  channel-id="201"
  base-url="http://localhost:3000"
  token="your-jwt-token"
/>

RvmsVideo

Lightweight player with built-in controls (play/stop, live/playback toggle, HD/SD). No alarm panel.

Backend

This component needs a backend that proxies /ws/stream and /api/* to RVMS. See rvms-backend.

Full example

This package includes a complete demo application. The source is in the src/ directory:

• src/App.vue — demo page with RvmsVideo
• src/components/RvmsVideo.vue — video player component
• src/pages/ — demo pages (VideoDemo, WelcomePage)
• src/types/ — TypeScript interfaces

See src/pages/VideoDemo.vue for a working example of live + playback mode with profile switching.