webrtc之二 getUserMedia和canvas

忘是亡心i 2022-02-05 01:09 349阅读 0赞

上一篇介绍了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服务）。

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

![2018111718160012.jpg][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70][]

[2018111718160012.jpg]: https://img-blog.csdnimg.cn/2018111718160012.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Jvd2VpMDI2_size_16_color_FFFFFF_t_70]: /images/20220205/9236b0aa8eae42d290b9d0d6e41acb11.png