[mirotalk] - #275 Add iframeApi
This commit is contained in:
Miroslav Pejic
+13
-2
@@ -43,7 +43,7 @@ dependencies: {
|
||||
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
|
||||
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
|
||||
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
|
||||
* @version 1.4.85
|
||||
* @version 1.4.86
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -399,7 +399,18 @@ const presenters = {}; // collect presenters grp by channels
|
||||
|
||||
app.set('trust proxy', trustProxy); // Enables trust for proxy headers (e.g., X-Forwarded-For) based on the trustProxy setting
|
||||
app.use(helmet.noSniff()); // Enable content type sniffing prevention
|
||||
app.use(express.static(dir.public)); // Use all static files from the public folder
|
||||
|
||||
// Use all static files from the public folder
|
||||
app.use(
|
||||
express.static(dir.public, {
|
||||
setHeaders: (res, filePath) => {
|
||||
if (filePath.endsWith('.js')) {
|
||||
res.setHeader('Content-Type', 'application/javascript');
|
||||
} //...
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
app.use(cors(corsOptions)); // Enable CORS with options
|
||||
app.use(compression()); // Compress all HTTP responses using GZip
|
||||
app.use(express.json()); // Parse JSON bodies
|
||||
|
||||
+5
-5
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "mirotalk",
|
||||
"version": "1.4.85",
|
||||
"version": "1.4.86",
|
||||
"description": "A free WebRTC browser-based video call",
|
||||
"main": "server.js",
|
||||
"scripts": {
|
||||
@@ -42,7 +42,7 @@
|
||||
"homepage": "https://github.com/miroslavpejic85/mirotalk",
|
||||
"dependencies": {
|
||||
"@mattermost/client": "10.6.0",
|
||||
"@sentry/node": "^9.5.0",
|
||||
"@sentry/node": "^9.6.0",
|
||||
"axios": "^1.8.3",
|
||||
"colors": "^1.4.0",
|
||||
"compression": "^1.8.0",
|
||||
@@ -51,15 +51,15 @@
|
||||
"dompurify": "^3.2.4",
|
||||
"dotenv": "^16.4.7",
|
||||
"express": "^4.21.2",
|
||||
"express-openid-connect": "^2.17.1",
|
||||
"express-openid-connect": "^2.18.0",
|
||||
"he": "^1.2.0",
|
||||
"helmet": "^8.0.0",
|
||||
"helmet": "^8.1.0",
|
||||
"jsdom": "^26.0.0",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"js-yaml": "^4.1.0",
|
||||
"ngrok": "^5.0.0-beta.2",
|
||||
"nodemailer": "^6.10.0",
|
||||
"openai": "^4.87.3",
|
||||
"openai": "^4.87.4",
|
||||
"qs": "^6.14.0",
|
||||
"socket.io": "^4.8.1",
|
||||
"swagger-ui-express": "^5.0.1",
|
||||
|
||||
+1
-1
@@ -73,7 +73,7 @@ let brand = {
|
||||
},
|
||||
about: {
|
||||
imageUrl: '../images/mirotalk-logo.gif',
|
||||
title: 'WebRTC P2P v1.4.85',
|
||||
title: 'WebRTC P2P v1.4.86',
|
||||
html: `
|
||||
<button
|
||||
id="support-button"
|
||||
|
||||
+2
-2
@@ -15,7 +15,7 @@
|
||||
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
|
||||
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
|
||||
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
|
||||
* @version 1.4.85
|
||||
* @version 1.4.86
|
||||
*
|
||||
*/
|
||||
|
||||
@@ -11035,7 +11035,7 @@ function showAbout() {
|
||||
Swal.fire({
|
||||
background: swBg,
|
||||
position: 'center',
|
||||
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.4.85',
|
||||
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.4.86',
|
||||
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
|
||||
customClass: { image: 'img-about' },
|
||||
html: `
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
class IframeApi {
|
||||
static DEFAULT_OPTIONS = {
|
||||
room: 'default-room',
|
||||
name: 'guest',
|
||||
audio: false,
|
||||
video: false,
|
||||
screen: false,
|
||||
hide: false,
|
||||
notify: false,
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
token: null,
|
||||
parentNode: null,
|
||||
};
|
||||
|
||||
constructor(domain, options = {}) {
|
||||
if (!domain) {
|
||||
throw new Error('Domain is required');
|
||||
}
|
||||
|
||||
this.domain = domain;
|
||||
this.options = { ...IframeApi.DEFAULT_OPTIONS, ...options };
|
||||
|
||||
if (!this.isValidParentNode()) {
|
||||
throw new Error('Invalid parent node provided');
|
||||
}
|
||||
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
const params = this.buildParams();
|
||||
const iframe = this.createIframe(params);
|
||||
|
||||
this.clearParentNode();
|
||||
this.appendIframeToParentNode(iframe);
|
||||
}
|
||||
|
||||
isValidParentNode() {
|
||||
return this.options.parentNode instanceof HTMLElement;
|
||||
}
|
||||
|
||||
buildParams() {
|
||||
const params = new URLSearchParams({
|
||||
room: this.options.room,
|
||||
name: this.options.name,
|
||||
audio: this.options.audio ? 1 : 0,
|
||||
video: this.options.video ? 1 : 0,
|
||||
screen: this.options.screen ? 1 : 0,
|
||||
hide: this.options.hide ? 1 : 0,
|
||||
notify: this.options.notify ? 1 : 0,
|
||||
});
|
||||
|
||||
if (this.options.token) {
|
||||
params.append('token', this.options.token);
|
||||
}
|
||||
|
||||
return params;
|
||||
}
|
||||
|
||||
createIframe(params) {
|
||||
const protocol = this.domain.startsWith('localhost') ? 'http' : 'https';
|
||||
const url = new URL(`${protocol}://${this.domain}/join`);
|
||||
url.search = params.toString();
|
||||
|
||||
const iframe = document.createElement('iframe');
|
||||
iframe.src = url.toString();
|
||||
iframe.allow =
|
||||
'camera; microphone; display-capture; fullscreen; clipboard-read; clipboard-write; web-share; autoplay';
|
||||
iframe.style.width = this.options.width;
|
||||
iframe.style.height = this.options.height;
|
||||
iframe.style.border = '0px';
|
||||
|
||||
// Optional: Add event listeners for loading and error states
|
||||
iframe.addEventListener('load', () => console.log('Iframe loaded successfully'));
|
||||
iframe.addEventListener('error', () => console.error('Iframe failed to load'));
|
||||
|
||||
return iframe;
|
||||
}
|
||||
|
||||
clearParentNode() {
|
||||
this.options.parentNode.innerHTML = '';
|
||||
}
|
||||
|
||||
appendIframeToParentNode(iframe) {
|
||||
this.options.parentNode.appendChild(iframe);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>MiroTalk Iframe demo</title>
|
||||
|
||||
<!-- Replace p2p.mirotalk.com with YOUR-DOMAIN-NAME -->
|
||||
<script src="https://p2p.mirotalk.com/js/iframe.js" defer></script>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const domain = 'p2p.mirotalk.com'; // YOUR-DOMAIN-NAME
|
||||
const options = {
|
||||
room: 'test',
|
||||
name: 'mirotalk',
|
||||
audio: 0,
|
||||
video: 0,
|
||||
screen: 0,
|
||||
hide: 0,
|
||||
notify: 0,
|
||||
width: '100vw',
|
||||
height: '100vh',
|
||||
parentNode: document.querySelector('#meet'),
|
||||
}; // https://docs.mirotalk.com/mirotalk-p2p/join-room/
|
||||
const api = new IframeApi(domain, options);
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="meet"></div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user