视频流在角度 10 中不起作用答案

【问题标题】：Video streaming not working in angular 10视频流在角度 10 中不起作用
【发布时间】：2021-07-16 17:06:15
【问题描述】：

我正在尝试以角度流式传输视频，但由于某种原因，它没有加载我在下面添加了代码

HTML

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

Ts 文件

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

服务器端 -Asp.net 核心

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

在调试时调用正在访问服务器。并从邮递员那里得到同样的回应。在邮递员中，我可以将响应保存为 mp4，然后播放视频。所以我认为我的角度代码有问题。任何人都可以提出这个问题，或者如果您有任何其他方式来流式传输视频也可以吗？

注意：我使用 Jwt 进行身份验证，所以我不能将 URL 放在 src 中只是为了测试我允许视频是匿名的谢谢。

【问题讨论】：

你解决了吗？
@Enis 是的，我能够解决它
你是怎么解决的？你能分享一下解决方案吗？我实际上将 Angular 13 与 .Net 5 一起使用，并尝试使用您的帖子中的媒体源实现视频流，但它不起作用。（由于 jwt 令牌，我必须使用媒体屏幕）。
Link 你可以在这里查看他们在答案中得到了一个工作演示。也请检查评论部分
是的，这是我正在关注的示例 (github.com/Guerric-P/Angular-MediaSource-demo/blob/master/src/…) 我在后端尝试使用“application /octet-stream”或“video/mp4”，如评论中所述。但没有成功。

标签： c# angular asp.net-core video-streaming angular10

【解决方案1】：

使用

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

代替

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

我认为它可以解决您的问题。

【讨论】：