Stream video from a secured endpoint using Angular

I have secured endpoint. I need to pass a jwt token in the head of a Http Get request from Angular to stream the video.

The endpoint in a dotnet core controller looks like this (simplified):

[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 code: 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);
                };
            });
        });
    }
}

It does make a get request to the endpoint with the above code. And something is returned to the front-end. But the video is not playing. I found the above way from this SO question. It works for images, but that doesn't work for video apparently. My thought is that I might need to read the streams byte by byte in the front-end. If so, how do I do that?

I have tried changing "application/octet-stream" to "video/mp4" on both ends. But no luck.

Note that when I removed security code from the back-end, and removed the authVideo pipe from the html it works perfectly. Please shed me some light. Thank you!

from Stream video from a secured endpoint using Angular