{"id":20478664,"url":"https://github.com/do-me/js-camera-capture","last_synced_at":"2025-09-25T02:31:03.489Z","repository":{"id":192040663,"uuid":"685936100","full_name":"do-me/js-camera-capture","owner":"do-me","description":"Camera capture with getUserMedia() in vanilla JS for desktop and mobile browsers","archived":false,"fork":false,"pushed_at":"2023-09-18T13:04:19.000Z","size":78,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-15T15:45:55.588Z","etag":null,"topics":["blob","camera","getusermedia","image","js"],"latest_commit_sha":null,"homepage":"https://do-me.github.io/js-camera-capture/","language":"HTML","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/do-me.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-09-01T10:59:45.000Z","updated_at":"2024-06-25T11:35:36.000Z","dependencies_parsed_at":"2024-11-15T15:40:32.462Z","dependency_job_id":"e883cadb-1422-4810-8e7a-db3d58a8e943","html_url":"https://github.com/do-me/js-camera-capture","commit_stats":null,"previous_names":["do-me/js-camera-capture"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-me%2Fjs-camera-capture","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-me%2Fjs-camera-capture/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-me%2Fjs-camera-capture/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/do-me%2Fjs-camera-capture/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/do-me","download_url":"https://codeload.github.com/do-me/js-camera-capture/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234147196,"owners_count":18786898,"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":["blob","camera","getusermedia","image","js"],"created_at":"2024-11-15T15:38:38.412Z","updated_at":"2025-09-25T02:30:58.223Z","avatar_url":"https://github.com/do-me.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# JS-Camera-Capture\n\nVanilla JS camera capture example, working on desktop and mobile based on navigator.mediaDevices.getUserMedia().\n\nDesigned as a basic user interface example for taking a picture and sending it to some server, here the [ntfy](https://ntfy.sh/) channel: [https://ntfy.sh/js-camera-capture](https://ntfy.sh/js-camera-capture)\n\nThere are two versions.\n\n## 1) Modal Version \n**[Demo](https://do-me.github.io/js-camera-capture)**\n\nFor realistic use cases: `Activate Camera` opens a modal with the canvas. The buttons have some basic styling.\n\n![image](https://github.com/do-me/js-camera-capture/assets/47481567/b9d45501-5cc7-410c-9ee3-6ea2300e231d)\n\n![image](https://github.com/do-me/js-camera-capture/assets/47481567/e8d08ad0-c7b3-4ced-853f-c6d16828fa75)\n\nThere is another version with an additional text input option: **[with-text-input](https://do-me.github.io/js-camera-capture/with-text-input)**\n\n![image](https://github.com/do-me/js-camera-capture/assets/47481567/fbf61495-4e40-4b15-b978-3d91dda41b3d)\n\n## 2) Simple Version\n**[Demo](https://do-me.github.io/js-camera-capture/simple-version)**\n\nThis version displays the video stream canvas directly to the html body (which might be good for testing and simple stuff). Pretty much without CSS modifications.\n\n![image](https://github.com/do-me/js-camera-capture/assets/47481567/eb03dd4b-7458-4e99-accf-2a63a6030df0)\n\n## Options\n\nIf you'd like to activate the front camera on mobile as default (instead of the rear one) use the `facingMode: 'user'` instead of `facingMode: 'environment'`: \n\n```javascript\nstream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user' } });\n```\n\n## Collaboration\n\nPR's are very welcome, especially for enhancing the UI or adding more features. However, the codebase should be kept:\n- simple\n- small\n\nI used one html file only as it's easier to move around and download but I'm open for separating it properly in html, js, css.\nFeel free to create plugins or wrapper!\n\n## To Do\n- add camera switch for mobile phones\n- add logic when user rotates phone - the canvas currently doesn't follow the 90° rotation which leads to a weird UX\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdo-me%2Fjs-camera-capture","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdo-me%2Fjs-camera-capture","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdo-me%2Fjs-camera-capture/lists"}