81 строка
4.1 KiB
HTML
81 строка
4.1 KiB
HTML
<!doctype html>
|
|
<html lang="en-us">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
|
<title>Photo Capture using Webcam</title>
|
|
<meta name="og:title" content="Photo Capture">
|
|
<meta name="description" content="The test page demmonstartes how to use the Media Capture and Streams API to capture photos from webcam video streams through a canvas.">
|
|
<meta name="keywords" content="Media, webcam, media, capture, photo, canvas">
|
|
<meta name="author" content="shijuns">
|
|
<link rel="stylesheet" href="https://edgeportal.blob.core.windows.net/media/demotemplate.css">
|
|
<link rel="stylesheet" href="styles/demo.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- DEMO INTRO -->
|
|
<header class="section section--page-intro demo__header">
|
|
<div class="container">
|
|
<div class="section__header">
|
|
<h1>Photo Capture Using Webcam</h1>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section role="region" class="section">
|
|
<div class="container">
|
|
<div class="section__body">
|
|
<div class="section__body">
|
|
<div class="layout layout--equal">
|
|
<div class="module">
|
|
<p>This demo page shows how to use the <a href="http://w3c.github.io/mediacapture-main/" target="_blank">Media Capture and Streams API</a>
|
|
for capturing photos from webcam video streams through a canvas. There are three major steps:
|
|
</p>
|
|
<ol>
|
|
<li>Getting a video stream from the webcam and rendering it on a <video> element.</li>
|
|
<li>Taking a snapshot of the video and rendering it on a <canvas> element.</li>
|
|
<li>Converting the canvas image to an image data blob to allow saving.</li>
|
|
</ol>
|
|
</div>
|
|
<div class="module">
|
|
<h3 class="subtitle">Switching webcams</h3>
|
|
<p>When there are multiple webcam devices, you can switch the webcams when you are using a browser that supports the API for capture device enumeration and selection.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="subsection">
|
|
<div class="subsection__body">
|
|
<p id="error" class="alert--error"></p>
|
|
<button class="button" type="button" id="start" style="display:none">Start Demo</button>
|
|
<div class="demo-area" id="democontent" style="display:none">
|
|
<h3 class="subtitle view-text view-text--video">
|
|
<span>Webcam view</span>
|
|
<span id="videoViewText" class="view-text__instructions"></span>
|
|
</h3>
|
|
<div class="view--video">
|
|
<video tabindex="0" id="videoTag" src="" autoplay muted class="view--video__video"></video>
|
|
</div>
|
|
<h3 class="subtitle view-text view-text--snapshot">
|
|
<span>Snapshot view</span>
|
|
<span id="photoViewText" class="view-text__instructions"></span>
|
|
</h3>
|
|
<div class="view--snapshot">
|
|
<canvas id="canvasTag" class="view--snapshot__canvas"></canvas>
|
|
<a id="saveImg" class="hide" href="#"></a>
|
|
</div>
|
|
</div>
|
|
<p class="alert--error" class="hide" id="tooltip"></p>
|
|
<button class="button" type="button" disabled id="switch" style="display:none" autocomplete="off">Switch Camera</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script src="https://webrtc.github.io/adapter/adapter-0.2.3.js"></script>
|
|
<script src="scripts/demo.js"></script>
|
|
|
|
</body>
|
|
</html>
|