開啓前代碼準備
html一共需要：
- 倆按鈕（一個open攝像，一個拍照）
- 一個video（用於攝像顯示）
- 一個canvas（用於繪製圖片，就是拍照）
js一共需要：
- 一個constraints對象當參數，包括請求的媒體類型和相對應的參數，倆東西video和audio
- 一個navigator的接口：mediaDevices
- 調用mediaDevices的一個方法getUserMedia()，參數爲constraints，用完返回一個promise對象
- 成功就是用戶允許、並且有攝像頭，失敗就是不允許or沒有攝像
準備結束，代碼部分
下面全部代碼，拉走直接可以用（我說的是chrome、Firefox）
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 樣式部分可以忽略 -->
<style>
* {
padding: 0;
margin: 0;
}
div {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.btn {
width: 100px;
height: 50px;
border-radius: 10px;
background: #ff9900;
line-height: 50px;
text-align: center;
color: #fff;
box-shadow: 0 0 10px #999;
}
video, canvas {
width: 300px;
height: 300px;
border: 5px solid #000;
border-radius: 10px;
margin-left: 5px;
}
</style>
</head>
<body>
<div>
<div id="play" class="btn">開啓攝像</div>
<div id="take" class="btn">拍照</div>
<video id="video"></video>
<!-- 儘量在canvas標籤上設置寬高 -->
<canvas id="canvas" width="300px" height="300px"></canvas>
</div>
<script>
// 開啓攝像
document.getElementById('play').onclick = () => {
let constraints = {
// video屬性設置
video: {
width: 300,
height: 300
},
// audio屬性設置
audio: true
}
navigator.mediaDevices.getUserMedia(constraints)
.then(mediaStream => {
// 成功返回promise對象，接收一個mediaStream參數與video標籤進行對接
document.getElementById('video').srcObject = mediaStream
document.getElementById('video').play()
})
// 失敗就失敗了
}
// 拍照、canvas繪製
document.getElementById('take').onclick = () => {
let ctx = document.getElementById("canvas").getContext('2d')
ctx.drawImage(document.getElementById("video"), 0, 0, 300, 300)
}
</script>
</body>
</html>