webrtc之二 getUserMedia和canvas

上一篇介绍了webrtc的getUserMedia，本文结合getUserMedia和canvas介绍浏览器调用摄像头实现拍照

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="WebRTC demo1">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <title>getUserMedia to canvas</title>
<style>
div#container {
    margin: 0 auto 0 auto;
    max-width: 60em;
    padding: 1em 1.5em 1.3em 1.5em;
}
video {
  background: #222;
  margin: 0 0 20px 0;
  --width: 100%;
  width: var(--width);
  height: calc(var(--width) * 0.75);
}
button {
  background-color: #d84a38;
  border: none;
  border-radius: 2px;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 0.8em;
  margin: 0 1em 1em 0;
  padding: 0.5em 0.7em 0.6em 0.7em;
}
canvas {
  background-color: #ccc;
  max-width: 100%;
  width: 100%;
}
</style>
</head>
<body>

<div id="container">
    <video playsinline autoplay></video>
    <button id="open">打开摄像头</button> <button id="takePhoto">拍照</button>
    <canvas></canvas>
	<div id="errorMsg"></div>
</div>

<script type="text/javascript">
const video = document.querySelector('video');
const canvas = window.canvas = document.querySelector('canvas');
canvas.width = 480;
canvas.height = 360;

const button = document.getElementById('takePhoto');
button.onclick = function() {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
};

const constraints = { audio: false, video: true };
function handleSuccess(stream) {
  window.stream = stream; // make stream available to browser console
  video.srcObject = stream;
}

function handleError(error) {
  if (error.name === 'ConstraintNotSatisfiedError') {
    let v = constraints.video;
    errorMsg(`The resolution ${v.width.exact}x${v.height.exact} px is not supported by your device.`);
  } else if (error.name === 'PermissionDeniedError' || error.name === 'NotAllowedError') {
    errorMsg('拒绝了授权访问该设备');
  } else {
    errorMsg(`getUserMedia error: ${error.name}`, error);
  }
}

function errorMsg(msg, error) {
  const errorElement = document.querySelector('#errorMsg');
  errorElement.innerHTML += `<p>${msg}</p>`;
  if (typeof error !== 'undefined') {
    console.error(error);
  }
}

async function init(e) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia(constraints);
    handleSuccess(stream);
    e.target.disabled = true;
  } catch (e) {
    handleError(e);
  }
}

document.querySelector('#open').addEventListener('click', e => init(e));
</script>
</body>
</html>

部署后通过浏览器访问，点击打开摄像头可以启动摄像头，点击允许后可以看到摄像头拍摄的画面，点击拍照可以将视频中的画面显示到canvas中，canvas中的内容可以转为base64码传给后台实现图片存储到服务器，也可以通过js实现图像的本地保存；部署到服务器后本文的例子也可以在手机正常访问（请注意需要提供https服务）。

本文内容到此结束，更多内容可关注公众号和个人微信号：

webrtc之二 getUserMedia和canvas

猜你喜欢