{"id":16967830,"url":"https://github.com/foyzulkarim/ip-camera-browser-client","last_synced_at":"2026-03-16T05:36:02.985Z","repository":{"id":39601482,"uuid":"367248353","full_name":"foyzulkarim/ip-camera-browser-client","owner":"foyzulkarim","description":"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.","archived":false,"fork":false,"pushed_at":"2023-02-14T21:39:56.000Z","size":405,"stargazers_count":97,"open_issues_count":2,"forks_count":37,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-16T10:12:52.577Z","etag":null,"topics":["ffmpeg","hls","hls-live-streaming","ip-camera","m3u8","nodejs","reactjs","rtsp","stream","video-streaming"],"latest_commit_sha":null,"homepage":"https://dev.to/foyzulkarim/how-to-stream-your-ip-camera-into-browser-using-ffmpeg-node-and-react-162k","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/foyzulkarim.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-14T04:27:13.000Z","updated_at":"2025-03-04T08:26:37.000Z","dependencies_parsed_at":"2024-10-27T12:47:10.072Z","dependency_job_id":"96d628a2-230f-4288-b914-941a112bfd9a","html_url":"https://github.com/foyzulkarim/ip-camera-browser-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foyzulkarim%2Fip-camera-browser-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foyzulkarim%2Fip-camera-browser-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foyzulkarim%2Fip-camera-browser-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foyzulkarim%2Fip-camera-browser-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foyzulkarim","download_url":"https://codeload.github.com/foyzulkarim/ip-camera-browser-client/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244001635,"owners_count":20381805,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ffmpeg","hls","hls-live-streaming","ip-camera","m3u8","nodejs","reactjs","rtsp","stream","video-streaming"],"created_at":"2024-10-14T00:09:54.526Z","updated_at":"2026-03-16T05:35:57.938Z","avatar_url":"https://github.com/foyzulkarim.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# How to stream your IP Camera into browser\n\n## YouTube explanation and demo\n\n[![YouTube explanation](https://img.youtube.com/vi/Acmng0FHHqI/0.jpg)](https://www.youtube.com/watch?v=Acmng0FHHqI)\n\n# Steps\n\n## Stream IP Camera to VLC player\n- For the case of `TP-Link C200` model the URL I used = `rtsp://{username}:{password}@{ip}:554/stream1`\n- Input the URL in Network Stream\n\n![image](https://user-images.githubusercontent.com/497812/118369633-ac1ad300-b5d6-11eb-85a2-6367b4b929ca.png)\n\n\n## Convert stream to HLS\nExecute FFMPEG command\n\n`.\\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`\n\nAfter successful execution, we should see the converted video files (`index.m3u8 *.ts`)\n\n![image](https://user-images.githubusercontent.com/497812/118370441-4c262b80-b5da-11eb-97bb-4d5909f00b83.png)\n\n\n\n## Install the packages \n- Open new terminal tab\n- Go inside server folder\n- Run `npm install`\n\n## Cleanup streamed `.ts` files\n- Open new terminal tab\n- Go inside server folder\n- Run `.\\node_modules\\.bin\\nodemon .\\cleaner.js`\n- This will delete the streamed/served `.ts` files from local directory to save the space\n\n## Serve the auto generated hls (m3u8) file\n- Open new terminal tab\n- Go inside server folder\n- Run  `.\\node_modules\\.bin\\nodemon .\\hls-server.js`\n\n## Test hls file in browser\n- Visit [`cookpete.com/react-player`](https://cookpete.com/react-player).\n- Input the m3u8 url [http://localhost:4000/index.m3u8] and press `Load` \n![image](https://user-images.githubusercontent.com/497812/118370576-d2427200-b5da-11eb-83b1-dd49a0c5de43.png)\n\n\n## Run react client\n- Open new terminal tab\n- Go inside `client\\hls-client` folder\n- Run `npm install`\n- Run `npm start`\n\n![image](https://user-images.githubusercontent.com/497812/118370619-087ff180-b5db-11eb-94da-19ce190a87f6.png)\n\n\n# Notes\nIt 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. \n\nIf 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. \n\n### Next\n - Webcam streaming from browser camera to remote user\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoyzulkarim%2Fip-camera-browser-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoyzulkarim%2Fip-camera-browser-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoyzulkarim%2Fip-camera-browser-client/lists"}