Video Call iframe Integration Guide

Complete documentation for embedding video calls in your application

Basic Integration

Add the following iframe code to your website:

Basic iframe Implementation 
<iframe
    src="https://room.omvyn.net/COMPANY_ID/ROOM_ID?theme=office&autoJoin=true"
    style="width: 100%; height: 600px; border: none;"
    allowfullscreen
    allow="camera; microphone; fullscreen; display-capture"
></iframe>

URL Parameters

Parameter Options Description
theme default, office, beach, space, blur, black, none Sets the background theme for the video call
minimal true, false Enables minimal UI mode with reduced controls
autoJoin true, false Automatically joins the call when loaded
hideSelfview true, false Hides the local video preview
hideStatus true, false Hides the status bar
hideControls true, false Hides the control bar

PostMessage API

Control the video call from your parent application using the PostMessage API:

PostMessage API Integration API Documentation 
// Get reference to the iframe element
const videoCallFrame = document.getElementById('videoCallFrame');

// Function to send commands to the video call
function sendCommand(action, params = {}) {
    videoCallFrame.contentWindow.postMessage({
        action,
        ...params
    }, '*');
}

// Example: Start a new call
sendCommand('startCall', {
    room: 'ROOM_ID',
    company: 'COMPANY_ID'
});

// Listen for messages from the video call iframe
window.addEventListener('message', (event) => {
    // Verify message source
    if (event.source !== videoCallFrame.contentWindow) return;

    // Handle incoming messages
    const data = event.data;
    console.log('Message from video call:', data);
});

Available Commands

Command Parameters Description
startCall room, company Starts a new video call
endCall none Ends the current call
toggleControls none Shows/hides control bar
toggleSelfVideo none Shows/hides self view
startRecording none Starts call recording
setMinimal value (boolean) Enables/disables minimal UI

Example Implementation

Here's a complete example showing how to implement the video call with all features:

HTML Structure 
<!DOCTYPE html>
<html>
<head>
    <title>Video Call Integration</title>
</head>
<body>
    <!-- Control Buttons -->
    <div class="controls">
        <button onclick="startCall()">Start Call</button>
        <button onclick="endCall()">End Call</button>
        <button onclick="toggleControls()">Toggle Controls</button>
        <button onclick="toggleSelfVideo()">Toggle Self View</button>
    </div>

    <!-- Video Call iframe -->
    <iframe
        id="videoCallFrame"
        src="https://room.omvyn.net/COMPANY_ID/ROOM_ID?theme=office"
        style="width: 100%; height: 600px; border: none;"
        allowfullscreen
        allow="camera; microphone; fullscreen; display-capture"
    ></iframe>

    <script>
        // JavaScript code will be shown below
    </script>
</body>
</html>
JavaScript Integration 
// Get reference to the iframe element
const frame = document.getElementById('videoCallFrame');

// Function to start a video call
function startCall() {
    frame.contentWindow.postMessage({
        action: 'startCall',
        room: 'ROOM_ID',
        company: 'COMPANY_ID'
    }, '*');
}

// Function to end the current call
function endCall() {
    frame.contentWindow.postMessage({
        action: 'endCall'
    }, '*');
}

// Function to toggle control panel visibility
function toggleControls() {
    frame.contentWindow.postMessage({
        action: 'toggleControls'
    }, '*');
}

// Function to toggle self video visibility
function toggleSelfVideo() {
    frame.contentWindow.postMessage({
        action: 'toggleSelfVideo'
    }, '*');
}

// Listen for messages from the video call iframe
window.addEventListener('message', (event) => {
    // Verify message source
    if (event.source !== frame.contentWindow) return;

    // Handle incoming messages
    console.log('Message from video call:', event.data);
});