Required dependencies

npm install @jitsi/js-utils @jitsi/logger @jitsi/excalidraw
npm install @emotion/react @emotion/styled @mui/material
npm install @amplitude/analytics-browser
npm install @braintree/sanitize-url
npm install @giphy/js-fetch-api @giphy/react-components
npm install @microsoft/microsoft-graph-client
npm install @matrix-org/olm

For React Native targets:

npm install @amplitude/analytics-react-native
npm install @react-native-async-storage/async-storage
npm install @react-native-clipboard/clipboard
npm install @react-native-community/netinfo
npm install @react-native-community/slider
npm install @react-native-google-signin/google-signin
npm install @react-navigation/native @react-navigation/stack
npm install @react-navigation/bottom-tabs @react-navigation/material-top-tabs
npm install @giphy/react-native-sdk @jitsi/rnnoise-wasm

Native steps required:

# iOS
cd ios && pod install

# Android: no manual linking required (autolinking), but ensure
# minSdkVersion >= 24 in android/build.gradle

# If using Expo:
npx expo prebuild

Project setup

1. Copy the source/ directory into your project root, e.g. ./jitsi-meet-source/.

2. Add path aliases in tsconfig.json to match the source structure:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "jitsi-meet/*": ["./jitsi-meet-source/*"]
    }
  }
}

3. For web builds, reference the existing webpack.config.js or import it as a base:

// webpack.config.js
const jitsiWebpack = require('./jitsi-meet-source/webpack.config.js');
module.exports = jitsiWebpack;

4. Set required environment variables before building:

# .env
ENABLE_TAGS=false
DEPLOYMENTINFO_ENVIRONMENT=production

5. For the external API embed (iframe), serve the built jitsi-meet-source/ directory and load external_api.js from it:

<script src="https://your-domain.example/external_api.js"></script>

6. For React Native, register the entry points in your index.js:

// index.js
import './jitsi-meet-source/index.android'; // or index.ios

Public API

default (JitsiMeetExternalAPI)

// modules/API/external/index.js
const JitsiMeetExternalAPI = require('./modules/API/external/index');

const api = new JitsiMeetExternalAPI(domain: string, options?: {
  roomName?: string;
  width?: number | string;
  height?: number | string;
  parentNode?: Element;
  configOverwrite?: object;
  interfaceConfigOverwrite?: object;
  jwt?: string;
  onload?: () => void;
}): JitsiMeetExternalAPIInstance;

Use JitsiMeetExternalAPI to embed a Jitsi meeting inside an iframe programmatically. It is the primary integration surface for web applications. Subscribe to meeting events and invoke commands through the returned instance.

getJitsiMeetTransport

// modules/transport/index.js
export function getJitsiMeetTransport(): Transport;

Returns the singleton Transport instance used for PostMessage-based cross-frame communication between the host page and the Jitsi Meet iframe. Use this when you need to send or receive low-level messages beyond what JitsiMeetExternalAPI exposes.

Transport / PostMessageTransportBackend

// modules/transport/index.js
export { Transport, PostMessageTransportBackend } from '@jitsi/js-utils/transport';

const backend = new PostMessageTransportBackend({ postisOptions: { scope: string } });
const transport = new Transport({ backend });

Transport wraps a low-level backend to provide a typed, promise-based message bus. PostMessageTransportBackend implements the backend contract over window.postMessage. Use these directly when you need a custom transport scope or want to multiplex messaging independently of the global Jitsi transport singleton.

Working examples

Scenario - Embedding a meeting in a web page

Drop a Jitsi meeting into any div on your page using the external API. The API bridges commands and events between your page and the meeting frame.

// embed-meeting.ts
// Ensure external_api.js is loaded via <script> tag before this runs.
declare const JitsiMeetExternalAPI: any;

const domain = 'meet.jit.si';
const options = {
  roomName: 'MyTeamStandup',
  width: '100%',
  height: 600,
  parentNode: document.getElementById('jitsi-container') as HTMLElement,
  configOverwrite: { startWithAudioMuted: true },
  interfaceConfigOverwrite: { SHOW_JITSI_WATERMARK: false },
};

const api = new JitsiMeetExternalAPI(domain, options);

api.addEventListeners({
  readyToClose: () => {
    console.log('Meeting ended');
    api.dispose();
  },
  participantJoined: (event: { id: string; displayName: string }) => {
    console.log(`Participant joined: ${event.displayName}`);
  },
});

// Mute audio programmatically after 5 seconds
setTimeout(() => api.executeCommand('toggleAudio'), 5000);

Scenario - Custom PostMessage transport for cross-frame communication

Use the transport module directly to send custom commands to Jitsi Meet running inside an iframe.

// custom-transport.ts
import {
  getJitsiMeetTransport,
  PostMessageTransportBackend,
  Transport
} from './jitsi-meet-source/modules/transport/index.js';

// Retrieve the shared transport singleton used by Jitsi Meet
const transport = getJitsiMeetTransport();

// Listen for events from within the meeting frame
transport.on('event', (event: { name: string; data: unknown }) => {
  if (event.name === 'participantJoined') {
    console.log('Someone joined:', event.data);
  }
});

// Send a command into the meeting
transport.sendEvent({ name: 'displayNameChange', data: { displayName: 'Alice' } });

Scenario - Replacing the transport backend at runtime

Inject a custom transport backend (e.g. WebSocket) without restarting the meeting.

// swap-transport.ts
import { PostMessageTransportBackend } from './jitsi-meet-source/modules/transport/index.js';
import { getJitsiMeetGlobalNS } from './jitsi-meet-source/react/features/base/util/helpers';

// The global namespace setter is wired during module initialisation.
// Call it to swap in a new backend after load.
const ns = getJitsiMeetGlobalNS();

const newBackend = new PostMessageTransportBackend({
  postisOptions: { scope: 'jitsi_meet_external_api_42' }
});

// This calls transport.setBackend() internally (see modules/transport/index.js)
ns.setExternalTransportBackend(newBackend);

console.log('Transport backend swapped to custom scope.');

File walkthrough

• .devcontainer/ - Defines a containerised dev environment; use it with VS Code Remote Containers.
• .github/ - CI pipelines for linting, Lua tests, Prosody plugin tests, and RN SDK releases.
• css/ - All SCSS partials; compiled by webpack. Import css/_base.scss as the stylesheet root.
• debian/ - Packaging manifests for Debian/Ubuntu server deployments; not needed for embedding.
• doc/ - Architecture and API documentation for contributors and operators.
• images/ - PNG/SVG assets bundled by webpack; referenced via relative paths in components.
• lang/ - JSON translation files; loaded by i18next at runtime.
• metadata/ - App store descriptions and manifest.json data.
• modules/ - Framework-agnostic JS modules: external API, transport, recording, analytics.
• react/ - Feature-sliced React/RN code; each subdirectory is a self-contained feature.
• react-native-sdk/ - Standalone RN SDK package with its own package.json for publishing.
• resources/ - Static files not processed by webpack (badges, PWA icons).
• sounds/ - OGG/MP3 audio assets for ring tones and notifications.
• static/ - Pre-rendered HTML fragments served directly by the web server.
• twa/ - Android Trusted Web Activity manifest and launcher configuration.
• app.js - Bootstraps the React web app; calls ReactDOM.createRoot.
• conference.js - Connects to XMPP/JVB, manages tracks and participants.
• config.js - Canonical list of every supported server-side configuration key.
• interface_config.js - Canonical list of every supported UI configuration key.
• webpack.config.js - Multi-entry webpack config producing app.bundle.js and external_api.js.
• index.android.js / index.ios.js - RN entry points; register the root component with AppRegistry.
• metro.config.js - Metro resolver config for RN; sets up SVG and asset transforms.
• babel.config.js - Shared Babel config for web and RN targets.

Common pitfalls and fixes

• API_ID is undefined so PostMessage scope is wrong: ensure the embedding page sets window.JitsiMeetExternalAPIid before loading external_api.js.
• @matrix-org/olm WASM fails to load: serve olm.wasm from the same origin as your app and set OLM_WASM_PATH in your webpack config.
• React Native @jitsi/rnnoise-wasm build error on iOS: add RNRNNOISE_USE_FRAMEWORKS=1 to your Podfile environment and re-run pod install.
• Duplicate React instances when importing react/features/ directly: alias react and react-dom to a single copy in your webpack config using resolve.alias.
• ESM/CJS interop for modules/API/external/index.js: that file uses module.exports, so import it with require() or set "esModuleInterop": true in tsconfig.json.
• Missing getJitsiMeetGlobalNS at runtime in RN: the function reads window on web and global on RN; ensure you do not import it in a shared isomorphic file without a platform guard.

Vibe-coding prompt template

I have the Jitsi Meet source code in the `source/` directory of my project,
and a usage guide at `source/USAGE.md`. The upstream npm package is `user@example.com`.

My project is a [describe your stack: e.g. Next.js 14 TypeScript web app / Expo React Native app].

Please integrate Jitsi Meet into my project step-by-step:

1. Read `source/USAGE.md` fully before writing any code.
2. Install all required dependencies listed in the "Required dependencies" section.
3. Set up the TypeScript path aliases and webpack/metro config as described in "Project setup".
4. Embed a Jitsi meeting in [describe your target page/screen] using the real exports from
   `source/modules/API/external/index.js` and `source/modules/transport/index.js`.
5. Wire up the following events and commands: [list your specific requirements].
6. Do not invent any API symbols; use only what is documented in `source/USAGE.md`
   and visible in the file excerpts provided.
7. Show me the final diff or complete files changed.

License and credit

Jitsi Meet is licensed under the Apache License 2.0. See source/LICENSE for the full license text. The upstream project is maintained by the Jitsi team at 8x8, Inc. Source: https://github.com/jitsi/jitsi-meet, npm: jitsi-meet.

This product’s unique contribution is clean room implementation of valuable code block into AVCP compatible standard.

Hướng dẫn cài đặt đầy đủ và prompt tích hợp sẽ mở khóa sau khi mua.