Having trouble getting Edge browser to identify embedded blob as a valid source URL within a video tag

Question

Having trouble getting Edge browser to identify embedded blob as a valid source URL within a video tag

Having trouble using a blob as the source for a video file.

Works well on Chrome and Safari, but facing issues on Edge.

This code is written in TypeScript with Angular 7. On Edge mobile, it seems like a broken link is displayed.

private initVideoFromBlob(blob: Blob) {
  const edBlob = new Blob([blob], { type: 'video/mp4' });
  const url = URL.createObjectURL(edBlob);
  this.videoSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

Tried another approach, but encountered the same problem:

private initVideoFromBlob(blob: Blob) {
  let url: any;
  const edBlob = new Blob([blob], { type: 'video/mp4' });
  if (window.navigator.msSaveOrOpenBlob) {
    url = window.navigator.msSaveOrOpenBlob(edBlob);
  } else {
    url = (URL || webkitURL).createObjectURL(edBlob);
  }
  this.videoSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

My HTML:

<video controls>
  <source *ngIf="videoSrc" [src]="videoSrc" type="video/mp4" />
</video>

Edit:

Attempted converting blob to dataURL following DarticCode's suggestion, but still facing the same issue.

private async initVideoFromBlob(blob: Blob) {
  let url: string | boolean;
  const edBlob = new Blob([blob], { type: 'video/mp4' });
  if (/Edge\//.test(navigator.userAgent) || /EdgA\//.test(navigator.userAgent)) {
    const promise = new Promise((resolve, reject) => {
      const fr = new FileReader();
      fr.onload = x => resolve(fr.result);
      fr.readAsDataURL(edBlob);
    });

    url = await promise;
  } else {
    url = (URL || webkitURL).createObjectURL(edBlob);
  }
  this.videoSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

angular typescript microsoft-edge

Answer 1

Answer №1

There is a bug that will be addressed in the next release. You'll need to convert the blob to a data URI.

//**Converting dataURL to blob**
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

//**Converting blob to dataURL**
function blobToDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);}
    a.readAsDataURL(blob);
}

//test:                    blob URL \/
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
blobToDataURL(blob, function(dataurl){
    console.log(dataurl);
    
    //dataurl is a variable here that allows you to work with blob as dataurl
});

Answer 2

There is a bug that will be addressed in the next release. You'll need to convert the blob to a data URI.

//**Converting dataURL to blob**
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

//**Converting blob to dataURL**
function blobToDataURL(blob, callback) {
    var a = new FileReader();
    a.onload = function(e) {callback(e.target.result);}
    a.readAsDataURL(blob);
}

//test:                    blob URL \/
var blob = dataURLtoBlob('data:text/plain;base64,YWFhYWFhYQ==');
blobToDataURL(blob, function(dataurl){
    console.log(dataurl);
    
    //dataurl is a variable here that allows you to work with blob as dataurl
});

Answer 3

Answer №2

I conducted a test with a local video file and found that it performs well on Edge browser. Since I didn't have a pre-existing blob URL, I decided to first convert the local video file into a blob. See the code snippet below for reference:

<video controls>
    <source id="videoSrc" type="video/mp4" >
</video>

<script>
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';

    xhr.onload = function () {

        var reader = new FileReader();

        reader.onloadend = function () {

            var byteCharacters = atob(reader.result.slice(reader.result.indexOf(',') + 1));

            var byteNumbers = new Array(byteCharacters.length);

            for (var i = 0; i < byteCharacters.length; i++) {

                byteNumbers[i] = byteCharacters.charCodeAt(i);

            }

            var byteArray = new Uint8Array(byteNumbers);
            var blob = new Blob([byteArray], { type: 'video/mp4' });
            var url = URL.createObjectURL(blob);

            document.getElementById('videoSrc').src = url;

        }

        reader.readAsDataURL(xhr.response);

    };

    xhr.open('GET', 'video/test.mp4');
    xhr.send();
</script>

You can view the result here. If you encounter any issues with the above method, consider creating a minimal sample to troubleshoot the problem.

Answer 4

I conducted a test with a local video file and found that it performs well on Edge browser. Since I didn't have a pre-existing blob URL, I decided to first convert the local video file into a blob. See the code snippet below for reference:

<video controls>
    <source id="videoSrc" type="video/mp4" >
</video>

<script>
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';

    xhr.onload = function () {

        var reader = new FileReader();

        reader.onloadend = function () {

            var byteCharacters = atob(reader.result.slice(reader.result.indexOf(',') + 1));

            var byteNumbers = new Array(byteCharacters.length);

            for (var i = 0; i < byteCharacters.length; i++) {

                byteNumbers[i] = byteCharacters.charCodeAt(i);

            }

            var byteArray = new Uint8Array(byteNumbers);
            var blob = new Blob([byteArray], { type: 'video/mp4' });
            var url = URL.createObjectURL(blob);

            document.getElementById('videoSrc').src = url;

        }

        reader.readAsDataURL(xhr.response);

    };

    xhr.open('GET', 'video/test.mp4');
    xhr.send();
</script>

You can view the result here. If you encounter any issues with the above method, consider creating a minimal sample to troubleshoot the problem.

Having trouble getting Edge browser to identify embedded blob as a valid source URL within a video tag

Answer №1

Answer №2

Similar questions

Adding a fresh attribute to MongoDB using push model

"Prisma vs. Supabase: A Comparison of Image Uploading

Issue with React TSX component in NextJs 14.0.4: Local MP3 files cannot be played, only external online MP3 files work

Create a PDF document utilizing Angular Ignite UI for Angular

Is it possible to automatically generate a discriminated union for every interface within a given namespace?

Using Angular's setTimeout() function with an external lambda that includes a parameter

Utilizing Angular 2 Animations with the ngOnInit Lifecycle Hook

Angular and Node version discrepancies causing problems

Angular2's Dynamic Forms

Tips for preventing duplicate imports in Sass with the @use rule in Webpack

Can you please provide an explanation on the functioning of Dependency Injection in Nestjs?

What is the best way to utilize a tsconfig "alias path" to import an @ngModule along with other definitions?

Utilizing Angular routing with Module Federation

Watchable: Yield the outcome of a Promise as long as watching continues

Is it possible to detect individual key value modifications in Firestore using Angular?

What is the best way to connect an object to an array using ngFor in Angular?

Leveraging Observables in an Angular 2 component to broadcast data to multiple components

"Experience the power of Angular with 15 incredibly dynamic components utilizing the compileModuleAndAllComponentsAsync function

What is the best way to create Jest unit tests for an Angular Component without using TestBed?

Tips for dynamically altering the bound variable in Angular