Home/Streaming platform/Real-Time Video/Embed with iframe

How to embed Gcore Real-Time Video into your app with iframe

Overview of Gcore Real-Time Video app embedding

Gcore Real-Time Video is an embeddable customizable Gcore Streaming Platform module. Using the iframe HTML element, you can embed the video calls module into your app.

Here is an example of code that may be used for this purpose:

<iframe src="https://meet.gcore.com/call/serv2testroom" allow="camera; microphone; fullscreen; display-capture; autoplay; screen-wake-lock"></iframe>

In the src attribute, set the URL with your video room ID.
In the allow attribute, set the necessary permission policies (e.g., for the camera, microphone, fullscreen, etc.)

This is how the module is displayed after implementing iframe on a website:

The process of embedding the module in various OSs is explained in the following materials:

How to embed a Gcore Real-Time Video module into your app

Below we will look at embedding the module in a demo page, paying attention to the attributes and methods used.

For beginners

1. Generate a room URL for your video call. For this example, we generated the URL https://meet.gcore.com/call/serv2testroom.

2. Add additional attributes from the table for managing security and Gcore Real-Time Video module features, if necessary, to your URL. For example, to invite a user with the Interpreter role to our call, add the following attribute to the URL from the first step:

https://meet.gcore.com/call/serv2testroom?role=interpreter

Additional attributes are necessarily separated from the URL by “?” and each other by the characters “&.” For example:

https://meet.gcore.com/call/serv2testroom?role=interpreter&startWithFS=true&waitingRoom=<true|false>

Where:

https://meet.gcore.com/call/serv2testroom is the URL of the call
? is the sign indicating that it is followed by attributes.
role=interpreter is the first attribute which assigns the Interpreter role for the user.
startWithFS=true is the second attribute that enables the full-screen mode.
waitingRoom=<true|false> is the third attribute that enables the waiting room for participants when they connect to the call.
& is the separator between attributes.

3. Create an iframe HTML code. Don’t forget to add permissions policy attributes, e.g., allow="camera; microphone; fullscreen; display-capture; autoplay; screen-wake-lock". You can use the “disallow” policy.

For example, with the parameters above, the iframe code will be:

<iframe src="https://meet.gcore.com/call/serv2testroom?role=interpreter" allow="camera; microphone; fullscreen; display-capture; autoplay; screen-wake-lock"></iframe>

Where:

https://meet.gcore.com/call/serv2testroom is a room URL.
? is a delimiter character for adding optional attributes.
role=interpreter is an additional attribute.
camera; microphone; fullscreen; display-capture; autoplay; screen-wake-lock are permission policies.

4. Add the iframe your web app's code.

That’s it! Gcore Real-Time Video will be displayed in your app as the following module:

For developers (advanced customization)

1. Build an HTML page with iframes, buttons, and other interface elements. This page will be bound to the methods necessary to control the Real-Time Video module. The expandable block below contains an example of implementing Gcore Real-Time Video module into HTML.

We have prepared a demo page using a simple HTML sample to demonstrate elements. We used:

Room ID field. Inserted using <input> tag with ID <id="id-room">. Users should enter an ID in the field. When they click the “Generate ID” button, the content entered in the field will be pasted as a part of the src attribute after src="https://meet.gcore.com/call/$id-room". Also, autogeneration of ID with substitution of value from an array using getRandomInt function is added to the field. Values are changed every 2 seconds. When clicking “Generate ID,” a random value is substituted into the src attribute.
iframe tag with src attribute. Enables access policy to enable camera, microphone, fullscreen mode, autoplay, hide buttons from iframe field (as we will put them separately,) and participant's name. For example:

<iframe src="https://meet.gcore.com/call/serv2test2room?controlsDisabled=true&displayName=<name>" allow="camera; microphone; fullscreen; display-capture; autoplay; screen-wake-lock" id="myIframe"></iframe>

Buttons that control the participant's camera, microphone, and buttons responsible for sharing the screen and showing/hiding buttons inside the iframe. Real-Time Video API methods will be applied to them. An additional button toggles between the mobile and desktop versions of iframe.
A field and a button to change the participant's name specified in the iframe.
Buttons that toggle between the mobile version and the desktop version of iframe.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <script src="https://kit.fontawesome.com/155a070cb6.js" crossorigin="anonymous"></script>
    <script type="module" src="main.js"></script>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" type="image/x-icon" href="assets/gcore-icon.svg">  
</head>
<body>
    <header class="head">
        <div class="container">
            <h1>Demo of integration Video Conference API in your project</h1>
        </div>
    </header>
    <main class="main">
        <div class="container">
            <div class="wrapper">
                <section class="step-one">
                    <h2>Step 1</h2>
                    <label for="id-room">Input a server location and any ID of a room:</label>
                    <input type="text" id="enterID" value="" name="id-room" placeholder=" serv1test">
                    <button type="button" id="stopButton">Generate ID</button>
                </section>
                <section class="step-two">
                    <h2>Step 2</h2>
                    <p> Copy the following iFrame of the room and paste to your code:</p>
                    <div class="iframe-code-block">
                        <span class="green">&lt;iframe&nbsp;</span><span class="blue"> src=</span>"https://meet.gcore.com/call/<span id="urlroom"></span>&controlsDisabled=true&displayName=<name>"<span class="blue">&nbsp;allow=</span>"camera; microphone; fullscreen; display-capture; autoplay; screen-wake-lock" id="myIframe"<span class="green">&gt;&lt;/iframe&gt;</span>
                    </div>
                </section>
                <section class="step-three">
                    <h2 class="header">Step 3</h2>
                    <p>Push the button to start a call</p>
                    <button id="get_id">Start call</button>
                </section>
                <section class="step-four">
                    <h2>Step 4</h2>
                    <p>Invite participants. To do this copy the link below and send it to your guests.</p>
                    <div class="invite-link">
                        <input class="link" type="text" size="60" value="">
                        <button id="invite-button">
                            <i class="fa-regular fa-copy"></i>
                        </button>
                    </div>
                </section>
                <section class="step-five">
                    <h2>Step 5</h2>
                    <p>Press <strong>Join</strong> in the iFrame and manage the call with buttons on the right</p>
                    <div class="iframe-block">
                        <div class="iframe">
                            <div class="iframe-wrapper">
                                <h2 class="iframe__notification">IFrame not initialized</h2>
                                <iframe class="iframe__content hidden" src="https://meet.gcore.com/new/call" allow="camera; microphone; fullscreen; display-capture; autoplay; screen-wake-lock" id="myIframe"></iframe>
                            </div>
                            <div class="adaptive">
                                <button type="button" id="desktop"><i class="fa-solid fa-display"></i></button>
                                <button type="button" id="mobile"><i class="fa-solid fa-mobile-screen-button"></i></button>            
                            </div>
                        </div>
                        <div class="button-group">
                            <div class="camera">
                                <button class="button button_room" id="camera_btn">
                                    <i class="fa-solid fa-video"></i>
                                </button>
                                <p class="cam-caption">Disable camera</p>
                            </div>
                            <div class="micro">
                                <button class="button button_room" id="microphone_btn">
                                    <i class="fa-solid fa-microphone"></i>
                                </button>
                                <p class="mic-caption">Disable microphone</p>
                            </div>
                            <div class="screen">
                                <button class="button button_room" id="share_screen_btn">
                                    <i class="fa-solid fa-display"></i>
                                </button>
                                <p class="screen-caption">Share screen</p>
                            </div>
                            <div class="indicators">
                                <button class="button button_room" id="hide_indicators_btn">
                                    <i class="fa-solid fa-eye"></i></button>
                                <p class="indicator-caption">Hide indicators</p>
                            </div>
                            <div class="change-name">        
                                <input type="text" id="name1" placeholder="John Snow">
                                <button class="button_changename with-tooltip" id="change_name_btn">Change name</button>
                            </div>
                        </div>
                    </div>            
                </section>
            </div>
        </div>
    </main>
</body>
</html>

2. Install the npm package to integrate the viewcall module into your application.

npm i @gcorevideo/videocalls-iframe-adapter

3. In the JS file (instead can be used Vue, React, Angular, or another component), import MeetIframeBridge from the npm package.

import MeetIframeBridge from "@gcorevideo/videocalls-iframe-adapter"

4. Initialize a MeetIframeBridge for the iframe (request via the ID.) The following part of the code performs this action:

    let bridge;
    $('#get_id').on("click", async function() {
        $('#myIframe').attr('src', `https://meet.gcore.com/call/${value}?displayName=John&itisparticipant=true&nameScreenDisabled=true&controlsDisabled=true`);
        bridge = new MeetIframeBridge({
            element: $("#myIframe")[0],
            roomId: $('#enterID').val()
        }) 
    })

5. Control video calls embedded in an iframe through your shell interface. The general schema is:

bridge.method({ name: methodName, data: methodData { } })

Where data: methodData { } is optional and is only used in certain methods.

For example, to join the call, use:

bridge.method({
            name: "join",
            data: {constraints: {video: true, audio: true }},
            callback: function(e) {
                alert(1);
                return true;
            }
        });

In the expandable block below, you can acquaint yourself with the example of the JS file.

Below is the content of the JS code written in jQuery, with explanations in the comments.

import MeetIframeBridge from "@gcorevideo/videocalls-iframe-adapter";
$(window).on('load', function() {
    let array = [
        "a0bd5a67b08c",
        "9a8dc19e55a5",
        "5c357ec79a8e",
        "96c922570b80",
        "24f98cbd873d",
        "04d81b10857d"
    ];
   
    function getRandomInt(min, max) {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min) + min);
    }


    /* Auto-renew input value every two seconds randomly */
    let intervalMilliSeconds = 2000;
    let intervalId = setInterval(function() {
        let randomInt = getRandomInt(0, array.length);
        let roomId = array[randomInt];
        $('#enterID').val(roomId);
    }, intervalMilliSeconds);


    /* Stop auto-renew by clicking the button and set the result value for iFrame */
    let value;
    $('#stopButton').on('click', function() {
        clearInterval(intervalId);
        value = $('#enterID').val();
        $('#urlroom').text(value);
        $('.link').attr('value', `https://meet.gcore.com/call/${value}`).css("color", "white")


        let linkToCopy = $('.link').val();
        $('#invite-button').on('click', function() {
            navigator.clipboard.writeText(linkToCopy).then(
                function() {
                    console.log('successfully copied')
                },
                function() {
                    console.log('Your browser does not support Clipboard API')
                }
            )
        })  
    })
   
    /* Stop auto-renew by any keypress in input */
    $('#enterID').keyup(function() {
        clearInterval(intervalId)
        value = $(this).val();
        $('#urlroom').text(value);
    })


    /* initializaton of bridgeAPI */
    let bridge;
    $('#get_id').on("click", async function() {
        $('#myIframe').attr('src', `https://meet.gcore.com/call/${value}?displayName=John&itisparticipant=true&nameScreenDisabled=true&controlsDisabled=true`);
        bridge = new MeetIframeBridge({
            element: $("#myIframe")[0],
            roomId: $('#enterID').val()
        }),
        $(".iframe__notification").addClass("hidden")
        $(".iframe__content").removeClass("hidden")
        let clickCam;
        $('#camera_btn').on('click', function() {
            clickCam = !clickCam;
            if (clickCam) {
                bridge.method({
                    name: "disableWebcam"
                })
                $('.camera button').css("background-color", "#f40828ed").html(`<i class="fa-solid fa-video-slash"></i>`);
                $('.cam-caption').html(`<p class="cam-caption">Enable camera</p>`)
            } else {
                bridge.method({
                    name: "enableWebcam"
                })
                $('.camera button').css("background-color", "#17cf45").html(`<i class="fa-solid fa-video" title="Turn off Camera">`);
                $('.cam-caption').html(`<p class="cam-caption">Disable camera</p>`)
            }
        })   
        let clickMic;
        $('#microphone_btn').on('click', function() {
            clickMic = !clickMic;
            if (clickMic) {
                bridge.method({
                    name: "disableMic"
                })
                $('.micro button').css("background-color", "#f40828ed").html(`<i class="fa-solid fa-microphone-slash"></i>`);
                $('.mic-caption').html(`<p class="mic-caption">Enable microphone</p>`)
            } else {
                bridge.method({
                    name: "enableMic"
                })
                $('.micro button').css("background-color", "#17cf45").html(`<i class="fa-solid fa-microphone"></i>`)
                $('.mic-caption').html(`<p class="mic-caption">Disable microphone</p>`)
            }
        });
        let clickShare;
        $('#share_screen_btn').on("click", function() {
            clickShare = !clickShare
            if (clickShare) {
                bridge.method({
                    name: "enableShare"
                })
                $('.screen-caption').html(`<p class="screen-caption">Stop screen sharing</p>`)             
            } else {
                bridge.method({
                    name: "disableShare"
                })
                $('.screen-caption').html(`<p class="screen-caption">Share screen</p>`)
            }
        })
        let hideIndicator
        $('#hide_indicators_btn').on('click', function() {
            hideIndicator = !hideIndicator;
            if (hideIndicator) {
                bridge.method({
                    name: "setHideIndicators",
                    data: true,
                })
                $('.indicators button').css("background-color", "#f40828ed").html(`<i class="fa-solid fa-eye-slash"></i>`);
                $('.indicator-caption').html(`<p class="mic-caption">Show indicators</p>`)
            } else {
                bridge.method({
                    name: "setHideIndicators",
                    data: false,
                })
                $('.indicators button').css("background-color", "#17cf45").html(`<i class="fa-solid fa-eye"></i>`);
                $('.indicator-caption').html(`<p class="mic-caption">Hide indicators</p>`)
            }
        });                
        $('#change_name_btn').on("click", function() {
            let name = $('#name1').val();
            bridge.method({
                name: "changeDisplayName",
                data: name,
                callback: (e) => {
                    return
                }
            });
        });
    }) 
    $('#desktop').on('click', function() {
        $(".iframe-wrapper").removeClass("iframe-wrapper_mobile")
    })
    /* This function does not change userAgent. Only the size of the iFrame changes */
    $('#mobile').on('click', function() {
        $(".iframe-wrapper").addClass("iframe-wrapper_mobile")
    })
})

That’s it! Gcore Real-Time Video will be displayed in your app as the following module:

Was this article helpful?

Not a Gcore user yet?

Explore the Streaming Platform by Gcore

Go to the product page