HTML5按键打开摄像头和拍照
HTML5实现按键打开摄像头和拍照
步骤：
1、创建一个打开摄像头按钮的标签、video标签、拍照的按钮标签、画布
2、实现打开摄像头的功能
3、实现拍照功能
具体实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>takePhoto</title>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded",function(){
var drawing = document.getElementById("drawing");
if(drawing.getContext)
{
context = drawing.getContext("2d");
}
var video = document.getElementById("video");
var med = {video:true};
var errBack = function(e)
{
alert("An error has occurred",e)
}
var onCamera = document.getElementById("onCamera");
var takePhoto = document.getElementById("takePhoto")
//实现通过按钮打开摄像头的功能
onCamera.addEventListener("click",function(){
f(navigator.mediaDevices && navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia(med).then(function(stream){
video.src = window.URL.createObjectURL(stream);
video.play();
})
console.log(navigator.mediaDevices.getUserMedia(med))
}
},false);
//实现将拍照功能
takePhoto.addEventListener("click",function(stream){
context.drawImage(video,0,0,640,480)
},false);
},false)
</script>
</head>
<body>
<button id="onCamera">打开摄像头</button>
<video id="video" width="640" height="480"></video>
<button id="takePhoto">拍照</button>
<canvas id="drawing" width="640" height="480">A drawing of something</canvas>
</body>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳，地球，月球 运作规律
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）