For iOS 16.0+ iPhone, when the src of video tag is blob URL which created by URL.create ObjectURL , iOS WebView decoding fails and the iPhone's screen recording function is affected. As a result, screen-recording videos cannot be properly stored and recorded, resulting in a screen recording failure.
Reload page or create multi-video-element，failure rate is close to 100%
export function createBlobURLForMp4Source(source: string): Promise<string> {
const URL = (window as any).webkitURL || window.URL;
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', source, true);
xhr.responseType = 'blob';
xhr.onload = function (): void {
if (xhr.status === 200 || xhr.status === 304) {
const res = xhr.response;
if (/iphone|ipad|ipod/i.test(navigator.userAgent)) {
const fileReader = new FileReader();
fileReader.onloadend = function (): void {
const resultStr = fileReader.result as string;
const raw = atob(resultStr.slice(resultStr.indexOf(',') + 1));
const buf = Array(raw.length);
for (let d = 0; d < raw.length; d++) {
buf[d] = raw.charCodeAt(d);
}
const arr = new Uint8Array(buf);
const blob = new Blob([arr], { type: 'video/mp4' });
resolve(URL.createObjectURL(blob));
};
fileReader.readAsDataURL(xhr.response);
} else {
resolve(URL.createObjectURL(res));
}
} else {
reject(new Error(`http response invalid${xhr.status}`));
}
};
xhr.send();
});
}
0
0
1.2k