如何使用 ASP.NET Core 6.0 在 C# 中提供 .m3u8 文件？ （带有 Angular 前端）

Question

使用 ASP.NET Core 6.0 在 C# 中提供 .m3u8 文件的正确方法是什么？我尝试了最长的时间在一个控制器文件中写一些东西，但无法让任何东西工作。

我最终在项目的program.cs文件中选择了这种方法，如果您粘贴网址，它确实会为您提供该文件：

app.MapGet("/live.m3u8", () =>
{
    string path = @"/data/videos/live/camera/live.m3u8";
    var filestream = System.IO.File.OpenRead(path);
    return Results.File(filestream, contentType: "application/x-mpegURL", fileDownloadName: "live.m3u8", enableRangeProcessing: true);
});

但是，当我到达 Angular 方面时，我根本无法显示提要。

<video width=600 height=300 controls autoplay>
      <source
         src="http://localhost:9900/live.m3u8"
         type="application/x-mpegURL">
</video>

当我检查网络选项卡时，没有呼叫

http://localhost:9900/live.m3u8

。

我认为最大的问题是我不知道如何使用 C# 和 Angular 设置直播。我已经研究了几天并遵循教程，但我发现的大多数东西都已经有 10 多年历史了，不再起作用或者不是特定于 C# 和/或 Angular。

请记住，上面的代码并不是我尝试过的唯一代码，它只是我所得到的最接近有效的代码（我的大多数其他代码只会抛出 500 个错误或给出 200 状态代码，没有附加任何数据） ).

我不知道哪一部分做错了：C# 的后端、Angular 的前端，或者两者都有。

Answer 1

我不熟悉 Angular，分享一个我尝试使用 html 文件的最小示例：

创建一个名为 wwwroot 的文件夹，将 .m3u8 文件和 .ts 文件一起移入其中：

将其作为program.cs中的静态文件：

var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".m3u8"] = "application/x-mpegURL";
provider.Mappings[".ts"] = "video/MP2T";

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider,
    FileProvider = new PhysicalFileProvider(Path.Combine(builder.Environment.WebRootPath)),
    
});

在 html 文件中：

<!-- Your view content starts here -->
<div class="container">
    
    <div>
        <video id="my-video" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360" data-setup='{}'>
            <source src="/Trucks for children kids. Construction game_ Crawler excavator.mp4/Trucks for children kids. Construction game_ Crawler excavator.m3u8" type="application/x-mpegURL">
            Your browser does not support the video tag.
        </video>
    </div>
</div>

<!-- Video.js JS and HLS plugin -->
<script src="https://vjs.zencdn.net/7.8.4/video.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/videojs-contrib-hls.js"></script>

<!-- Initialize Video.js -->
<script>
document.addEventListener('DOMContentLoaded', function () {
    var player = videojs('my-video');
    player.play();
});
</script>

结果：

另外，由于您正在尝试使用角度前端，请注意 CORS 问题

根据您的评论，您可以尝试：

var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".m3u8"] = "application/x-mpegURL";
provider.Mappings[".ts"] = "video/MP2T";

//for static files in wwwroot
app.UseStaticFiles();

//for files generated  by your camera
app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider,
    FileProvider = new PhysicalFileProvider(@"target path"),
    
});