Build with MediaSFU Vue

Essential next steps

• API and reference documentation
• Choose standard, hybrid, or fully headless UI
• Headless and hybrid implementation
• Starter projects and showcases
• Framework examples and recipes
• Current release and migration notes
• Troubleshooting and recovery

Use mediasfu-vue@1.1.2 for Vue 3 web applications.

You can begin locally with restricted development credentials. Before sharing or releasing the app, move reusable Cloud credentials behind the production credential boundary.

npm install mediasfu-vue@1.1.2

Import the package stylesheet once:

import 'mediasfu-vue/dist/mediasfu-vue.css';

Build by operation

Task	Start here
Secure create and join	Vue room lifecycle
Join, prepare media, produce, consume, screen share, and leave	Vue custom controls
Participants, waiting, moderation, chat, polls, and collaboration	Vue collaboration
Render media and understand stream ownership	Screen and rendered media
Recover from device and connection failures	Recovery and media controls
Build a familiar product interface	Product recipes
Check an exact export or type	Vue API reference

Copy/paste starter

import 'mediasfu-vue/dist/mediasfu-vue.css';

<script setup lang="ts">
import { MediasfuGeneric } from 'mediasfu-vue';
import 'mediasfu-vue/dist/mediasfu-vue.css';
import { createRoomViaBackend, joinRoomViaBackend } from './secure-room-gateway';
</script>

<template>
  <MediasfuGeneric
    :connect-media-s-f-u="true"
    :create-media-s-f-u-room="createRoomViaBackend"
    :join-media-s-f-u-room="joinRoomViaBackend"
  />
</template>

The linked lifecycle guide contains the complete typed backend adapters. Keep reusable MediaSFU credentials outside the browser.

Custom UI responsibility

When you replace the room shell, keep the active session object intact. Media operations depend on its socket, transports, producers, permissions, streams, and update callbacks. Render remote audio as well as video, expose permission and transport failures, and clean all app-owned state after exit.

Before release

Test create, join, participants, permissions, microphone, camera, remote playback, screen sharing, collaboration, leave, reconnect, and a second room entry in separate browser contexts.