阅读量:0
``HTML5 拍照示例
html，，，，，，Snap Photo，，，，var video = document.getElementById('video');，var canvas = document.getElementById('canvas');，var context = canvas.getContext('2d');，var snap = document.getElementById('snap');，，function init() {， navigator.mediaDevices.getUserMedia({video: true})， .then(function(stream) {， video.srcObject = stream;， video.play();， })， .catch(function(err) {， console.log("An error occurred: " + err);， });，}，，snap.addEventListener('click', function() {， context.drawImage(video, 0, 0, 640, 480);，});，，init();，，，，，``使用HTML5拍照示例代码
HTML5拍照功能简介
HTML5提供了一种方便的方法，使开发者能够在用户的浏览器中直接访问设备的摄像头，从而进行实时视频流的捕捉和拍照，通过使用<video>元素和MediaStream API，我们可以构建一个简单而强大的拍照应用。
基本HTML结构
我们需要创建一个基本的HTML页面，包含一个视频流显示区域、一个拍照按钮和一个图像显示区域。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF8"> <meta name="viewport" content="width=devicewidth, initialscale=1.0"> <title>HTML5 拍照示例</title> </head> <body> <h1>HTML5 拍照示例</h1> <video id="video" width="640" height="480" autoplay></video> <button id="snap">拍照</button> <canvas id="canvas" width="640" height="480"></canvas> </body> </html>
JavaScript实现拍照功能
我们使用JavaScript来实现拍照功能，主要步骤包括：获取媒体设备（摄像头）、启动视频流、处理拍照事件以及将照片显示在画布上。
document.addEventListener("DOMContentLoaded", function() { const video = document.getElementById('video'); const canvas = document.getElementById('canvas'); const snap = document.getElementById('snap'); const context = canvas.getContext('2d'); let stream; navigator.mediaDevices.getUserMedia({ video: true, audio: false }) .then(function(myStream) { stream = myStream; video.srcObject = stream; video.play(); }) .catch(function(err) { console.log("Something went wrong!", err); }); snap.addEventListener('click', function() { context.drawImage(video, 0, 0, 640, 480); }); video.addEventListener('canplay', function(ev){ if (!stream) { height = video.videoHeight / (video.videoWidth/250); jQuery(this).css("maxheight", height+"px"); } }, true); });关键步骤解析
1、获取媒体设备：使用navigator.mediaDevices.getUserMedia方法请求用户访问摄像头，该方法返回一个Promise对象，成功时会提供媒体流。
2、启动视频流：将获取到的媒体流设置为<video>元素的srcObject属性，并自动播放视频流。
3、处理拍照事件：为“拍照”按钮添加点击事件监听器，当用户点击按钮时，使用drawImage方法将当前视频帧绘制到画布上。
4、调整尺寸：通过监听canplay事件，动态调整视频的高度以保持宽高比。
FAQs
Q1: 拍照后如何保存图片？
A1: 可以通过创建一个链接元素（<a>），设置其href属性为画布的数据URL，并触发下载行为来保存图片。
snap.addEventListener('click', function() { context.drawImage(video, 0, 0, 640, 480); const link = document.createElement('a'); link.download = 'photo.png'; link.href = canvas.toDataURL('image/png'); link.click(); });Q2: 如何在不支持HTML5拍照功能的浏览器中提示用户？
A2: 可以使用Modernizr库来检测浏览器是否支持所需的API，如果不支持则显示提示信息或备用方案。
if (!Modernizr.getusermedia) { alert("您的浏览器不支持HTML5拍照功能，请升级到最新版本或更换浏览器。"); }通过上述步骤和代码示例，您可以轻松地在网页中实现HTML5拍照功能，并根据需要扩展更多功能。
```html
```
这段HTML5代码创建了一个简单的拍照示例，它使用`