0

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

enter image description here

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

6
  • some one please help me out this. Feb 25, 2022 at 5:09
  • Do you get any error in the console? Can you play the transcoded videon in VLC? Mar 4, 2022 at 7:26
  • i cant play in vlc Mar 4, 2022 at 7:31
  • Any error message from ffmpeg? Maybe add a console.log for the err variable at the 'end' event Mar 4, 2022 at 7:53
  • no ffmpeg not giving any error Mar 4, 2022 at 7:59

1 Answer 1

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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