Goal

This is a collection of samples to demonstrate the Camera controls for the Web.

They are mostly used for ImageCapture/MediaStream and WebRTC APIs.

Try out the demos (Chrome 72+):

Sample Demo page

<table cellspacing="0" cellpadding="0" style="border-collapse: collapse; border: none;"> <tr> <td align="center" valign="center"> <img src="gifs/proCamera.gif" alt="proCamera.gif is not yet loaded" width="436"/> <br /> <b><a href="samples/camera/">Pro Camera</a></b> </td> <td align="center" valign="center"> <img src="gifs/filters.gif" alt="filters.gif is not yet loaded" width="428"/> <br /> <b><a href="samples/filters">Filters</a></b> </td> </tr> <tr> <td align="center" valign="center"> <img src="gifs/faceDetection.gif" alt="faceDetection.gif is not yet loaded" width="437"/> <br /> <b><a href="samples/faceDetection/">Face Detection</a></b> </td> <td align="center" valign="center"> <img src="gifs/funnyHats.gif" alt="funnyHats.gif is not yet loaded" width="440"/> <br /> <b><a href="samples/funnyHats/">Funny Hats</a></b> </td> </tr> <tr> <td align="center" valign="center"> <img src="gifs/cardScanning.gif" alt="cardScanning.gif is not yet loaded" width="360"/> <br /> <b><a href="samples/cardScanner/">Card Scanning</a></b> </td> <td align="center" valign="center"> <img src="gifs/docScanning.gif" alt="docScanning.gif is not yet loaded" width="360"/> <br /> <b><a href="samples/docScanner/">Document Scanning</a></b> </td> </tr> <tr> <td align="center" valign="center"> <img src="gifs/barcodeScanning.gif" alt="barcodeScanning.gif is not yet loaded" width="360"/> <br /> <b><a href="samples/barcodeScanner/">Barcode/QRcode Scanning</a></b> </td> <td align="center" valign="center"> <img src="gifs/hdr.gif" alt="hdr.gif is not yet loaded" width="376"/> <br /> <b><a href="samples/hdr/">HDR</a></b> </td> </tr> <tr> <td align="center" valign="center"> <img src="gifs/emotionRecognizer.gif" alt="emotionRecognizer.gif is not yet loaded" width="430"/> <br /> <b><a href="samples/emotionRecognizer/">Emotion Recognition</a></b> </td> <td align="center" valign="center"> <img src="gifs/invisibilityCloak.gif" alt="invisibilityCloak.gif is not yet loaded" width="430"/> <br /> <b><a href="samples/invisibilityCloak/">Harry Potter Invisibility Cloak</a></b> </td> </tr> </table>