haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(virtual-background): Fixes upload virtual background on Firefox 

Fixes: #8892
This commit is contained in:
Tudor D. Pop 2021-03-29 15:28:22 +03:00 committed by GitHub
parent be3bc75403
commit dfd33521bf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 30 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
react/features/virtual-background/functions.js
View File

@ -25,12 +25,13 @@ export function checkBlurSupport() {
* @param {Blob} blob - The link to add info with. * @param {Blob} blob - The link to add info with.
* @returns {Promise<string>} * @returns {Promise<string>}
*/ */
export const blobToData = (blob: Blob): Promise<string> => new Promise(resolve => { export const blobToData = (blob: Blob): Promise<string> =>
const reader = new FileReader(); new Promise(resolve => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result.toString()); reader.onloadend = () => resolve(reader.result.toString());
reader.readAsDataURL(blob); reader.readAsDataURL(blob);
}); });
/** /**
* Convert blob to base64. * Convert blob to base64.
@ -52,28 +53,35 @@ export const toDataURL = async (url: string) => {
* @param {Object} base64image - Base64 image extraction. * @param {Object} base64image - Base64 image extraction.
* @param {number} width - Value for resizing the image width. * @param {number} width - Value for resizing the image width.
* @param {number} height - Value for resizing the image height. * @param {number} height - Value for resizing the image height.
* @returns {Object} Returns the canvas output. * @returns {Promise<string>}
* *
*/ */
export async function resizeImage(base64image: any, width: number = 1920, height: number = 1080) { export function resizeImage(base64image: any, width: number = 1920, height: number = 1080): Promise<string> {
const img = document.createElement('img');
img.src = base64image; // In order to work on Firefox browser we need to handle the asynchronous nature of image loading; We need to use
/* eslint-disable no-empty-function */ // a promise mechanism. The reason why it 'works' without this mechanism in Chrome is actually 'by accident' because
img.onload = await function() {}; // the image happens to be in the cache and the browser is able to deliver the uncompressed/decoded image
// before using the image in the drawImage call.
return new Promise(resolve => {
const img = document.createElement('img');
// Create an off-screen canvas. img.onload = function() {
const canvas = document.createElement('canvas'); // Create an off-screen canvas.
const ctx = canvas.getContext('2d'); const canvas = document.createElement('canvas');
// Set its dimension to target size. // Set its dimension to target size.
canvas.width = width; const context = canvas.getContext('2d');
canvas.height = height;
// Draw source image into the off-screen canvas. canvas.width = width;
// TODO: keep aspect ratio and implement object-fit: cover. canvas.height = height;
ctx.drawImage(img, 0, 0, width, height);
// Encode image to data-uri with base64 version of compressed image. // Draw source image into the off-screen canvas.
return canvas.toDataURL('image/jpeg', 0.5); // TODO: keep aspect ratio and implement object-fit: cover.
context.drawImage(img, 0, 0, width, height);
// Encode image to data-uri with base64 version of compressed image.
resolve(canvas.toDataURL('image/jpeg', 0.5));
};
img.src = base64image;
});
} }