调取摄像头拍照

Posted 2020-09-29 boyan

<div class="item" style="border:none;">
<span class="session-span">拍摄照片：</span>
<div class="photo">
<video id="video" width="200" height="150"></video>
<button type="button" id=‘tack‘>点击拍照</button>
<canvas id=‘canvas‘ width=‘200‘ height=‘150‘ style="display:none;"></canvas>
<img id=‘img‘ width=200 height=150 src="" style="display:none;" />
<input type="hidden" id="imgData" name="imgData">
</div>
</div>
<script>
var video = document.getElementById(‘video‘),
canvas = document.getElementById(‘canvas‘),
snap = document.getElementById(‘tack‘),
img = document.getElementById(‘img‘),
imgData = document.getElementById(‘imgData‘),
vendorUrl = window.URL || window.webkitURL;
//媒体对象
navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getMedia({
video : true, //使用摄像头对象
audio : false
//不适用音频
}, function(strem) {
video.src = vendorUrl.createObjectURL(strem);
video.play();
}, function(error) {
//error.code
alert(error.code);
});
snap.addEventListener(‘click‘, function() {
//绘制canvas图形
canvas.getContext(‘2d‘).drawImage(video, 0, 0, 200, 150);
//把canvas图像转为img图片
img.src = canvas.toDataURL("image/png");
imgData.value = canvas.toDataURL("image/png");
})
</script>