DEV Community

Cover image for How to implement HLS Video Streaming in a React App

How to implement HLS Video Streaming in a React App

Indranil Chutia on April 16, 2024

TL;DR: A tutorial to build a ReactJS app with HLS video streaming capabilities. Developed a Node.js and Express backend to convert videos to HLS f...
Collapse
 
abdallahbouhannache profile image
abdallah bouhannache

Nice ,work .one question if a server uses Hls and we want to hook the stream to some other player outside the browser
How can we get the stream since it just keeps cutting after playing the chunk if we set it in network stream in let say vlc
Thank you.

Collapse
 
indranilchutia profile image
Indranil Chutia

In my knowledge the player should also support HLS, In case of VLC it works for me. you have to enter the m3u8 file address

Collapse
 
leandro_nnz profile image
Leandro Nuñez

Great guide! Thanks for sharing!

Collapse
 
indranilchutia profile image
Indranil Chutia

glad you found it useful❤️

Collapse
 
phukon profile image
phukon

good one👍🏽👍🏽

Collapse
 
jrohatiner profile image
Judith

great post! very thorough and well explained.👍🏼

Collapse
 
darthclyn profile image
Harshit Saini

The only one stop guide for HLS Video Streaming in a react app on internet.

Collapse
 
indranilchutia profile image
Indranil Chutia

Appreciate it✨

Collapse
 
arshpreet07 profile image
Arshpreet07

Nice work dude keep it up! 👍

Collapse
 
kraken426 profile image
Ayush Srivastav

Great post Indranil. Really helped me with the concept of video streaming on react apps.

Collapse
 
indranilchutia profile image
Indranil Chutia

Thanks a lot!

Collapse
 
krakoss profile image
krakoss

great article

Collapse
 
fanatii profile image
Mandlenkosi

Absolutely great explanation.

Collapse
 
alerapchan profile image
Rapchan

Thanks!

Collapse
 
sethshines profile image
Rahul Seth

Great article.....