ANGULAR: как получить видео с бэкэнда, отправляющего токен jwt в заголовках

Question

надеюсь, что у вас все хорошо, у меня реальная проблема с Angular

, бэкэнд отправляет мне объект, содержащий массивы URL для вложений (изображений или видео):

attachments:[{
    id: 4
    title: "d439e68f-ece6-4d80-a0b7-111fb337a8e6.jpeg"
    content: null
    file: "http://api-coldplace-dev.piman-analytics.fr/api/tutorial/4/attachments/4"
    type: "image"
    mime: "image/jpeg"
    duration: 0
    order: 0
    cover: 0
    external_link: 0
    },{
    id: 5
    title: "file_example_MP4_480_1_5MG.mp4"
    content: null
    file: "http://api-coldplace-dev.piman-analytics.fr/api/tutorial/4/attachments/5"
    type: "video"
    mime: "video/mp4"
    duration: 31
    order: 1
    cover: 0
    external_link: 0
}]

чтобы получить это вложение, вы должны сделать это с помощью другого http-запроса GET для url (attachement.file), отправляющего токен jwt в заголовках этого запроса (безопасное вложение).

Пример

пример ответа

я делаю это с помощью защищенной трубы

HTML:

 <img *ngIf="file?.type?.toString()?.includes('image')"
                       [src]="file?.source | secure | async "
                       height="70px"
                       width="70px"/>
 <video *ngIf="file?.type?.toString()?.includes('video')"
                         height="70px"
                         width="70px"
                         [src]="file?.source | secure | async"
                         (loadedmetadata)="getDuration($event, i)">

ТРУБА :

@Pipe({
  name: 'secure'
})
export class SecurePipe implements PipeTransform {

  constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }

  transform(url): Observable<SafeUrl> {
    return this.http
      .get(url, { responseType: 'blob' })
      .map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));
  }

}

Моя проблема в том, что все это работает только для файловых вложений типов изображений, когда это видео, запрос всегда завершается неудачно

пример: запрос видео

не удалось

Я не знаю, является ли тип видео, я связан с другим способом или что-то в этом роде, но я уверен, что проблема не из бэкэнда, потому что я тестировал в почтальоне, и я всегда получаю видео

любую помощь, пожалуйста

Answer 1

Все выглядит хорошо. Но в некоторых случаях blob.data дает вам реальный поток. Попробуйте это.

URL.createObjectURL(val.data) // assign val:any if neccessary

Попробуйте это для видео. Если это сработает, вам придется поместить условную логику c в вашу трубу.