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.
TP-Link C200
model the URL I used = rtsp://{username}:{password}@{ip}:554/stream1
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
)
npm install
.ts
files.\node_modules\.bin\nodemon .\cleaner.js
.ts
files from local directory to save the space.\node_modules\.bin\nodemon .\hls-server.js
cookpete.com/react-player
.Load
client\hls-client
foldernpm install
npm start
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.