Skip to content

Normally, IP Camera streams video as RTSP protocol. But browser is unable to render this format, so we need to convert it as HLS format so that modern browser's video tags can display it.

Notifications You must be signed in to change notification settings

foyzulkarim/ip-camera-browser-client

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

How to stream your IP Camera into browser

YouTube explanation and demo

YouTube explanation

Steps

Stream IP Camera to VLC player

  • For the case of TP-Link C200 model the URL I used = rtsp://{username}:{password}@{ip}:554/stream1
  • Input the URL in Network Stream

image

Convert stream to HLS

Execute FFMPEG command

.\server\libs\ffmpeg.exe -i rtsp://{username}:{password}@{ip}:554/stream1 -fflags flush_packets -max_delay 5 -flags -global_header -hls_time 5 -hls_list_size 3 -vcodec copy -y .\videos\ipcam\index.m3u8

After successful execution, we should see the converted video files (index.m3u8 *.ts)

image

Install the packages

  • Open new terminal tab
  • Go inside server folder
  • Run npm install

Cleanup streamed .ts files

  • Open new terminal tab
  • Go inside server folder
  • Run .\node_modules\.bin\nodemon .\cleaner.js
  • This will delete the streamed/served .ts files from local directory to save the space

Serve the auto generated hls (m3u8) file

  • Open new terminal tab
  • Go inside server folder
  • Run .\node_modules\.bin\nodemon .\hls-server.js

Test hls file in browser

Run react client

  • Open new terminal tab
  • Go inside client\hls-client folder
  • Run npm install
  • Run npm start

image

Notes

It is possible to automate all of the commands under simplified npm start command in server project. However, for better understanding of how things work and better clarity, I break down the steps and showed how easy it is to actually stream your IP Camera to your browser.

If you have real IP from your ISP, you can point your Domain to your IP and see the camera feed from anywhere in the world through the browser.

Next

  • Webcam streaming from browser camera to remote user

About

Normally, IP Camera streams video as RTSP protocol. But browser is unable to render this format, so we need to convert it as HLS format so that modern browser's video tags can display it.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published