ASP.NET Core 6.0(C#)提供.m3u8后Angular前端无法加载直播流

后端正确提供.m3u8的方式 #

你当前Program.cs写法的优化点 #

你现在的写法是可行的，但有几个细节要调整：

• 别硬编码路径，用IWebHostEnvironment拼接绝对路径，避免部署时出错：

app.MapGet("/live.m3u8", (IWebHostEnvironment env) =>
{
    string path = Path.Combine(env.ContentRootPath, "data", "videos", "live", "camera", "live.m3u8");
    if (!System.IO.File.Exists(path))
    {
        return Results.NotFound();
    }
    var filestream = System.IO.File.OpenRead(path);
    // 去掉fileDownloadName，避免触发下载弹窗
    return Results.File(filestream, contentType: "application/x-mpegURL", enableRangeProcessing: true);
});

• enableRangeProcessing必须设为true，HLS流需要分段加载，这是核心要求。

控制器写法（如果偏好控制器） #

之前控制器写法失效大概率是没处理范围请求或路径错误，试试这个：

[ApiController]
[Route("api/stream")]
public class StreamController : ControllerBase
{
    private readonly IWebHostEnvironment _env;

    public StreamController(IWebHostEnvironment env)
    {
        _env = env;
    }

    [HttpGet("live")]
    public IActionResult GetLiveStream()
    {
        string path = Path.Combine(_env.ContentRootPath, "data", "videos", "live", "camera", "live.m3u8");
        if (!System.IO.File.Exists(path))
        {
            return NotFound();
        }
        // 用FileShare.ReadWrite避免文件被直播推流进程占用
        var stream = new FileStream(path, FileMode.Open, FileAccess.Read, FileShare.ReadWrite);
        return File(stream, "application/x-mpegURL", enableRangeProcessing: true);
    }
}

前端Angular无法加载的关键问题 #

1. 原生video不支持HLS（除Safari外） #

Chrome、Firefox等桌面浏览器原生不识别.m3u8，必须用hls.js解析：

• 先安装依赖：

npm install hls.js

• 组件代码示例：

import { Component, ElementRef, ViewChild, OnInit } from '@angular/core';
import Hls from 'hls.js';

@Component({
  selector: 'app-stream-player',
  template: `
    <video #player width="600" height="300" controls autoplay muted></video>
  `
})
export class StreamPlayerComponent implements OnInit {
  @ViewChild('player') videoRef!: ElementRef<HTMLVideoElement>;

  ngOnInit(): void {
    const video = this.videoRef.nativeElement;
    const streamUrl = 'http://localhost:9900/live.m3u8';

    if (Hls.isSupported()) {
      const hls = new Hls();
      hls.loadSource(streamUrl);
      hls.attachMedia(video);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        video.play().catch(err => console.log('自动播放失败:', err));
      });
    } else if (video.canPlayType('application/x-mpegURL')) {
      // Safari原生支持HLS，直接赋值
      video.src = streamUrl;
      video.play().catch(err => console.log('自动播放失败:', err));
    }
  }
}

2. 跨域（CORS）是核心坑 #

Angular默认运行在4200端口，后端在9900端口，跨域请求会被浏览器拦截，必须在后端配置CORS：
在Program.cs中添加：

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAngular", policy =>
    {
        policy.WithOrigins("http://localhost:4200") // 你的Angular地址
              .AllowAnyHeader()
              .AllowAnyMethod();
    });
});

// 注意顺序：在UseRouting之后、UseAuthorization之前添加
app.UseRouting();
app.UseCors("AllowAngular");
app.UseAuthorization();

这很可能是你网络面板看不到请求的原因——浏览器直接拦截了跨域请求。

3. 自动播放被浏览器限制 #

现代浏览器要求autoplay必须满足「用户交互」或「静音播放」，所以给video标签加muted属性，或者做个播放按钮让用户点击触发播放。

排查步骤 #

1. 直接在浏览器地址栏访问http://localhost:9900/live.m3u8，确认后端能正常返回文件内容。
2. 打开浏览器控制台，查看是否有CORS错误或hls.js的报错信息。
3. 确认你的.m3u8是有效直播流——如果是静态文件只能播放一次；如果是实时直播，需确保有工具持续生成ts片段并更新.m3u8文件。

内容的提问来源于stack exchange，提问作者Deoxys_0