{"id":29354433,"url":"https://github.com/googlechromelabs/imagecapture-polyfill","last_synced_at":"2025-07-09T03:14:44.724Z","repository":{"id":57271970,"uuid":"71268274","full_name":"GoogleChromeLabs/imagecapture-polyfill","owner":"GoogleChromeLabs","description":"MediaStream ImageCapture polyfill. Take photos from the browser as easy as .takePhoto().then(processPhoto)","archived":false,"fork":false,"pushed_at":"2020-08-28T08:49:46.000Z","size":76,"stargazers_count":187,"open_issues_count":12,"forks_count":26,"subscribers_count":22,"default_branch":"master","last_synced_at":"2025-06-22T06:02:37.771Z","etag":null,"topics":["camera","getusermedia","imagecapture","polyfill","takephoto"],"latest_commit_sha":null,"homepage":"https://googlechromelabs.github.io/imagecapture-polyfill/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GoogleChromeLabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-18T16:26:34.000Z","updated_at":"2025-02-26T08:03:19.000Z","dependencies_parsed_at":"2022-08-25T06:43:03.745Z","dependency_job_id":null,"html_url":"https://github.com/GoogleChromeLabs/imagecapture-polyfill","commit_stats":null,"previous_names":["googlechrome/imagecapture-polyfill"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/GoogleChromeLabs/imagecapture-polyfill","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fimagecapture-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fimagecapture-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fimagecapture-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fimagecapture-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GoogleChromeLabs","download_url":"https://codeload.github.com/GoogleChromeLabs/imagecapture-polyfill/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GoogleChromeLabs%2Fimagecapture-polyfill/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264384459,"owners_count":23599619,"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":["camera","getusermedia","imagecapture","polyfill","takephoto"],"created_at":"2025-07-09T03:14:44.042Z","updated_at":"2025-07-09T03:14:44.714Z","avatar_url":"https://github.com/GoogleChromeLabs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ImageCapture polyfill\n\n[![Build Status](https://travis-ci.org/GoogleChromeLabs/imagecapture-polyfill.svg?branch=master)](https://travis-ci.org/GoogleChromeLabs/imagecapture-polyfill) [![Dependency Status](https://david-dm.org/GoogleChromeLabs/imagecapture-polyfill.svg)](https://david-dm.org/GoogleChromeLabs/imagecapture-polyfill) [![devDependency Status](https://david-dm.org/GoogleChromeLabs/imagecapture-polyfill/dev-status.svg)](https://david-dm.org/GoogleChromeLabs/imagecapture-polyfill#info=devDependencies)\n\nImageCapture is a polyfill for the [MediaStream Image Capture API](https://w3c.github.io/mediacapture-image/).\n\n## Status\n\nAs of June 2017, the ImageCapture spec is [relatively stable](https://github.com/w3c/mediacapture-image/issues). Chrome supports the API starting with M59 (earlier versions require setting a flag) and Firefox has partial support behind a flag. See the [ImageCapture browser support](https://github.com/w3c/mediacapture-image/blob/gh-pages/implementation-status.md) page for details.\n\n## Prior art\n\nPrior to this API, in order to take a still picture from the device camera, two approaches have been used:\n\n1. Set the source of a `\u003cvideo\u003e` element to a stream obtained via [`navigator[.mediaDevices].getUserMedia`](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), then use a 2D canvas context to [`drawImage`](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage) from that video. The `canvas` can return a URL to be used as the `src` attribute of an `\u003cimg\u003e` element, via [`.toDataURL('image/\u003cformat\u003e')`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL). ([1](http://www.html5rocks.com/en/tutorials/getusermedia/intro/#toc-screenshot), [2](https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos))\n2. Use the [HTML Media Capture API](https://w3c.github.io/html-media-capture/), i.e. ` \u003cinput type=\"file\" name=\"image\" accept=\"image/*\" capture\u003e`\n\n# Demo\n\n[The demo](https://dandv.github.io/imagecapture) currently shows grabFrame() and takePhoto().\n\n# Quick start\n\n```shell\nyarn add image-capture\n```\n\nOr, with npm:\n\n```shell\nnpm install --save image-capture\n```\n\nIn your JS code:\n\n```js\nlet videoDevice;\nlet canvas = document.getElementById('canvas');\nlet photo = document.getElementById('photo');\n\nnavigator.mediaDevices.getUserMedia({video: true}).then(gotMedia).catch(failedToGetMedia);\n\nfunction gotMedia(mediaStream) {\n  // Extract video track.\n  videoDevice = mediaStream.getVideoTracks()[0];\n  // Check if this device supports a picture mode...\n  let captureDevice = new ImageCapture(videoDevice);\n  if (captureDevice) {\n    captureDevice.takePhoto().then(processPhoto).catch(stopCamera);\n    captureDevice.grabFrame().then(processFrame).catch(stopCamera);\n  }\n}\n\nfunction processPhoto(blob) {\n  photo.src = window.URL.createObjectURL(blob);\n}\n\nfunction processFrame(imageBitmap) {\n  canvas.width = imageBitmap.width;\n  canvas.height = imageBitmap.height;\n  canvas.getContext('2d').drawImage(imageBitmap, 0, 0);\n}\n\nfunction stopCamera(error) {\n  console.error(error);\n  if (videoDevice) videoDevice.stop();  // turn off the camera\n}\n\nphoto.addEventListener('load', function () {\n  // After the image loads, discard the image object to release the memory\n  window.URL.revokeObjectURL(this.src);\n});\n```\n\n\n# Methods\n\nStart by constructing a new ImageCapture object:\n\n```js\nlet captureDevice;\n\nnavigator.mediaDevices.getUserMedia({video: true}).then(mediaStream =\u003e {\n  captureDevice = new ImageCapture(mediaStream.getVideoTracks()[0]);\n}).catch(...)\n```\n\nPlease consult [the spec](https://w3c.github.io/mediacapture-image/#methods) for full detail on the methods.\n \n## constructor(videoStreamTrack)\n\nTakes a video track and returns an ImageCapture object.\n\n\n## getPhotoCapabilities\n\nTBD\n\n## setOptions\n\nTBD\n\n## takePhoto\n\nCapture the video stream into a [Blob](https://www.w3.org/TR/FileAPI/#blob) containing a single still image.\n\nReturns a Promise that resolves to a Blob on success, or is rejected with `DOMException` on failure.\n\n```js\ncaptureDevice.takePhoto().then(blob =\u003e {\n  \n}).catch(error =\u003e ...);\n```\n\n\n## grabFrame\n\nGather data from the video stream into an [ImageBitmap](https://www.w3.org/TR/html51/webappapis.html#webappapis-images) object. The width and height of the ImageBitmap object are derived from the constraints of the video stream track passed to the constructor.\n\nReturns a Promise that resolves to an ImageBitmap on success, or is rejected with `DOMException` on failure.\n\n```js\ncaptureDevice.grabFrame().then(imageBitmap =\u003e {\n  \n}).catch(error =\u003e ...);\n```\n\n\n# Compatibility\n\nThe polyfill has been tested to work in current browsers:\n\n* Chrome 55+\n* Firefox 49+\n* Chrome 52+ for Android\n* Firefox 48+ for Android\n\nFor the widest compatibility, you can additionally load the [WebRTC adapter](https://github.com/webrtc/adapter). That will expand support to:\n\n* Chrome 53 \n\nFor older browsers that don't support navigator.getUserMedia, you can additionally load Addy Osmani's shim with optional fallback to Flash - [getUserMedia.js](https://github.com/addyosmani/getUserMedia.js/). Alternatively, the [getUserMedia](https://github.com/otalk/getUserMedia) wrapper normalizes error handling and gives an error-first API with cross-browser support.\n \n\n# Development\n \n## [yarn](https://yarnpkg.com/en/)\n\n```sh\nyarn\nyarn run dev\n```\n\n## npm\n\n```sh\nnpm install\nnpm run dev\n```\n\nTo [make your server accessible outside of `localhost`](https://www.npmjs.com/package/localtunnel), run npm/yarn `run lt`.\n \nBefore committing, make sure you pass yarn/npm `run lint` without errors, and run yarn/npm `run docs` to generate the demo.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fimagecapture-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgooglechromelabs%2Fimagecapture-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgooglechromelabs%2Fimagecapture-polyfill/lists"}