uni-app web端使用getUserMedia,摄像头拍照

html 复制代码
<template>
	<view>
		<video id="video"></video>
	</view>
</template>	

摄像头显示在video标签上

javascript 复制代码
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

复制代码
cxBackToBlank() {
	uni.showLoading({});
	html2canvas(document.querySelector('video'), {
		backgroundColor: null,
		useCORS: true
	}).then(async (canvas) => {
		let url = canvas.toDataURL('image/jpeg');
	})
},
css 复制代码
<style scoped>
	#video {
		position: absolute;
		left: 100rpx;
		top: 100rpx;
		width: 1000rpx;
		height: 1000rpx;
	}
</style>	


相关推荐
吴声子夜歌1 分钟前
ES6——异步操作和async函数详解
前端·ecmascript·es6
小小小米粒15 分钟前
生命周期 = Vue 实例从创建 → 挂载 → 更新 → 销毁的全过程钩子函数computed = 基于依赖缓存的计算属性
前端·javascript·vue.js
IT_陈寒24 分钟前
Vue的响应式更新把我坑惨了,原来是这个问题
前端·人工智能·后端
gyx_这个杀手不太冷静25 分钟前
大人工智能时代下前端界面全新开发模式的思考(一)
前端·人工智能·ai编程
冰暮流星26 分钟前
javascript之dom访问css
开发语言·javascript·css
Java小卷40 分钟前
FormKit源码二开 - 校验功能扩展
前端·低代码
xiaotao1311 小时前
第二十一章:CI/CD 最佳实践
前端·ci/cd·vite·前端打包
C澒1 小时前
IntelliPro 企业级产研协作平台:数据可视化全流程拆解
前端·数据可视化
蓝黑20201 小时前
Vue组件通信之slot
前端·javascript·vue
布局呆星1 小时前
Vue3+TS 笔记:Props 与 Emits 的正确打开方式
javascript·vue.js·笔记