{"id":13421990,"url":"https://github.com/xulihang/react-vision-camera","last_synced_at":"2025-05-13T04:38:09.315Z","repository":{"id":57711087,"uuid":"513058396","full_name":"xulihang/react-vision-camera","owner":"xulihang","description":"React Camera component","archived":false,"fork":false,"pushed_at":"2022-07-14T07:04:16.000Z","size":183,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-16T03:57:10.189Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/xulihang.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}},"created_at":"2022-07-12T08:22:30.000Z","updated_at":"2024-06-19T03:50:11.000Z","dependencies_parsed_at":"2022-09-26T21:21:48.185Z","dependency_job_id":null,"html_url":"https://github.com/xulihang/react-vision-camera","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xulihang%2Freact-vision-camera","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xulihang%2Freact-vision-camera/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xulihang%2Freact-vision-camera/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xulihang%2Freact-vision-camera/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xulihang","download_url":"https://codeload.github.com/xulihang/react-vision-camera/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253877363,"owners_count":21977634,"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":[],"created_at":"2024-07-30T23:00:35.037Z","updated_at":"2025-05-13T04:38:09.278Z","avatar_url":"https://github.com/xulihang.png","language":"TypeScript","funding_links":[],"categories":["UI Components"],"sub_categories":["Audio / Video"],"readme":"\r\n## React Vision Camera\r\n\r\nCamera component for React using `getUserMedia`. We can use this component for computer vision tasks like barcode scanning, text recognition, etc.\r\n\r\n[Online demo](https://shiny-naiad-b61af3.netlify.app/)\r\n\r\n### Installation\r\n\r\n```\r\nnpm install react-vision-camera\r\n```\r\n\r\n### Usage\r\n\r\n```jsx\r\n\r\nimport {VisionCamera} from 'react-vision-camera';\r\n\r\nfunction App() {\r\n  const [isActive,setIsActive] = React.useState(true); //whether the camera is active\r\n  const [isPause,setIsPause] = React.useState(false); //whether the video is paused\r\n  const onOpened = (cam:HTMLVideoElement,camLabel:string) =\u003e { // You can access the video element in the onOpened event\r\n    console.log(\"opened\"); \r\n  }\r\n\r\n  const onClosed = () =\u003e {\r\n    console.log(\"closed\");\r\n  }\r\n  \r\n  const onDeviceListLoaded = (devices:MediaDeviceInfo[]) =\u003e {\r\n    console.log(devices);\r\n  }\r\n  \r\n  return (\r\n    \u003cdiv\u003e\r\n      \u003cVisionCamera \r\n        isActive={isActive}\r\n        isPause={isPause}\r\n        desiredCamera=\"back\"\r\n        desiredResolution={{width:1280,height:720}}\r\n        onOpened={onOpened}\r\n        onClosed={onClosed}\r\n        onDeviceListLoaded={onDeviceListLoaded}\r\n      \u003e\r\n      \u003c/VisionCamera\u003e\r\n    \u003c/div\u003e\r\n  )\r\n}\r\n\r\n```\r\n\r\n### FAQ\r\n\r\nHow to specify which camera to use?\r\n\r\n1. Use the `desiredCamera` prop. If one of the camera's name contains it, then it will be used. You can get the devices list in the `onDeviceListLoaded` event.\r\n2. Use the `facingMode` prop. Set it to `environment` to use the back camera. Set it to `user` to use the front camera. Please note that this is not supported on Desktop.\r\n\r\nYou can use the two props together. `facingMode` has a higher priority.\r\n\r\n### License\r\n\r\nMIT","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxulihang%2Freact-vision-camera","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxulihang%2Freact-vision-camera","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxulihang%2Freact-vision-camera/lists"}