Javascript/html -使用摄像头拍照，并将其作为输入type=“文件”处理。
Javascript/html -使用摄像头拍照，并将其作为输入type=“文件”处理。
提问于 2022-09-05 12:50:29
我有一些代码，我可以上传和图像，并运行一些面部识别如下
html
<body>
<input type="file" id="imageUpload">
</body>javascript
const imageUpload = document.getElementById('imageUpload')
Promise.all([
faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
faceapi.nets.ssdMobilenetv1.loadFromUri('/models')
]).then(start)
async function start() {
const container = document.createElement('div')
container.style.position = 'relative'
document.body.append(container)
const labeledFaceDescriptors = await loadLabeledImages()
const faceMatcher = new faceapi.FaceMatcher(labeledFaceDescriptors, 0.6)
let image
let canvas
document.body.append('Loaded')
imageUpload.addEventListener('change', async () => {
if (image) image.remove()
if (canvas) canvas.remove()
image = await faceapi.bufferToImage(imageUpload.files[0])
container.append(image)
canvas = faceapi.createCanvasFromMedia(image)
container.append(canvas)
const displaySize = { width: image.width, height: image.height }
faceapi.matchDimensions(canvas, displaySize)
const detections = await faceapi.detectAllFaces(image).withFaceLandmarks().withFaceDescriptors()
const resizedDetections = faceapi.resizeResults(detections, displaySize)
const results = resizedDetections.map(d => faceMatcher.findBestMatch(d.descriptor))
results.forEach((result, i) => {
const box = resizedDetections[i].detection.box
const drawBox = new faceapi.draw.DrawBox(box, { label: result.toString() })
drawBox.draw(canvas)
})
})
}我不想选择一个图片上传，而是与我的摄像头拍照。
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-09-05 15:54:14
您可以使用navigator.mediaDevices.getUserMedia API
访问凸轮和ImageCapture API以获取屏幕截图。
(您还可以使用<canvas> + <video>元素而不是ImageCapture)。
MDN链接：
https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture
在这里，您有一个代码处理程序来演示如何用它捕获屏幕截图：https://codepen.io/Xion14/pen/yLjyZRP
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73609667
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号