iOS 16.0+ H5 video has issues with blob-url

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();
  });
}
iOS 16.0+ H5 video has issues with blob-url
 
 
Q