Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Attempting to deliver an hls stream using express, works in browser but wont play in HLS player

Akonfan

New Coder
I am trying to make an express server that takes rtsp(am using ffmpeg) converted to hls/m3u8 and streams it upon request(so it can later be viewed on a client).I am still learning and am not too familiar, so any and all help is appreciated - if you have any resources that could help me in this endeavor or if you have a better way of doing this I would appreciate it.

When going to localhost:4000 in a browser it shows the ts file information as I believe it should, but when using an hls.js demo player it gives the error - "Error while loading fragment A network error occurred: fragLoadError". Checking in the dev tools for the browser it shows GET requests to url localhost:4000/cameras/cam1 as expected and the status comes back okay 200, but when it requests a ts file the url changes to localhost:4000/cameras/123.ts and the status comes back Not Found 404.

HLS PLAYER OUTPUT:

Loading http://localhost:4000/cameras/cam1

Loading manifest and attaching video element...

1 quality levels found

Manifest successfully loaded

Media element attached

Error while loading fragment http://localhost:4000/cameras/index133.ts

Error while loading fragment http://localhost:4000/cameras/index134.ts

Error while loading fragment http://localhost:4000/cameras/index135.ts


Here is my code, should start an express server on process.env.PORT, the /cameras routes are handles by cameras.js which should get an incoming request set the headers and read the index.m3u8 file which points to the location of ts files to stream video.

index.js
JavaScript:
const express = require("express");
const exec = require("child_process").exec;
const fs = require("fs");
const app = express();
const cors = require("cors")
const cameras = require("./routes/cameras")
require("dotenv").config();

app.use(cors());
app.use("/cameras", cameras);

app.get("/", (req,res) =\> {
console.log("New Request Incoming...", new Date());
})

app.listen(process.env.PORT, ()=\> {
console.log("server online at port: ", process.env.PORT);
});

cameras.js

JavaScript:
const express = require("express");
const router = express.Router();
const fs = require("fs");

const camOneStream = "./cameras/cam1/index.m3u8"

//Camera One Routes
router.get("/cam1", (req,res) => {

    console.log('Request Incoming for CAM1 from...', new Date());
    res.set('Access-Control-Allow-Origin', '*');
    res.set('Access-Control-Allow-Headers', 'Range');
    res.set('Access-Control-Expose-Headers', 'Content-Length, Content-Range');
    fs.readFile(camOneStream, (err, cont) => {
        if (err) {
            console.log(err);
            res.writeHead(500);
            res.end('Sorry, check with the site admin for error: ' + err.code + ' ..\n');
            res.end();
          
        }
        else {
            res.writeHead(200);
            res.end(cont, 'utf-8');
        }
    });
});
module.exports = router;

I was expecting the hls stream to be played on the hls player but the files could not be found resulting in fragment loading errors.

I have verified the hls files work. I have verified all the file paths. I included CORS headers manually. I removed firewall. I am not getting any errors on the server console. The hls files can be seen when going to the url in the browser, I believe all the .m3u8/.ts files are correct in pathing as they all can be played in vlc, CORS headers are included, so I am unsure of what I am doing wrong but I cannot get the url to play video in any hls player or vlc. Please Help..
 
Last edited:
It looks like the issue might be with the way you are serving the individual .ts files in your Express route for serving the HLS stream. The HLS player is attempting to load the individual .ts files and is getting a 404 error, which means that the server is not able to find the requested file.
 

Buy us a coffee!

Back
Top Bottom