调取摄像头拍照

Posted boyan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了调取摄像头拍照相关的知识,希望对你有一定的参考价值。

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

以上是关于调取摄像头拍照的主要内容,如果未能解决你的问题,请参考以下文章

微信浏览器调取摄像头拍摄视频

求助关于java调用摄像头拍照怎样禁止虚拟摄像头拍照

h5调用摄像头拍照兼容性及原生实现拍照取景框

vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码

uni-app 小程序 前置摄像头

前端vue实现调取摄像功能实现视频上传(H5)