Build with MediaSFU Vue
Use mediasfu-vue@1.3.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 secure backend guide.
npm install mediasfu-vue@1.3.2
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 |
| Share a tab's sound along with a screen share | Screen-share audio |
| 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 the package stylesheet once, in src/main.ts where you mount the app:
import { createApp } from 'vue';
import 'mediasfu-vue/dist/mediasfu-vue.css';
import App from './App.vue';
createApp(App).mount('#app');
Then render the room with your backend adapters in src/App.vue:
<script setup lang="ts">
import { MediasfuGeneric } from 'mediasfu-vue';
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.