Не могу заставить Edge распознавать инкапсулированный BLOB-объект как исходный URL внутри видеоэлемента - PullRequest
Новая
       5

Не могу заставить Edge распознавать инкапсулированный BLOB-объект как исходный URL внутри видеоэлемента

0 голосов
/ 30 января 2020

Мне нужно использовать BLOB-объект в качестве источника видеофайла.

Все отлично работает на Chrome и Safari, но я не могу заставить его работать на Edge

Этот метод построен с использованием машинописи, и я использую Angular 7. То, что я вижу в Edge на мобильном устройстве, похоже, неработающая ссылка. 

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

Я тоже пробовал это, но у меня был тот же результат 

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>

Редактировать:

Я попытался преобразовать мой BLOB-объект в dataURL, как это было предложено DarticCode, но я Я все еще получаю тот же результат. 

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);
}

Ответы [ 2 ]

2 голосов
/ 30 января 2020

это ошибка, которую я исправлю в новой версии, которую вам придется преобразовать в BLOB-объект данных uri 

//**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});
}

//**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 var here that gives it so what you wanna do with blob works with dataurl
});
0 голосов
/ 05 февраля 2020

Я провел тест с локальным видеофайлом, и кажется, что он может хорошо работать на Edge. У меня нет готового URL-адреса блоба, поэтому я сначала передаю локальный видеофайл в блоб. Пример кода, как показано ниже, вы можете пройти тест: 

<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>

Результат будет , как это . Если проблема все еще сохраняется, используя вышеуказанную функцию, вы можете попытаться сделать минимальный образец для воспроизведения проблемы.

...