vue转移动端调取摄像头方法汇总

一. input

这种方式是文件录入的方式需要做二次操作，相当于上传文件，所以界面可能会有很多选择方式，摄像头不是唯一，如果我们想直接点击调取摄像头这种方式行不通

<input type="file" accept="video/*"/> // 摄像
<input type="file" accept="image/*"/> // 图片
<input type="file" accept="radio/*"/> // 音频

二. HTML5(Camera)

Camera模块管理设备的摄像头，可用于拍照、摄像操作，通过plus.camera获取摄像头管理对象。
这个方式可以点击直接调取摄像头
1.index.html

	document.addEventListener( "plusready", onPlusReady, false );
	function onPlusReady() {
		console.log("plusready");
	}

2.在调取的页面：

<template>
	<div class="home">
		<div class="page-header">
			拍摄
		</div>
		<div class="content">
			<button @click="captureImage">摄像</button>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'home',
		data() {
			return {
			}
		},
		components: {
		},
		created() { 
		},
		mounted() {
		},
		methods: {
			captureImage(){
				var cmr = plus.camera.getCamera();
				var res = cmr.supportedImageResolutions[0];
				var fmt = cmr.supportedImageFormats[0];
				console.log("Resolution: "+res+", Format: "+fmt);
				// 摄像
				// cmr.startVideoCapture( function( path ){
				// 		alert( "Capture video success: " + path );  
				// 	},
				// 	function( error ) {
				// 		alert( "Capture video failed: " + error.message );
				// 	},
				// 	{resolution:res,format:fmt}
				// );
				// 拍照
				cmr.captureImage( function( path ){
					alert( "Capture image success: " + path );
				},
				function( error ) {
					alert( "Capture image failed: " + error.message );
					},
					{resolution:res,format:fmt}
				);
			},
		}
	}
</script>