1.在PC端打开摄像头的方法：（移动端不能使用）
能够实现打开摄像头并截图
<!doctype html><html lang="en">
<head>
<title>GET VIDEO</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia()" />
<video id="video" width="500px" height="500px" autoplay="autoplay"></video>
<canvas id="canvas" width="500px" height="500px"></canvas>
<button id="snap" onclick="takePhoto()">拍照</button>
<script>
function getMedia() {
let constraints = {
video: { 500, height: 500},
audio: true
}; //获得video摄像头区域 let video = document.getElementById("video"); //这里介绍新的方法，返回一个 Promise对象
// 这个Promise对象返回成功后的回调函数带一个 MediaStream 对象作为其参数
// then()是Promise对象里的方法
// then()方法是异步执行，当then()前的方法执行完后再执行then()内部的程序
// 避免数据没有获取到 let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
});
}
function takePhoto() { //获得Canvas对象 let video = document.getElementById("video");
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 500, 500);
}</script></body></html>2.在移动端打开摄像头的方法：(在PC端不能使用)
<input type=file id=browsefile accept="image/*" capture="camera" style="visibility:hidden" onchange=filepath.value=this.value> <input type=textfield id=filepath> <input type=button id=filebutton value="拍照" onclick="browsefile.click()">
使用input：file标签, 去调用系统默认相机，摄像，录音功能，其实是有个capture属性，直接说明需要调用什么功能
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
capture表示，可以捕获到系统默认的设备，比如：camera--照相机；camcorder--摄像机；microphone--录音。
accept表示，直接打开系统文件目录。
以上就是“html如何调用摄像头？”的详细内容，更多请关注木子天禾科技其它相关文章！
