0

What is the correct way to serve .m3u8 files in C# using ASP.NET Core 6.0? I tried for the longest time to write up something in one of the controller files, but couldn't get anything to work.

I finally settled on this approach in the program.cs file of the project, which does give you the file if you paste the url:

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

However, when I get to the Angular side of things, I can't get the feed to display at all.

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

When I check the network tab, there are no calls being made to http://localhost:9900/live.m3u8.

I think the biggest problem is that I have no idea how to setup a livestream with C# and Angular. I've been research for days and following tutorials but most stuff I find is over 10 years old and doesn't work anymore or isn't specific to C# and/or Angular.

Keep in mind the code above is not the only code I've tried, it's just the closest I've gotten to something that works (most of my other code would just throw 500 errors or give a 200 status code with no data attached).

I can't tell which part I'm doing wrong: the backend in C#, the frontend in Angular, or both.

1
  • I think that'll work on a limited set of browsers... for all you'll need the server to serve mp4 file, or use a font-end library like this one: github.com/videojs/http-streaming
    – pcalkins
    Sep 12 at 21:46

1 Answer 1

0

I'm not familar with angular ,share a minimal example which I tried with a html file:

create a floder named of wwwroot,move your .m3u8 file together with .ts file into it:

enter image description here

Serve it as static file in 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)),
    
});

in html file:

<!-- 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>

Result: enter image description here

Also,since you are trying with angular frontend ,notice the CORS issue

Based on your comments,you may try:

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"),
    
});
2
  • I'm really happy to see an answer to this (I kind of assumed I wouldn't get any), but the problem is that I'm working an environment where I will not be able to move the m3u8 and .ts files. They're constantly being generated and regenerated by a physical camera with hardware that wouldn't appreciate me trying to move the files from it. I need a way to just read the files as is and serve them that way.
    – Deoxys_0
    Sep 13 at 15:17
  • Hi,@Deoxys_0,I've updated my answer,If you don't want to move your files wwwroot floder,just modify the path of your PhysicalFileProvider to your target floder,it would also work Sep 14 at 3:03

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.