后臺(tái)管理系統(tǒng)用到快遞單號(hào)拍照留存的功能，原需求是手機(jī)拍照再上傳乾蛤，使用效率過(guò)低每界，一線操作員不樂意用，因此倉(cāng)庫(kù)給統(tǒng)一配備攝像頭家卖，使用瀏覽器喚醒攝像頭功能進(jìn)行拍照上傳眨层，廢話不多說(shuō)，直接上代碼上荡。
<!-- 樣式部分可以忽略 -->
<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: 2px solid #000;
border-radius: 10px;
margin-left: 5px;
}
</style>
<!-- js -->
<script>
// 開啟攝像
document.getElementById('play').onclick = () => {
let constraints = {
// video屬性設(shè)置
video: {
width: 300,
height: 300
},
// audio屬性設(shè)置
audio: true
};
navigator.mediaDevices.getUserMedia(constraints).then(mediaStream => {
// 成功返回promise對(duì)象趴樱，接收一個(gè)mediaStream參數(shù)與video標(biāo)簽進(jìn)行對(duì)接
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>
<!-- html -->
<div>
<div id="play" class="btn">開啟攝像</div>
<div id="take" class="btn">拍照</div>
<video id="video"></video>
<!-- 盡量在canvas標(biāo)簽上設(shè)置寬高 -->
<canvas id="canvas" width="300px" height="300px"></canvas>
</div>
