Gcore Real-Time Video is an embeddable customizable Gcore Video Streaming 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>
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:
Below we will look at embedding the module in a demo page, paying attention to the attributes and methods used.
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:
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>
<!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"><iframe </span><span class="blue"> src=</span>"https://meet.gcore.com/call/<span id="urlroom"></span>&controlsDisabled=true&displayName=<name>"<span class="blue"> allow=</span>"camera; microphone; fullscreen; display-capture; autoplay; screen-wake-lock" id="myIframe"<span class="green">></iframe></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?
Explore the Streaming Platform by Gcore