Video streaming not working in angular 10

Question

I'm trying to stream a video in angular but for some reason, it's not loading I have added the code below

HTML

<div>
  <video controls #videoElement ></video>
</div>

Ts file

mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';// i have make sure the file is mp4 type only
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);
    return this.http
      .get(this.assetURL, { responseType: "blob" })
      .subscribe((blob) => {
        sourceBuffer.addEventListener("updateend", () => {
          mediaSource.endOfStream();
          this.video.nativeElement.play();
        });
        blob.arrayBuffer().then((x) => sourceBuffer.appendBuffer(x));
      });
  }

server-side -Asp.net core

  [HttpGet("ActivityVideo/{id:int}")]
    [AllowAnonymous]
    public IActionResult GetVideo(int id)
    {
        try
        {
            var video = _videoService.GetVideo(id);
           return PhysicalFile(video.Path, "application/octet-stream", enableRangeProcessing: true);
        }
        catch (Exception ex)
        {
          
        }
        return null;
    }

when debug the call is hitting the server. and getting the response same from the postman as well. in postman I can save the response as mp4 then the video is playing. so I think something is wrong with my angular code. can anyone please suggest the issue or if you have any other way to stream a video that will be fine too?

Note: I'm using Jwt to authenticate so I cant put the URL in src just for testing I'm allowing the video to be anonymous Thanks.

How did you solve that? Can you please share the solution? I use actually Angular 13 with .Net 5 and I try to implement the video streaming with media source like in your post, but it doesn´t work. (I have to use the media screen because of the jwt token). — Enis, Jan 15 '22 at 13:46
[Link](https://stackoverflow.com/questions/63200611/stream-video-from-a-secured-endpoint-using-angular) you can check here they got a working demo in the answer. Do check the comment section also — The one, Jan 15 '22 at 14:40
yes this is the example I was following (https://github.com/Guerric-P/Angular-MediaSource-demo/blob/master/src/app/hello.component.ts) I tried in backend with "application /octet-stream" or "video/mp4" as mentioned in comment. But without success. — Enis, Jan 15 '22 at 14:57
It was because of the video I used. I have now tested with the video from the example. It worked. My video works without any problems without Media Source integration. I still have to investigate what is exactly the problem and how to convert my mp4 videos to the correct format. — Enis, Jan 15 '22 at 15:46
@Enis I tested with video which is given in the example only. never implemented completely. that task is in hold :) if you are able to find out let know. you can use some C# converters may be — The one, Jan 16 '22 at 01:45
My video works without any problems without Media Source integration(Can please explain a bit more) — The one, Jan 16 '22 at 01:46

score 0 · Answer 1 · answered Apr 22 '21 at 15:04

0

Use

 <div>
     <video       loop />
 </div>

Instead of

<div>
  <video>  </video>
</div>

I think it resolves your issue.

answered Apr 22 '21 at 15:04

Pritom Sarkar

2,154
3
11
26

Video streaming not working in angular 10

1 Answers1