<template>
<view>
<video id="video"></video>
</view>
</template>
摄像头显示在video标签上
var opts = {
audio: false,
video: true
}
navigator.mediaDevices.getUserMedia(opts).then((stream)=> {
video = document.querySelector('video');
video.srcObject = stream
video.play();
}).catch((err)=>{
console.log(err)
});
拍照 npm i html2canvas文章来源：https://www.toymoban.com/news/detail-852800.html
cxBackToBlank() {
uni.showLoading({});
html2canvas(document.querySelector('video'), {
backgroundColor: null,
useCORS: true
}).then(async (canvas) => {
let url = canvas.toDataURL('image/jpeg');
})
},
<style scoped>
#video {
position: absolute;
left: 100rpx;
top: 100rpx;
width: 1000rpx;
height: 1000rpx;
}
</style>
文章来源地址https://www.toymoban.com/news/detail-852800.html
到了这里，关于uni-app web端使用getUserMedia，摄像头拍照的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
