1.在PC端打開(kāi)攝像頭的方法：（移動(dòng)端不能使用）
能夠?qū)崿F(xiàn)打開(kāi)攝像頭并截圖
<!doctype html><html lang="en">
<head>
<title>GET VIDEO</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" title="開(kāi)啟攝像頭" value="開(kāi)啟攝像頭" 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"); //這里介紹新的方法，返回一個(gè) Promise對(duì)象
// 這個(gè)Promise對(duì)象返回成功后的回調(diào)函數(shù)帶一個(gè) MediaStream 對(duì)象作為其參數(shù)
// then()是Promise對(duì)象里的方法
// then()方法是異步執(zhí)行，當(dāng)then()前的方法執(zhí)行完后再執(zhí)行then()內(nèi)部的程序
// 避免數(shù)據(jù)沒(méi)有獲取到 let promise = navigator.mediaDevices.getUserMedia(constraints);
promise.then(function (MediaStream) {
video.srcObject = MediaStream;
video.play();
});
}
function takePhoto() { //獲得Canvas對(duì)象 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.在移動(dòng)端打開(kāi)攝像頭的方法：(在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標(biāo)簽, 去調(diào)用系統(tǒng)默認(rèn)相機(jī)，攝像，錄音功能，其實(shí)是有個(gè)capture屬性，直接說(shuō)明需要調(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)默認(rèn)的設(shè)備，比如：camera--照相機(jī)；camcorder--攝像機(jī)；microphone--錄音。
accept表示，直接打開(kāi)系統(tǒng)文件目錄。
以上就是“html如何調(diào)用攝像頭？”的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注木子天禾科技其它相關(guān)文章！
