1.在PC端打開攝像頭的方法：（移動端不能使用）
能夠實現(xiàn)打開攝像頭并截圖
<!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攝像頭區(qū)域 let video = document.getElementById("video"); //這里介紹新的方法，返回一個 Promise對象
// 這個Promise對象返回成功后的回調(diào)函數(shù)帶一個 MediaStream 對象作為其參數(shù)
// then()是Promise對象里的方法
// then()方法是異步執(zhí)行，當then()前的方法執(zhí)行完后再執(zhí)行then()內(nèi)部的程序
// 避免數(shù)據(jù)沒有獲取到 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標簽, 去調(diào)用系統(tǒng)默認相機，攝像，錄音功能，其實是有個capture屬性，直接說明需要調(diào)用什么功能
<input type="file" accept="image/*" capture="camera">
<input type="file" accept="video/*" capture="camcorder">
<input type="file" accept="audio/*" capture="microphone">
capture表示，可以捕獲到系統(tǒng)默認的設備，比如：camera--照相機；camcorder--攝像機；microphone--錄音。
accept表示，直接打開系統(tǒng)文件目錄。
以上就是“html如何調(diào)用攝像頭？”的詳細內(nèi)容，更多請關注木子天禾科技其它相關文章！
