{"id":13431830,"url":"https://github.com/131/h264-live-player","last_synced_at":"2025-05-15T16:04:56.588Z","repository":{"id":37359446,"uuid":"42823880","full_name":"131/h264-live-player","owner":"131","description":"A live h264 player for the browser (ideal for raspberrypi / raspicam )","archived":false,"fork":false,"pushed_at":"2021-03-06T03:25:35.000Z","size":13647,"stargazers_count":1093,"open_issues_count":34,"forks_count":250,"subscribers_count":65,"default_branch":"master","last_synced_at":"2025-05-13T10:17:49.448Z","etag":null,"topics":["broadway","canvas","h264","html5","raspberry-pi","raspicam","video"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/131.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-20T18:17:50.000Z","updated_at":"2025-05-09T09:19:54.000Z","dependencies_parsed_at":"2022-07-12T05:30:35.715Z","dependency_job_id":null,"html_url":"https://github.com/131/h264-live-player","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/131%2Fh264-live-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/131%2Fh264-live-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/131%2Fh264-live-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/131%2Fh264-live-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/131","download_url":"https://codeload.github.com/131/h264-live-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254374410,"owners_count":22060610,"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":["broadway","canvas","h264","html5","raspberry-pi","raspicam","video"],"created_at":"2024-07-31T02:01:06.291Z","updated_at":"2025-05-15T16:04:56.568Z","avatar_url":"https://github.com/131.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","html5","raspberry-pi"],"sub_categories":[],"readme":"# Motivation\r\n\r\nThis is a very simple h264 video player (that can run on live stream) for your browser.\r\nYou might use this with raspicam raw h264 stream.\r\nThis is a player around [Broadway](https://github.com/mbebenita/Broadway) Decoder, with very simple API.\r\nNAL unit (h264 frames) are split on the server side, transported using websocket, and sent to the decoded (with frame dropping, if necessary)\r\n\r\n[![Version](https://img.shields.io/npm/v/h264-live-player.svg)](https://www.npmjs.com/package/h264-live-player)\r\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](http://opensource.org/licenses/MIT)\r\n\r\n\r\n# History\r\n* I was targetting a real-time camera video feedback (no audio/surveillance cam) in the browser\r\n* There is no solution for \"real time\" mp4 video creation / playback (ffmpeg, mp4box.js, mp4parser - _boxing_ _takes_ _time_)\r\n* Media Source Extension is a dead end (mp4 boxing is far too hard to re-create on the client side)\r\n* [Broadway](https://github.com/mbebenita/Broadway) provide the crazy emscripten/asm build of a h264 decoder accelerated by webGL canvas\r\n* Here is all the glue we need, enjoy ;-)\r\n\r\n\r\n# Installation/demo\r\n```\r\ngit clone git@github.com:131/h264-live-player.git player\r\ncd player\r\nnpm install\r\n\r\nnode server-rpi.js    # run on a rpi for a webcam demo\r\nnode server-static.js # for sample video (static) file delivery\r\nnode server-tcp.js    # for a remote tcp (rpi video feed) sample\r\nnode server-ffmpeg    # usefull on win32 to debug the live feed (use ffmpeg \u0026 your directshow device / webcam) \r\n\r\n# browse to http://127.0.0.1:8080/ for a demo player\r\n\r\n```\r\n\r\n# Recommendations\r\n* Broadway h264 Decoder can only work with **h264 baseline profile**\r\n* [**Use a SANE birate**](https://www.dr-lex.be/info-stuff/videocalc.html)\r\n* Browserify FTW\r\n* Once you understand how to integrate the server-side, feel free to use [h264-live-player](https://www.npmjs.com/package/h264-live-player) npm package in your client side app (see vendor/)\r\n* Use [uws](https://github.com/uWebSockets/uWebSockets) (instead of ws) as websocket server\r\n\r\n\r\n# Credits\r\n* [131](mailto:131.js@cloudyks.org)\r\n* [Broadway](https://github.com/mbebenita/Broadway)\r\n* [urbenlegend/WebStreamer](https://github.com/urbenlegend/WebStreamer)\r\n\r\n\r\n# Keywords / shout box\r\nraspberry, mp4box, h264, nal, raspivid, mse, media source extension, iso, raspicam, bitrate, realtime, video, mp4, ffmpeg, websocket, ws, socket.io \"Let's have a beer and talk in Paris\"\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F131%2Fh264-live-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F131%2Fh264-live-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F131%2Fh264-live-player/lists"}