js调取摄像头拍照
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拍照</title>
</head>
<body>
<button onclick="openMedia()" >开启摄像头</button>
<button onclick="takePhoto()" >拍照</button><br/><br/>
<video style="display: none;" class="src-video" width="300px" height="300px" autoplay="autoplay"></video>
<canvas id="canvas" width="300px" height="300px" style="display: none;"></canvas>
<img src="" alt="" class="photo">
</body>
<script>
let srcVideo = document.querySelector('video.src-video');
let mediaStream;
let photo=document.querySelector('img.photo');
// 开启摄像头
let openMedia = function () {
photo.src='';
srcVideo.style.display='block';
let constraints = {
audio: false, //音频轨道
video: {width:300,height:300} //视频轨道
}
let mediaPromise = navigator.mediaDevices.getUserMedia(constraints);
mediaPromise.then(function (stream) {
/* 使用这个stream stream */
mediaStream=stream;
srcVideo.srcObject = stream;
srcVideo.play();
}).catch(function (err) {
/* 处理error */
alert(err);
});
};
// 拍照
let takePhoto=function(){
let canvas = document.querySelector('#canvas');
//获取 `canvas`元素，根据`srcVideo`中的数据进行图片绘制 `ctx.drawImage()`；
let ctx = canvas.getContext('2d');
ctx.drawImage(srcVideo, 0, 0, 300, 300);
//将 `canvas`绘制的图片信息，展示在 `img`标签中；
photo.src=canvas.toDataURL();
console.log(photo.src);
// 方式1
// base64转blob
const blob = base64ToBlob(base64Data);
// blob转file
const file1 = blobToFile(blob, '文件名');
// 方式2
// base64转file
const file2 = base64ToFile(base64Data, '文件名');
closeMedia();
};
// 关闭摄像头
let closeMedia=function(){
mediaStream.getTracks().forEach(track => {
track.stop();
});
srcVideo.style.display='none';
};
function base64ToFile(base64Data, fileName) {
let arr = base64Data.split(','),
fileType = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
l = bstr.length,
u8Arr = new Uint8Array(l);
while (l--) {
u8Arr[l] = bstr.charCodeAt(l);
}
return new File([u8Arr], fileName, {type: fileType});
}
</script>
</html>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」