我有安全的端点。我需要在来自 Angular 的 Http Get 请求的头部传递一个 jwt token 来流式传输视频。
dotnet 核心 Controller 中的端点如下所示(简化):
[Route("api/GetVideo/{videoId}")]
public async Task<IActionResult> GetVideoAsync(int videoId)
{
string videoFilePath = GiveMeTheVideoFilePath(videoId);
return this.PhysicalFile(videoFilePath, "application/octet-stream", enableRangeProcessing: true);
}
Angular 代码:video.component.html
<video width="100%" height="320" crossorigin="anonymous" controls #videoElement>
<source
[src]="'http://mydomain/api/GetVideo/1' | authVideo | async" type="application/octet-stream"
/>
</video>
video.pipe.ts @Pipe({
name: 'authVideo',
})
export class AuthVideoPipe implements PipeTransform {
constructor(private http: HttpClient, private auth: AuthTokenService) {}
transform(url: string) {
return new Observable<string>(observer => {
const token = this.auth.getToken(); //this line gets the jwt token
const headers = new HttpHeaders({ Authorization: `Bearer ${token}` });
const { next, error } = observer;
return this.http.get(url, { headers, responseType: 'blob' }).subscribe(response => {
const reader = new FileReader();
reader.readAsDataURL(response);
reader.onloadend = function() {
observer.next(reader.result as string);
};
});
});
}
}
它确实使用上述代码向端点发出 get 请求。一些东西返回到前端。但是视频没有播放。我从这个SO question找到了上面的方法.它适用于图像,但显然不适用于视频。我的想法是我可能需要在前端逐字节读取流。如果是这样,我该怎么做?我尝试在两端将“application/octet-stream”更改为“video/mp4”。但没有运气。
请注意,当我从后端删除安全代码并从 html 中删除 authVideo 管道时,它可以正常工作。请给我一些启示。谢谢!
最佳答案
虽然此解决方案适用于图像,因为所有数据都已加载 一次作为数据 URL,您不应该对视频执行此操作,因为它会禁用浏览器的流式传输功能。事实上,通过这样做,您正在加载整个视频 内存中在转换成数据URL之前,这在性能和用户体验方面确实很糟糕(需要在播放之前加载完整的视频,并且会导致大量内存消耗)。
您的问题的明显解决方案是使用 cookie 进行身份验证:
在下文中,我假设您由于某种原因不能这样做。
您可以使用 MediaSource .它允许您控制为检索视频而发送的实际请求(并添加
Authorization
header )。请注意,即使所有浏览器都广泛支持它,这也是实验性的。
您的代码应如下所示:
assetURL = 'http://mydomain/api/GetVideo/1';
// Modify this with the actual mime type and codec
mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
@ViewChild("videoElement") video: ElementRef;
ngAfterViewInit() {
if (
"MediaSource" in window &&
MediaSource.isTypeSupported(this.mimeCodec)
) {
const mediaSource = new MediaSource();
(this.video.nativeElement as HTMLVideoElement).src = URL.createObjectURL(
mediaSource
);
mediaSource.addEventListener("sourceopen", () =>
this.sourceOpen(mediaSource)
);
} else {
console.error("Unsupported MIME type or codec: ", this.mimeCodec);
}
}
sourceOpen(mediaSource) {
const sourceBuffer = mediaSource.addSourceBuffer(this.mimeCodec);
const token = this.auth.getToken(); //this line gets the jwt token
const headers = new HttpHeaders({ Authorization: `Bearer ${token}` });
return this.http
.get(this.assetURL, { headers, responseType: "blob" })
.subscribe(blob => {
sourceBuffer.addEventListener("updateend", () => {
mediaSource.endOfStream();
this.video.nativeElement.play();
});
blob.arrayBuffer().then(x => sourceBuffer.appendBuffer(x));
});
}
这个working demo给出以下结果:关于javascript - 使用 Angular 从安全端点流式传输视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63200611/