支持jwt的angular视频播放器

我正在尝试从Spring boot微服务到Angular前端应用程序,将视频分块流式传输。视频源由JWT保护,因此在发送视频请求时,需要将JWT令牌传递给该请求。

获取视频请求的示例:

GET http://localhost:8080/api/stream-service/video/${this.videoPath} 
with headers: Authorization: Bearer xxxx

下面是我试图实现这一目标的例子

import { AfterViewInit, Component, ElementRef, Inject, ViewChild } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { SomeResponse } from '../../models';
import { HttpClient } from '@angular/common/http';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-some-info-dialog',
  templateUrl: './some-dialog.component.html',
  styleUrls: ['./some-dialog.component.css']
})
export class SomeDialogComponent implements AfterViewInit {

  @ViewChild('videoPlayer') videoPlayer: ElementRef;
  readonly mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
  readonly some: SomeResponse;
  readonly someVideoUrl;

  constructor(private http: HttpClient,
              private dialogRef: MatDialogRef<SomeDialogComponent>,
              @Inject(MAT_DIALOG_DATA) data) {
    this.some = data.some;
    this.someVideoUrl = `http://localhost:8080/api/stream-service/video/${this.some.videoPath}`;
  }

  ngAfterViewInit(): void {
    if (
      'MediaSource' in window &&
      MediaSource.isTypeSupported(this.mimeCodec)
    ) {
      const mediaSource = new MediaSource();
      (this.videoPlayer.nativeElement as HTMLVideoElement).src = URL.createObjectURL(
        mediaSource
      );
      mediaSource.addEventListener('sourceopen', () =>
        this.sourceOpen(mediaSource)
      );
    } else {
      console.error('Unsupported MIME type or codec: ', this.mimeCodec);
    }
  }

  private sourceOpen(mediaSource): Subscription {
    const sourceBuffer = mediaSource.addSourceBuffer(this.mimeCodec);
    return this.http
      .get(this.someVideoUrl, { responseType: 'blob' })
      .subscribe(blob => {
        sourceBuffer.addEventListener('updateend', () => {
          mediaSource.endOfStream();
          this.videoPlayer.nativeElement.play();
        });
        blob.arrayBuffer().then(x => sourceBuffer.appendBuffer(x));
      });
  }

}

通过httpClient的每个请求都会被拦截,并在到达视频资源服务器之前添加JWT令牌。

<video style="width: 100%" controls #videoPlayer>
  Browser not supported
</video>
<h2> {{ some.name }}</h2>
<h3>Opis</h3>
<p> {{ some.description }}</p>
<p> {{ some.test1 }}</p>
<p> {{ some.test2 }}</p>

当我使用JWT不安全的端点时,下面的解决方案是有效的。有人知道如何从使用JWT令牌保护的流媒体API获取视频吗?