Hello Everyone . Hope You are having a good day Here Is the detailed explanation of how to add a video calling feature to your app
Below are the steps to do so :
- Go to enablex.io or any other such website like agora.io etc (I am not promoting any of them)
- For This Project i used enablex.io
3.Create a project , add video feature and keep the embed code with you.
Any video call website wont work on thunkable’s web viewer because it isn’t a full fledged browser
Also , We cant let The user get the actual link as then he/she can share the link to anyone from the address bar. So we need a way to verify that the user is using our app before allowing access to the website.
- Using github or vs code, Create an index.html file.
5.Copy and paste this code
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="https://thunkable.github.io/webviewer-extension/thunkableWebviewerExtension.js" type="text/javascript"></script>
</head>
<title>Health 24/7</title></head>
<body >
<center>
<input id="code" ><br>
<button class="btn btn-danger" id="submit" onclick="Checkforcode()">Join Meeting</button>
<h3 id="result" ></h3>
</center>
<script src="main.js"></script>
</body>
</html>
We would be Using the Web viewer extension to pass back and forth the code for logging in.
- For style.css i have used this code
iframe {
height: 100%;
width: 100%;
}
input{
width: 95%;
height: 20%;
}
- For main.js This is the code
verified = 'false'
rdmnmbr = Math.floor(100000 + Math.random() * 900000)
ThunkableWebviewerExtension.postMessage(rdmnmbr)
function Checkforcode() {
userincode = document.getElementById('code').value
if (userincode == rdmnmbr) {
window.open("videocll.html");
document.getElementById('result').innerHTML = 'Logging you in'
}
else
document.getElementById('result').innerHTML = 'Code Invalid'
}
function checkifverified() {
if (verified == "false") {
window.open("index.html", "_self");
}
}
Breakdown of the above code
a). rdmnmbr = Math.floor(100000 + Math.random() * 900000) ThunkableWebviewerExtension.postMessage(rdmnmbr)
This Creates a random 6 digit code and sends it to your app through the webviewer extension.
b.) function Checkforcode() { userincode = document.getElementById('code').value if( userincode == rdmnmbr) { window.open("videocll.html"); document.getElementById('result').innerHTML = 'Logging you in' } else document.getElementById('result').innerHTML = 'Code Invalid' }
This function is called when the submit button is clicked on the html page. It verifies whether User has entered the correct code or not
The check if verified function is called when the videocll.html page is loaded. IT will check if the user is verified or not .if not it will send him/her to the index page.
Code For the Videocll.html page
8.
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<title>Health 24/7</title></head>
<body onload = "checkifverified()">
<iframe allow="camera; microphone; fullscreen; speaker; display-capture"
src="Your Video Website From enablex or agora">
</iframe>
<script src = main.js></script>
</body>
</html>
In the iframe You Have to change the src to Your website embed link
At last We have to add the thunkable page blocks.
9. a) For Designing Add A simple web viewer and label(To show the code)
Set the web viewers URL to The hosted GitHub Index.html page
b) The blocks Page:
10. Sweet! Enjoy Your Embedded Video Call In Your App
For Adding Sdk’s Or apis Of video calling websites i Suggest You Ask @Power_Thunkers
Please Comment And like my post if it helped you
Thank you @muneer for your help
Thank you
P.S.
Check Out This Post For More
Why Web viewer doesn't show video and audio