ws-canvas-player

🎥 A Vue 3 component for rendering real-time MJPEG or JPEG frames from a WebSocket stream onto a <canvas>, with fullscreen support and keyboard shortcuts. Ideal for video monitoring dashboards.

📦 Installation

npm install ws-canvas-player
# or
yarn add ws-canvas-player

🚀 Usage

1. Local registration (Recommended: on-demand import)

<template>
  <WsCanvasPlayer :url="wsUrl" :fps="30" />
</template>

<script setup>
import WsCanvasPlayer from "ws-canvas-player";

const wsUrl = "ws://your-server/live-stream";
</script>

2. Global registration (Not recommended for on-demand loading)

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import WsCanvasPlayer from "ws-canvas-player";

const app = createApp(App);
app.component("WsCanvasPlayer", WsCanvasPlayer);
app.mount("#app");

⚙️ Props

| Prop | Type | Default | Description | | ---- | ------ | ------- | ---------------------------------------- | | url | String | — | WebSocket server URL (JPEG/MJPEG stream) | | fps | Number | 30 | Max render FPS to control performance |

⌨️ Keyboard Shortcuts

| Key | Action | | ----- | ---------------- | | F | Enter fullscreen | | Esc | Exit fullscreen |

The <div class="monitor"> wrapper is tabindex="0" so it can receive key events.

🖥️ Retina/High-DPI support

The component automatically adjusts the canvas resolution using devicePixelRatio to ensure a sharp image during fullscreen or window resizes.

📸 Screenshot

🔧 Development

You can import the .vue file directly into your Vue 3 project, or publish it as an NPM package with Rollup/Vite.

Feel free to open issues for suggestions or bugs.