Can't play m3u8 file using react-hls-player npm package - node.js

Question

I create a m3u8 file using ffmpeg, I need to play that file, for that i used a npm package called react-hls-player but it is not playing, what the mistake i make, below is my code
I used below code to create a m3u8 file using ffmpeg in nodejs
const ffmpeg = require('fluent-ffmpeg')
const ffmpegInstaller = require('#ffmpeg-installer/ffmpeg')
ffmpeg.setFfmpegPath(ffmpegInstaller.path)
ffmpeg('uploads/malayalam.mp4').addOptions([
'-c:a',
'aac',
'-ar',
'48000',
'-b:a',
'128k',
'-c:v',
'h264',
'-profile:v',
'main',
'-crf',
'20',
'-g',
'48',
'-keyint_min',
'48',
'-sc_threshold',
'0',
'-b:v',
'2500k',
'-maxrate',
'2675k',
'-bufsize',
'3750k',
'-hls_time',
'4',
'-hls_playlist_type',
'vod',
'-hls_segment_filename',
'uploads/video/720p_%03d.ts'
]).output('uploads/video/output.m3u8').on('end',(err,data)=>{
console.log(data)
console.log('end')
}).run()
below is the screenshot of my m3u8 file directory
I used react-hls-player to play the m3u8 file my nodejs server running on port:5000
below is the reactjs code
import React from 'react'
import ReactHlsPlayer from 'react-hls-player';
function M3u8_player() {
return (
<div className="userlist">
<ReactHlsPlayer
src="http://localhost:5000/uploads/video/output.m3u8"
autoPlay={false}
controls={true}
width="100%"
height="auto"
/>
</div>
)
}
export default M3u8_player
Here i cant play the m3u8 file someone please help me , is there any mistake i made creating m3u8 file

Answer 1

I think the problem that you need to pass an Authentication header within the hls player