title: Stream video from a secured endpoint using Angular
body: <p>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.</p>
  <p>The endpoint in a dotnet core controller looks like this (simplified):</p>
  <pre><code>[Route(&quot;api/GetVideo/{videoId}&quot;)]
  public async Task&lt;IActionResult&gt; GetVideoAsync(int videoId)
  {
      string videoFilePath = GiveMeTheVideoFilePath(videoId);  
  
      return this.PhysicalFile(videoFilePath, &quot;application/octet-stream&quot;, enableRangeProcessing: true);
  }
  </code></pre>
  <p>Angular code:
  <strong>video.component.html</strong></p>
  <pre><code>&lt;video width=&quot;100%&quot; height=&quot;320&quot; crossorigin=&quot;anonymous&quot; controls #videoElement&gt;
          &lt;source
              [src]=&quot;'http://mydomain/api/GetVideo/1' | authVideo | async&quot;  type=&quot;application/octet-stream&quot;
          /&gt;
  &lt;/video&gt;
  </code></pre>
  <p><strong>video.pipe.ts</strong></p>
  <pre><code>@Pipe({
      name: 'authVideo',
  })
  export class AuthVideoPipe implements PipeTransform {
      constructor(private http: HttpClient, private auth: AuthTokenService) {}
  
      transform(url: string) {
          return new Observable&lt;string&gt;(observer =&gt; {
              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 =&gt; {
                  const reader = new FileReader();
                  reader.readAsDataURL(response);
                  reader.onloadend = function() {
                      observer.next(reader.result as string);
                  };
              });
          });
      }
  }
  </code></pre>
  <p>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 <a href="https://stackoverflow.com/a/49115219/1978254">SO question</a>. 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?</p>
  <p>I have tried changing &quot;application/octet-stream&quot; to &quot;video/mp4&quot; on both ends. But no luck.</p>
  <p>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!</p>