Skip to main content

Vue Remote Podcast Tutorial

Build a remote podcast room with mediasfu-vue@1.1.1. The supplied room handles speaker media, remote playback, recording controls, notices, and leave.

Prerequisites​

  • Node.js 18 to 20, Vue 3, HTTPS or localhost, and two speaker profiles.
  • Authenticated create/join routes and a recording disclosure/consent policy.

Project files​

package.json
{"private":true,"scripts":{"dev":"vite"},"dependencies":{"mediasfu-vue":"1.1.1","vue":"3.5.13"},"devDependencies":{"@vitejs/plugin-vue":"5.2.1","typescript":"5.9.3","vite":"5.4.19"}}
src/room-gateway.ts
import type { CreateJoinRoomResult, CreateRoomOnMediaSFUType, JoinRoomOnMediaSFUType } from 'mediasfu-vue'; async function postRoom(url: string, payload: unknown): Promise<CreateJoinRoomResult> { const response = await fetch(url, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) throw new Error(`Room request failed (HTTP ${response.status}).`); return response.json() as Promise<CreateJoinRoomResult>; } export const createRoom: CreateRoomOnMediaSFUType = ({ payload }) => postRoom('/api/mediasfu/create-room', payload); export const joinRoom: JoinRoomOnMediaSFUType = ({ payload }) => postRoom('/api/mediasfu/join-room', payload);
src/App.vue
<script setup lang="ts">import { MediasfuGeneric } from 'mediasfu-vue'; import 'mediasfu-vue/dist/mediasfu-vue.css'; import { createRoom, joinRoom } from './room-gateway';</script>
<template><main><h1>Remote podcast</h1><p>Prove every speaker's audio before opening Recording.</p><MediasfuGeneric :return-u-i="true" :connect-media-s-f-u="true" :create-media-s-f-u-room="createRoom" :join-media-s-f-u-room="joinRoom" /></main></template>
src/main.ts
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
index.html
<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><title>Remote podcast</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body></html>
vite.config.ts
import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()] });
tsconfig.json
{"compilerOptions":{"target":"ES2022","lib":["DOM","ES2022"],"strict":true,"module":"ESNext","moduleResolution":"Bundler","skipLibCheck":true,"noEmit":true},"include":["src"]}

Use restricted, revocable, uncommitted credentials only on an isolated local backend. Before distribution, external testing, or production, reusable Cloud credentials remain only on the authenticated backend.

Backend​

Keep src/room-gateway.ts in this project and implement its two API routes using the complete public production room credential boundary. The backend authorizes speakers and recording policy; the browser never receives a Cloud credential.

Run​

npm install
npm run dev

Expected result​

Both speakers hear each other. After disclosure and consent, an authorized user starts Recording, sees the in-room state, and stops it before leaving.

Recovery​

Do not record until required speakers have remote audio. If start/stop fails, keep the visible state accurate and offer a deliberate retry. Define storage, retrieval, retention, and export in the service that owns those workflows.

Cleanup​

Stop recording, stop app-owned tracks, clear local episode drafts, leave, expire room authority, and apply the product's recording retention rules.