Add Image Capture API

[yellowdoge]

Someone linked whatwebcando.today and I found it grand, so took a first stab at adding the Image Capture support. Please take a look!

[NOtherDev]

Wow, that is great! I'll merge and deploy at the weekend.

[NOtherDev]

@miguelao I have a problem running your demo attached. Your https://github.com/Fyrd/caniuse/pull/2738 suggests it should work fine in my Firefox 46 - but it doesn't (at least on Mac) - I have ReferenceError: ImageCapture is not defined and I can't see any prefixed version. What's wrong?

[yellowdoge]

@NOtherDev I gave a go to Firefox and ouch! there's two things needed: apparently they never flipped the flag to enabled by default (needs to be done in about:config, dom.imagecapture.enabled is the name) and, takePhoto() is not Promise based yet, so the code of takePhoto() in the code pen should read:

function takePhoto() {
  var theImageCapturer = new ImageCapture(theStream.getVideoTracks()[0]);

  var theImageTag = document.getElementById("imageTag");
  if (!!window.chrome) {
    theImageCapturer.takePhoto().then((blob) => {
      theImageTag.src = URL.createObjectURL(blob);
    }).catch((err) => { alert('Error: ' + err); });
  } else {
    theImageCapturer.onphoto = function(blob) {
      theImageTag.src = URL.createObjectURL(blob.data);      
    } 
    theImageCapturer.takePhoto();
  }
}

(Also updated in https://codepen.io/miguelao/pen/ZOkOQw)

[NOtherDev]

I'm thinking how to handle that Pull Request and the feature described in the manner that will be consistent with my initial idea for the site, which was not to describe the Web APIs one by one directly, but approach it from the capabilities perspective and maybe target the native developers audience more this way. That's why there's no Service Worker page - it is mentioned in the appropriate Push Messages and Offline Mode pages, though. That's why Push also covers Apple's proprietary solution and Touch Gestures mentions Pointer Events, as from the developers point of view it's basically the same family of capabilities.

The ImageCapture API, at least the way I understand it, is an addition to the generic Media Capture API that allows more fine-grained control over how the images are taken. And as such I'd rather see it described as a part of Camera & Microphone section, with proper distinction in the CodePen demo and API Glimpse section. Maybe I should also introduce some kind of visual indicator for the capabilities index that the capability is only partially available, not to show the green tick just for getUserMedia without full ImageCapture support.

What do you think @miguelao?

[yellowdoge]

@NotherDev, I understand your point(s). Maybe you can keep the number of entries now, and add trailing icons, e.g. in the current case you could have the Camera and microphone section with the tick/cross and then icons for e.g. a) capturing and streams, b) taking pictures, c) recording media (MediaRecorder, this is another PR that I was preparing for later); icon greyed out meaning it's not available, WYDT? Essentially, introducing subcategories, so the landing page can keep its aspect.

Also, there should be an entry for webrtc, when the dust settles I can help with that.

[NOtherDev]

Yet another idea I'm having now when you've split the Camera-related capabilities so nicely, is to take all these features (incl. WebRTC which is a serious omission, agreed) and form a separate group. It will be cleaner in terms of UX than sub-features icons and will motivate me to put more content to align the groups again :)

[yellowdoge]

That's also possible. The WebAPIs there, just to enumerate, are capture video/audio (current one), image capture, media recording, output device selection, captureStream() from and <video/audio>, WebRTC peer connection and WebRTC data channel. (Note that WebRTC per se are just the last two). These are WebAPIs, so could be bundled up like you propose into larger, more developer friendly categories.

[NOtherDev]

OK, I've prepared a draft of new capabilities matrix (9 groups 4 entries each). There will be a group called by now "Camera & Microphone" with:

• Capturing & Streams (although I need to think about more catchy name here) - for getUserMedia
• Taking photos - for the current PR
• Recording media - for MediaRecorder
• Real-time (media?) communication - for WebRTC

I think that should be fine this way.

I'll merge your PR and proceed with filling the gaps soon.

[yellowdoge]

Any success? Can I help?

[NOtherDev]

See new_features branch - I've merged your PR there and added the placeholders for the new capabilities I want to describe, including these media-related you've proposed. If you are still interested in filling in the gaps about Media Recorder etc., I would really appreciate. If not, I will do it, but my spare time for this side-project is strictly limited and that will probably take few weeks.

You should be able to run the project locally using npm install && bower install && grunt serve. No live reload unfortunately.