Потоковое видео с защищенной конечной точки с использованием Angular - PullRequest
Новая
       42

Потоковое видео с защищенной конечной точки с использованием Angular

0 голосов
/ 01 августа 2020

Я защищаю конечную точку. Мне нужно передать токен jwt в заголовке запроса Http Get от Angular для потоковой передачи видео.

Конечная точка в основном контроллере do tnet выглядит следующим образом (упрощенно): 

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

Он действительно делает запрос на получение к конечной точке с указанным выше кодом. И что-то возвращается во фронтенд. Но видео не воспроизводится. Я нашел указанный выше способ из этого SO вопроса . Это работает для изображений, но явно не работает для видео. Я думаю, что мне может потребоваться побайтно читать потоки во внешнем интерфейсе. Если да, то как мне это сделать?

Я пробовал изменить «application / octet-stream» на «video / mp4» на обоих концах. Но не повезло.

Обратите внимание, что когда я удалил код безопасности из серверной части и удалил канал authVideo из html, он работает отлично. Пожалуйста, пролей на меня немного света. Спасибо!

...