ghaymah_dev/codepill-sfu
2
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

[mirotalksfu] - #194 Add support for GIF virtual backgrounds

تصفح المصدر
هذا الالتزام موجود في:
Miroslav Pejic
2025-02-16 21:39:57 +01:00
الأصل c76d2a34a0
التزام 97cc93f5d5
7 ملفات معدلة مع 72 إضافات و25 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

2
public/js/Brand.js
عرض الملف

@@ -64,7 +64,7 @@ let BRAND = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: '<strong>WebRTC SFU v1.7.45</strong>',
title: '<strong>WebRTC SFU v1.7.46</strong>',
html: `
<button
id="support-button"

4
public/js/Room.js
عرض الملف

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.7.45
* @version 1.7.46
*
*/
@@ -5235,7 +5235,7 @@ function showAbout() {
position: 'center',
imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
customClass: { image: 'img-about' },
title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.7.45',
title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.7.46',
html: `
<br />
<div id="about">

2
public/js/RoomClient.js
عرض الملف

@@ -9,7 +9,7 @@
* @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.7.45
* @version 1.7.46
*
*/

84
public/js/VirtualBackground.js
عرض الملف

@@ -4,6 +4,10 @@ class VirtualBackground {
constructor() {
this.segmentation = null;
this.initialized = false;
this.gifCanvas = null;
this.gifCtx = null;
this.gifAnimation = null;
this.currentGifFrame = null;
}
async initializeSegmentation() {
@@ -123,36 +127,78 @@ class VirtualBackground {
}
async applyVirtualBackgroundToWebRTCStream(videoTrack, image = 'https://i.postimg.cc/t9PJw5P7/forest.jpg') {
const backgroundImage = await this.loadImage(image);
const isGif = image.endsWith('.gif') || image.startsWith('data:image/gif');
const backgroundImage = await this.loadImage(image, isGif);
const maskHandler = async (ctx, canvas, mask, imageBitmap) => {
// Apply the mask to keep the person in focus
ctx.save();
ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(mask, 0, 0, canvas.width, canvas.height);
ctx.restore();
try {
// Apply the mask to keep the person in focus
ctx.save();
ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(mask, 0, 0, canvas.width, canvas.height);
ctx.restore();
// Save the focused person area
const personImageBitmap = await createImageBitmap(canvas);
// Save the focused person area
const personImageBitmap = await createImageBitmap(canvas);
// Draw the background image
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
// If GIF is detected, draw the current animated frame
if (isGif) {
if (this.currentGifFrame) {
ctx.drawImage(this.currentGifFrame, 0, 0, canvas.width, canvas.height);
}
} else {
// Draw the background image
ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
}
// Draw the person back on top of the background image
ctx.globalCompositeOperation = 'source-over';
ctx.drawImage(personImageBitmap, 0, 0, canvas.width, canvas.height);
// Draw the person back on top of the background image
ctx.globalCompositeOperation = 'source-over';
ctx.drawImage(personImageBitmap, 0, 0, canvas.width, canvas.height);
} catch (error) {
console.error('❌ Error in maskHandler:', error);
}
};
if (isGif) this.animateGifBackground();
return this.processStreamWithSegmentation(videoTrack, maskHandler);
}
async loadImage(src) {
async loadImage(src, isGif) {
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = src;
img.onload = () => resolve(img);
img.onerror = reject;
if (isGif) {
// Setup canvas for GIF animation rendering
this.gifCanvas = document.createElement('canvas');
this.gifCtx = this.gifCanvas.getContext('2d');
try {
gifler(src).get((a) => {
this.gifAnimation = a;
a.animateInCanvas(this.gifCanvas); // Start the animation
console.log('✅ GIF loaded and animation started.');
resolve(this.gifCanvas);
});
} catch (error) {
console.error('❌ Error loading GIF:', error);
reject(error);
}
} else {
const img = new Image();
img.crossOrigin = 'anonymous';
img.src = src;
img.onload = () => resolve(img);
img.onerror = reject;
}
});
}
animateGifBackground() {
if (!this.gifAnimation) return;
// Updates the current GIF frame at each animation step
const updateFrame = () => {
this.currentGifFrame = this.gifCanvas;
requestAnimationFrame(updateFrame);
};
updateFrame();
}
}