Permalink
Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.
Sign up
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>WebRTC: Still photo capture demo</title> | |
| <meta charset='utf-8'> | |
| <link rel="stylesheet" href="main.css" type="text/css" media="all"> | |
| <script src="capture.js"> | |
| </script> | |
| </head> | |
| <body> | |
| <div class="contentarea"> | |
| <h1> | |
| MDN - WebRTC: Still photo capture demo | |
| </h1> | |
| <p> | |
| This example demonstrates how to set up a media stream using your built-in webcam, fetch an image from that stream, and create a PNG using that image. | |
| </p> | |
| <div class="camera"> | |
| <video id="video">Video stream not available.</video> | |
| <button id="startbutton">Take photo</button> | |
| </div> | |
| <canvas id="canvas"> | |
| </canvas> | |
| <div class="output"> | |
| <img id="photo" alt="The screen capture will appear in this box."> | |
| </div> | |
| <p> | |
| Visit our article <a href="https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos"> Taking still photos with WebRTC</a> to learn more about the technologies used here. | |
| </p> | |
| </div> | |
| </body> | |
| </html> |