1. 程式人生 > >調取攝像頭拍照

調取攝像頭拍照

end video hot mage inpu data 音頻 false one

<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>

調取攝像頭拍照