时间戳

首页 > 解决方案 > 角度：如何从后端获取视频，在标头中发送 jwt 令牌

angular - 角度：如何从后端获取视频，在标头中发送 jwt 令牌

问题描述

希望你们都做得很好，我遇到了 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)));
  }

}

我的问题是所有这些仅适用于图像类型的文件附件，当它是视频时，请求总是失败

示例： 视频请求

失败的

我不知道类型视频，我必须用另一种方式或类似的东西，但我确定问题不是来自后端，因为我在邮递员中测试过，我总是得到视频

任何帮助，请

标签： angularsecurityvideo

解决方案

一切看起来都很好。但在某些情况下blob.data会给你实际的流。试试这个。

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

试试这个视频。如果这可行，您将不得不在您的管道中放置条件逻辑。

推荐阅读