安卓端微信浏览器摄像头问题

netvir 2018-11-30 08:00:20

在安卓微信中使用canvas绘制摄像头内容非常卡顿，这样就无法进一步提取摄像头内容做计算了。
以下为代码，如果在微信中访问，需要使用https



<html>

<head>

    <title>安卓端微信浏览器摄像头问题</title>

	<meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

</head>

<body>

<p>直接摄像头---不卡顿</p>

<video height="180px" autoplay ></video><hr />

<p>canvas绘制摄像头内容---很卡顿</p>

<canvas height="180px" ></canvas><hr />

<p>在安卓微信中使用canvas绘制摄像头内容非常卡顿，这样就无法进一步提取摄像头内容做计算了</p>

<script type="text/javascript">

    var video = document.querySelector('video');

    var canvas = document.querySelector('canvas');

    var context = canvas.getContext('2d');

/////////////////////////////////////

	navigator.mediaDevices.enumerateDevices().then(devices => {

		var camid = [];

		devices.filter(device => device.kind === 'videoinput').forEach(device => {

				camid.push(device.deviceId);

			});		

		navigator.mediaDevices.getUserMedia({

				video: {

				deviceId: camid[1],

				facingMode: 'environment'

				}

			}).then(stream =>{

				video.srcObject = stream;

				// 将视频帧绘制到Canvas对象上

				var tick = function() {	

					context.drawImage(video,0,0,video.videoWidth/video.videoHeight*180,180);

					//var imagedata = context.getImageData(0, 0,video.videoWidth/video.videoHeight*180,180);//进一步获取数据，未打开

					requestAnimationFrame(tick);

				}

				tick();	

			});

		});

	video.play();

</script>

</body>

</html>