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

Posted 2023-04-12

【中文标题】视频流在角度 10 中不起作用

【英文标题】：Video streaming not working in angular 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”，如评论中所述。但没有成功。

【参考方案1】：

使用

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

代替

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

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