{"action":"created","comment":{"url":"https://api.github.com/repos/google/WebFundamentals/pulls/comments/91116398","pull_request_review_id":11616145,"id":91116398,"diff_hunk":"@@ -0,0 +1,349 @@\n+project_path: /web/_project.yaml\n+book_path: /web/updates/_book.yaml\n+description: Image Capture is an API to control camera settings and take photos.\n+\n+{# wf_updated_on: 2016-12-05 #}\n+{# wf_published_on: 2016-12-05 #}\n+{# wf_tags: canvas,chrome56,media,webrtc #}\n+{# wf_featured_image: /web/updates/images/2016/12/imagecapture/featured.jpg #}\n+{# wf_featured_snippet: Image Capture is an API to control camera settings and take photos. #}\n+\n+<style>\n+#ic-demo .hidden {\n+display: none;\n+}\n+\n+#ic-demo button {\n+display: block;\n+float: left;\n+margin: 0 10px 20px 0;\n+width: 120px;\n+}\n+\n+#ic-demo button:last-of-type {\n+float: none;\n+margin: 0 0 20px 0;\n+}\n+\n+#ic-demo canvas {\n+display: block;\n+margin: 0 0 20px 0;\n+max-width: 100%;\n+}\n+\n+div#ic-demo {\n+border-top: 1px solid #eee;\n+margin: 20px 0 0 0;\n+padding: 20px 0 0 0;\n+}\n+\n+#ic-demo img {\n+display: block;\n+margin: 0 0 20px 0;\n+}\n+\n+#ic-demo input#zoom {\n+margin: 0 0 20px 0;\n+width: 100%;\n+}\n+\n+#ic-demo select {\n+margin: 0 0 20px 0;\n+}\n+\n+#ic-demo video {\n+margin: 0 0 20px 0;\n+vertical-align: top;\n+max-width: 100%;\n+}\n+\n+</style>\n+\n+# Take Photos & Control Camera Settings {: .page-title }\n+\n+{% include \"web/_shared/contributors/samdutton.html\" %}\n+\n+Image Capture is an API to capture still images and configure camera hardware\n+settings.\n+\n+The API enables control over camera features such as zoom, focus mode,\n+contrast, ISO and white balance. Best of all, Image Capture enables access to\n+the full camera resolution capabilities. Previous techniques\n+for taking photos on the Web have used snapshots from a video stream, which are\n+lower resolution than those available for still images.\n+\n+Image Capture is available in Chrome 56 on desktop and Android as an\n+[Origin Trial](https://github.com/jpchase/OriginTrials/blob/gh-pages/developer-guide.md),\n+or in Chrome Canary on desktop and Android with **Experimental Web Platform**\n+features enabled.\n+\n+The API has four methods:\n+\n+* `takePhoto()` returns a `Blob`, [the result of a single photographic exposure](https://www.w3.org/TR/image-capture/#dom-imagecapture-takephoto),\n+which can be downloaded, stored by the browser or displayed in an `img` element.\n+This method uses the highest available photographic camera resolution.\n+* `grabFrame()` returns an `ImageBitmap` object,\n+[a snapshot of live video](https://www.w3.org/TR/image-capture/#dom-imagecapture-grabframe),\n+which could (for example) be drawn on a canvas and then post-processed to\n+selectively change color values. Note that the `ImageBitmap` will only have the\n+resolution of the video source — which will be lower than the camera's\n+still-image capabilities.\n+* `getPhotoCapabilities()` returns a `PhotoCapabilities` object that provides\n+access to available camera options and their current values.\n+* `setOptions()` is used to configure\n+[camera settings](http://www.w3.org/TR/image-capture/#photosettings) such as\n+zoom, white balance or focus mode.\n+\n+The Image Capture API gets access to a camera via a `MediaStream` from `getUserMedia()`:\n+\n+    navigator.mediaDevices.getUserMedia({video: true})\n+      .then(gotMedia)\n+      .catch(error => console.error('getUserMedia() error:', error));\n+\n+    function gotMedia(mediaStream) {\n+      const mediaStreamTrack = mediaStream.getVideoTracks()[0];\n+      const imageCapture = new ImageCapture(mediaStreamTrack);\n+      console.log(imageCapture);\n+    }\n+\n+You can try out this code from the DevTools console.\n+\n+Note: To choose between different cameras, such as the front and back camera on\n+a phone, get a list of available devices via the\n+`MediaDevices.enumerateDevices()` method, then set `deviceId` in `getUserMedia()`\n+constraints — as per the demo [here](https://webrtc.github.io/samples/src/content/devices/input-output/).\n+\n+You can use `takePhoto()` to get a still image and then set it as the `src` of\n+an `<img>`:\n+\n+    imageCapture.takePhoto()\n+      .then(blob => {\n+        image.src = URL.createObjectURL(blob);\n+      })\n+      .catch(error => console.error('takePhoto() error:', error));\n+\n+Use `grabFrame()` to get data for a frame of video and then draw\n+it on a `<canvas>`:\n+\n+    imageCapture.grabFrame()\n+      .then(imageBitmap => {\n+        canvas.width = imageBitmap.width;\n+        canvas.height = imageBitmap.height;\n+        canvas.getContext('2d').drawImage(imageBitmap, 0, 0);\n+      })\n+      .catch(error => console.error('grabFrame() error:', error));\n+\n+You can try this out in the demo below — if you're using a browser that supports the Image Capture API:\n+\n+* The `<video>` displays a stream from a camera via `getUserMedia()`.\n+\n+* If you have more than one camera, you can select the video source.\n+\n+* Tap or click the **GRAB FRAME** button to draw a frame from the video on a\n+`<canvas>`.\n+\n+* Tap or click the **TAKE PHOTO** button to call `takePhoto()` and display the\n+result in an `<img>`.\n+\n+* If the camera you are using supports zoom, a zoom slider will be displayed.\n+\n+Several variables from the demo are available from the console:\n+\n+* **constraints**\n+* **imageCapture**\n+* **mediaStream**\n+\n+<div id=\"ic-demo\">\n+  <button id=\"grabFrame\">Grab Frame</button>\n+  <button id=\"takePhoto\">Take Photo</button>\n+  <div class=\"select\">\n+    <label for=\"videoSource\">Video source: </label><select id=\"videoSource\"></select>\n+  </div>\n+  <input class=\"hidden\" id=\"zoom\" type=\"range\" step=\"20\">\n+  <video autoplay class=\"hidden\"></video>\n+  <canvas class=\"hidden\"></canvas>\n+  <img class=\"hidden\">\n+</div>\n+\n+## Camera Capabilities\n+\n+In the demo above, you'll notice a difference in dimensions between the\n+`grabFrame()` and `takePhoto()` results.\n+\n+The `takePhoto()` method gives access to the camera's maximum resolution.\n+\n+`grabFrame()` just takes the next-available `VideoFrame` in the `MediaStream`\n+inside the renderer process, whereas `takePhoto()` interrupts the `MediaStream`,\n+reconfigures the camera, takes the photo (usually in a compressed format,\n+hence the `Blob`) and then resumes the `MediaStream`. In essence, this means","path":"src/content/en/updates/2016/12/imagecapture.md","position":178,"original_position":178,"commit_id":"8f48a4211915e9ba39a0c393fd75c43515de0abc","original_commit_id":"8f48a4211915e9ba39a0c393fd75c43515de0abc","user":{"login":"jpmedley","id":8204171,"avatar_url":"https://avatars.githubusercontent.com/u/8204171?v=3","gravatar_id":"","url":"https://api.github.com/users/jpmedley","html_url":"https://github.com/jpmedley","followers_url":"https://api.github.com/users/jpmedley/followers","following_url":"https://api.github.com/users/jpmedley/following{/other_user}","gists_url":"https://api.github.com/users/jpmedley/gists{/gist_id}","starred_url":"https://api.github.com/users/jpmedley/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jpmedley/subscriptions","organizations_url":"https://api.github.com/users/jpmedley/orgs","repos_url":"https://api.github.com/users/jpmedley/repos","events_url":"https://api.github.com/users/jpmedley/events{/privacy}","received_events_url":"https://api.github.com/users/jpmedley/received_events","type":"User","site_admin":false},"body":"Does this or can this cause any hiccup in the recorded video? You should probably answer that question either way.","created_at":"2016-12-06T16:34:23Z","updated_at":"2016-12-06T16:34:23Z","html_url":"https://github.com/google/WebFundamentals/pull/3907#discussion_r91116398","pull_request_url":"https://api.github.com/repos/google/WebFundamentals/pulls/3907","_links":{"self":{"href":"https://api.github.com/repos/google/WebFundamentals/pulls/comments/91116398"},"html":{"href":"https://github.com/google/WebFundamentals/pull/3907#discussion_r91116398"},"pull_request":{"href":"https://api.github.com/repos/google/WebFundamentals/pulls/3907"}}},"pull_request":{"url":"https://api.github.com/repos/google/WebFundamentals/pulls/3907","id":96323317,"html_url":"https://github.com/google/WebFundamentals/pull/3907","diff_url":"https://github.com/google/WebFundamentals/pull/3907.diff","patch_url":"https://github.com/google/WebFundamentals/pull/3907.patch","issue_url":"https://api.github.com/repos/google/WebFundamentals/issues/3907","number":3907,"state":"open","locked":false,"title":"Added ImageCapture WF Update article","user":{"login":"samdutton","id":205226,"avatar_url":"https://avatars.githubusercontent.com/u/205226?v=3","gravatar_id":"","url":"https://api.github.com/users/samdutton","html_url":"https://github.com/samdutton","followers_url":"https://api.github.com/users/samdutton/followers","following_url":"https://api.github.com/users/samdutton/following{/other_user}","gists_url":"https://api.github.com/users/samdutton/gists{/gist_id}","starred_url":"https://api.github.com/users/samdutton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samdutton/subscriptions","organizations_url":"https://api.github.com/users/samdutton/orgs","repos_url":"https://api.github.com/users/samdutton/repos","events_url":"https://api.github.com/users/samdutton/events{/privacy}","received_events_url":"https://api.github.com/users/samdutton/received_events","type":"User","site_admin":false},"body":"@PaulKinlan @petele @jpmedley @beaufortfrancois @miguelao  PTAL.\r\n","created_at":"2016-12-02T17:50:16Z","updated_at":"2016-12-06T16:42:12Z","closed_at":null,"merged_at":null,"merge_commit_sha":"a3628278be79b59a4751a8d99fc66f8fbb66ecfc","assignee":null,"assignees":[],"milestone":null,"commits_url":"https://api.github.com/repos/google/WebFundamentals/pulls/3907/commits","review_comments_url":"https://api.github.com/repos/google/WebFundamentals/pulls/3907/comments","review_comment_url":"https://api.github.com/repos/google/WebFundamentals/pulls/comments{/number}","comments_url":"https://api.github.com/repos/google/WebFundamentals/issues/3907/comments","statuses_url":"https://api.github.com/repos/google/WebFundamentals/statuses/8f48a4211915e9ba39a0c393fd75c43515de0abc","head":{"label":"samdutton:master","ref":"master","sha":"8f48a4211915e9ba39a0c393fd75c43515de0abc","user":{"login":"samdutton","id":205226,"avatar_url":"https://avatars.githubusercontent.com/u/205226?v=3","gravatar_id":"","url":"https://api.github.com/users/samdutton","html_url":"https://github.com/samdutton","followers_url":"https://api.github.com/users/samdutton/followers","following_url":"https://api.github.com/users/samdutton/following{/other_user}","gists_url":"https://api.github.com/users/samdutton/gists{/gist_id}","starred_url":"https://api.github.com/users/samdutton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samdutton/subscriptions","organizations_url":"https://api.github.com/users/samdutton/orgs","repos_url":"https://api.github.com/users/samdutton/repos","events_url":"https://api.github.com/users/samdutton/events{/privacy}","received_events_url":"https://api.github.com/users/samdutton/received_events","type":"User","site_admin":false},"repo":{"id":19378084,"name":"WebFundamentals","full_name":"samdutton/WebFundamentals","owner":{"login":"samdutton","id":205226,"avatar_url":"https://avatars.githubusercontent.com/u/205226?v=3","gravatar_id":"","url":"https://api.github.com/users/samdutton","html_url":"https://github.com/samdutton","followers_url":"https://api.github.com/users/samdutton/followers","following_url":"https://api.github.com/users/samdutton/following{/other_user}","gists_url":"https://api.github.com/users/samdutton/gists{/gist_id}","starred_url":"https://api.github.com/users/samdutton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/samdutton/subscriptions","organizations_url":"https://api.github.com/users/samdutton/orgs","repos_url":"https://api.github.com/users/samdutton/repos","events_url":"https://api.github.com/users/samdutton/events{/privacy}","received_events_url":"https://api.github.com/users/samdutton/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/samdutton/WebFundamentals","description":null,"fork":true,"url":"https://api.github.com/repos/samdutton/WebFundamentals","forks_url":"https://api.github.com/repos/samdutton/WebFundamentals/forks","keys_url":"https://api.github.com/repos/samdutton/WebFundamentals/keys{/key_id}","collaborators_url":"https://api.github.com/repos/samdutton/WebFundamentals/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/samdutton/WebFundamentals/teams","hooks_url":"https://api.github.com/repos/samdutton/WebFundamentals/hooks","issue_events_url":"https://api.github.com/repos/samdutton/WebFundamentals/issues/events{/number}","events_url":"https://api.github.com/repos/samdutton/WebFundamentals/events","assignees_url":"https://api.github.com/repos/samdutton/WebFundamentals/assignees{/user}","branches_url":"https://api.github.com/repos/samdutton/WebFundamentals/branches{/branch}","tags_url":"https://api.github.com/repos/samdutton/WebFundamentals/tags","blobs_url":"https://api.github.com/repos/samdutton/WebFundamentals/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/samdutton/WebFundamentals/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/samdutton/WebFundamentals/git/refs{/sha}","trees_url":"https://api.github.com/repos/samdutton/WebFundamentals/git/trees{/sha}","statuses_url":"https://api.github.com/repos/samdutton/WebFundamentals/statuses/{sha}","languages_url":"https://api.github.com/repos/samdutton/WebFundamentals/languages","stargazers_url":"https://api.github.com/repos/samdutton/WebFundamentals/stargazers","contributors_url":"https://api.github.com/repos/samdutton/WebFundamentals/contributors","subscribers_url":"https://api.github.com/repos/samdutton/WebFundamentals/subscribers","subscription_url":"https://api.github.com/repos/samdutton/WebFundamentals/subscription","commits_url":"https://api.github.com/repos/samdutton/WebFundamentals/commits{/sha}","git_commits_url":"https://api.github.com/repos/samdutton/WebFundamentals/git/commits{/sha}","comments_url":"https://api.github.com/repos/samdutton/WebFundamentals/comments{/number}","issue_comment_url":"https://api.github.com/repos/samdutton/WebFundamentals/issues/comments{/number}","contents_url":"https://api.github.com/repos/samdutton/WebFundamentals/contents/{+path}","compare_url":"https://api.github.com/repos/samdutton/WebFundamentals/compare/{base}...{head}","merges_url":"https://api.github.com/repos/samdutton/WebFundamentals/merges","archive_url":"https://api.github.com/repos/samdutton/WebFundamentals/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/samdutton/WebFundamentals/downloads","issues_url":"https://api.github.com/repos/samdutton/WebFundamentals/issues{/number}","pulls_url":"https://api.github.com/repos/samdutton/WebFundamentals/pulls{/number}","milestones_url":"https://api.github.com/repos/samdutton/WebFundamentals/milestones{/number}","notifications_url":"https://api.github.com/repos/samdutton/WebFundamentals/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/samdutton/WebFundamentals/labels{/name}","releases_url":"https://api.github.com/repos/samdutton/WebFundamentals/releases{/id}","deployments_url":"https://api.github.com/repos/samdutton/WebFundamentals/deployments","created_at":"2014-05-02T14:42:42Z","updated_at":"2016-01-12T18:12:47Z","pushed_at":"2016-12-06T15:08:15Z","git_url":"git://github.com/samdutton/WebFundamentals.git","ssh_url":"git@github.com:samdutton/WebFundamentals.git","clone_url":"https://github.com/samdutton/WebFundamentals.git","svn_url":"https://github.com/samdutton/WebFundamentals","homepage":"http://developers.google.com/web/fundamentals","size":1128659,"stargazers_count":0,"watchers_count":0,"language":"HTML","has_issues":false,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":2,"mirror_url":null,"open_issues_count":0,"forks":2,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"google:master","ref":"master","sha":"abf80e01efc049bdfc2aecbed9658e879a676b79","user":{"login":"google","id":1342004,"avatar_url":"https://avatars.githubusercontent.com/u/1342004?v=3","gravatar_id":"","url":"https://api.github.com/users/google","html_url":"https://github.com/google","followers_url":"https://api.github.com/users/google/followers","following_url":"https://api.github.com/users/google/following{/other_user}","gists_url":"https://api.github.com/users/google/gists{/gist_id}","starred_url":"https://api.github.com/users/google/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/google/subscriptions","organizations_url":"https://api.github.com/users/google/orgs","repos_url":"https://api.github.com/users/google/repos","events_url":"https://api.github.com/users/google/events{/privacy}","received_events_url":"https://api.github.com/users/google/received_events","type":"Organization","site_admin":false},"repo":{"id":19249835,"name":"WebFundamentals","full_name":"google/WebFundamentals","owner":{"login":"google","id":1342004,"avatar_url":"https://avatars.githubusercontent.com/u/1342004?v=3","gravatar_id":"","url":"https://api.github.com/users/google","html_url":"https://github.com/google","followers_url":"https://api.github.com/users/google/followers","following_url":"https://api.github.com/users/google/following{/other_user}","gists_url":"https://api.github.com/users/google/gists{/gist_id}","starred_url":"https://api.github.com/users/google/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/google/subscriptions","organizations_url":"https://api.github.com/users/google/orgs","repos_url":"https://api.github.com/users/google/repos","events_url":"https://api.github.com/users/google/events{/privacy}","received_events_url":"https://api.github.com/users/google/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/google/WebFundamentals","description":"Best practices for modern web development","fork":false,"url":"https://api.github.com/repos/google/WebFundamentals","forks_url":"https://api.github.com/repos/google/WebFundamentals/forks","keys_url":"https://api.github.com/repos/google/WebFundamentals/keys{/key_id}","collaborators_url":"https://api.github.com/repos/google/WebFundamentals/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/google/WebFundamentals/teams","hooks_url":"https://api.github.com/repos/google/WebFundamentals/hooks","issue_events_url":"https://api.github.com/repos/google/WebFundamentals/issues/events{/number}","events_url":"https://api.github.com/repos/google/WebFundamentals/events","assignees_url":"https://api.github.com/repos/google/WebFundamentals/assignees{/user}","branches_url":"https://api.github.com/repos/google/WebFundamentals/branches{/branch}","tags_url":"https://api.github.com/repos/google/WebFundamentals/tags","blobs_url":"https://api.github.com/repos/google/WebFundamentals/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/google/WebFundamentals/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/google/WebFundamentals/git/refs{/sha}","trees_url":"https://api.github.com/repos/google/WebFundamentals/git/trees{/sha}","statuses_url":"https://api.github.com/repos/google/WebFundamentals/statuses/{sha}","languages_url":"https://api.github.com/repos/google/WebFundamentals/languages","stargazers_url":"https://api.github.com/repos/google/WebFundamentals/stargazers","contributors_url":"https://api.github.com/repos/google/WebFundamentals/contributors","subscribers_url":"https://api.github.com/repos/google/WebFundamentals/subscribers","subscription_url":"https://api.github.com/repos/google/WebFundamentals/subscription","commits_url":"https://api.github.com/repos/google/WebFundamentals/commits{/sha}","git_commits_url":"https://api.github.com/repos/google/WebFundamentals/git/commits{/sha}","comments_url":"https://api.github.com/repos/google/WebFundamentals/comments{/number}","issue_comment_url":"https://api.github.com/repos/google/WebFundamentals/issues/comments{/number}","contents_url":"https://api.github.com/repos/google/WebFundamentals/contents/{+path}","compare_url":"https://api.github.com/repos/google/WebFundamentals/compare/{base}...{head}","merges_url":"https://api.github.com/repos/google/WebFundamentals/merges","archive_url":"https://api.github.com/repos/google/WebFundamentals/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/google/WebFundamentals/downloads","issues_url":"https://api.github.com/repos/google/WebFundamentals/issues{/number}","pulls_url":"https://api.github.com/repos/google/WebFundamentals/pulls{/number}","milestones_url":"https://api.github.com/repos/google/WebFundamentals/milestones{/number}","notifications_url":"https://api.github.com/repos/google/WebFundamentals/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/google/WebFundamentals/labels{/name}","releases_url":"https://api.github.com/repos/google/WebFundamentals/releases{/id}","deployments_url":"https://api.github.com/repos/google/WebFundamentals/deployments","created_at":"2014-04-28T18:45:45Z","updated_at":"2016-12-06T15:25:06Z","pushed_at":"2016-12-06T15:49:29Z","git_url":"git://github.com/google/WebFundamentals.git","ssh_url":"git@github.com:google/WebFundamentals.git","clone_url":"https://github.com/google/WebFundamentals.git","svn_url":"https://github.com/google/WebFundamentals","homepage":"https://developers.google.com/web/fundamentals","size":1186779,"stargazers_count":6780,"watchers_count":6780,"language":"HTML","has_issues":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":1282,"mirror_url":null,"open_issues_count":116,"forks":1282,"open_issues":116,"watchers":6780,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/google/WebFundamentals/pulls/3907"},"html":{"href":"https://github.com/google/WebFundamentals/pull/3907"},"issue":{"href":"https://api.github.com/repos/google/WebFundamentals/issues/3907"},"comments":{"href":"https://api.github.com/repos/google/WebFundamentals/issues/3907/comments"},"review_comments":{"href":"https://api.github.com/repos/google/WebFundamentals/pulls/3907/comments"},"review_comment":{"href":"https://api.github.com/repos/google/WebFundamentals/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/google/WebFundamentals/pulls/3907/commits"},"statuses":{"href":"https://api.github.com/repos/google/WebFundamentals/statuses/8f48a4211915e9ba39a0c393fd75c43515de0abc"}}}}
{"actor":{"display_login":"jpmedley"}}