获取浏览器摄像头 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Camera Capture</title>
  <style>
    #camera-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    video {
      width: 400px;
      height: 400px;
      background: black;
    }

    #images-container {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }

    canvas {
      border: 1px solid #ccc;
    }

    button {
      margin: 10px;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="camera-container">
    <video id="video" autoplay></video>

    <div>
      <button onclick="openCamera()">Open Camera</button>
      <button onclick="closeCamera()">Close Camera</button>
      <button onclick="takeScreenshot(false)">Take Screenshot (Original)</button>
      <button onclick="takeScreenshot(true)">Take Screenshot (Compressed)</button>
    </div>

    <div id="images-container"></div>
  </div>

  <script>
    let mediaStream = null;

    // 打开摄像头
    async function openCamera() {
      try {
        mediaStream = await navigator.mediaDevices.getUserMedia({
          audio: true,
          video: {
            width: { ideal: 1920 },
            height: { ideal: 1080 },
            facingMode: 'environment',
          },
        });

        const videoElement = document.getElementById('video');
        videoElement.srcObject = mediaStream;
        videoElement.play();
      } catch (error) {
        console.error('Error accessing camera:', error);
      }
    }

    // 关闭摄像头
    function closeCamera() {
      if (mediaStream) {
        const tracks = mediaStream.getTracks();
        tracks.forEach((track) => track.stop());
        document.getElementById('video').srcObject = null;
        mediaStream = null;
      }
    }

    // 截图并选择是否压缩
    function takeScreenshot(compress) {
      const videoElement = document.getElementById('video');
      const canvas = document.createElement('canvas');
      canvas.width = videoElement.videoWidth;
      canvas.height = videoElement.videoHeight;

      const context = canvas.getContext('2d');
      context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

      const imagesContainer = document.getElementById('images-container');
      imagesContainer.appendChild(canvas);

      canvas.toBlob((blob) => {
        if (compress) {
          const compressedCanvas = document.createElement('canvas');
          let customWidth = prompt("Enter custom width for compression (px):", videoElement.videoWidth);
          let customHeight = prompt("Enter custom height for compression (px):", videoElement.videoHeight);
          customWidth = parseInt(customWidth, 10) || videoElement.videoWidth;
          customHeight = parseInt(customHeight, 10) || videoElement.videoHeight;

          compressedCanvas.width = customWidth;
          compressedCanvas.height = customHeight;

          const compressedContext = compressedCanvas.getContext('2d');
          const img = new Image();

          img.onload = () => {
            compressedContext.drawImage(img, 0, 0, compressedCanvas.width, compressedCanvas.height);

            // 下载压缩图片
            compressedCanvas.toBlob((compressedBlob) => {
              const compressedLink = document.createElement('a');
              compressedLink.href = URL.createObjectURL(compressedBlob);
              compressedLink.download = 'compressed_screenshot.png';
              compressedLink.textContent = 'Download Compressed Screenshot';
              compressedLink.style.display = 'block';
              compressedLink.style.marginTop = '10px';
              imagesContainer.appendChild(compressedLink);
            }, 'image/png');
          };

          img.src = URL.createObjectURL(blob);
        } else {
          // 下载原始图片
          const originalLink = document.createElement('a');
          originalLink.href = URL.createObjectURL(blob);
          originalLink.download = 'screenshot.png';
          originalLink.textContent = 'Download Original Screenshot';
          originalLink.style.display = 'block';
          originalLink.style.marginTop = '10px';
          imagesContainer.appendChild(originalLink);
        }
      }, 'image/png');
    }
  </script>
</body>
</html>

 

posted @ 2024-12-12 15:55  unique-yb  阅读(29)  评论(0)    收藏  举报