html +JavaScript 实现camera调用摄像头系列

ALIM-MASTIK

已于 2023-12-22 02:49:06 修改

阅读量1.4k

点赞数 8

文章标签： html javascript 前端

于 2023-12-22 02:46:58 首次发布

本文链接：https://blog.csdn.net/qq_61865289/article/details/135143624

版权

# 纯启动摄像头：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用摄像头</title>
    <script>
        function accessCamera() {
            const video = document.getElementById("video");

            // 创建一个媒体流请求对象
            const constraints = {
                video: true,
                audio: false
            };

            // 使用getUserMedia方法访问摄像头
            navigator.mediaDevices.getUserMedia(constraints)
                .then(function(stream) {
                    // 将视频流赋值给video元素的src属性，以显示摄像头的视频
                    video.srcObject = stream;
                    video.onloadedmetadata = function(e) {
                        video.play();
                    };
                })
                .catch(function(error) {
                    console.error("访问摄像头失败：", error);
                });
        }

    </script>
</head>
<body>
<h1>使用摄像头</h1>
<button onclick="accessCamera()">访问摄像头</button>
<video id="video" width="50%" height="50%" autoplay></video>
</body>
</html>

启动摄像头并拍照保存本地：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用摄像头</title>
    <script>
        function accessCamera() {
            const video = document.getElementById("video");
            // 创建一个媒体流请求对象
            const constraints = { video: true, audio: false };
            // 使用getUserMedia方法访问摄像头
            navigator.mediaDevices.getUserMedia(constraints)
                .then(function(stream) {
                    // 将视频流赋值给video元素的src属性，以显示摄像头的视频
                    video.srcObject = stream;
                    video.onloadedmetadata = function(e) {
                        video.play();
                    };
                })
                .catch(function(error) {
                    console.error("访问摄像头失败：", error);
                });
        }

        function takePhoto() {
            const video = document.getElementById("video");
            // 使用canvas捕获图像数据
            const canvas = document.createElement("canvas");
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            const ctx = canvas.getContext("2d");
            ctx.drawImage(video, 0, 0);
            // 将图像数据保存为图片文件
            const dataUrl = canvas.toDataURL();
            saveAs(canvas.toDataURL(), "photo.jpg");
        }
        function saveAs(data, filename) {
            const link = document.createElement("a");
            link.href = data;
            link.download = filename;
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        }
    </script>
</head>
<body>
<h1>使用摄像头</h1>
<button onclick="accessCamera()">访问摄像头</button>
<button onclick="takePhoto()">拍照保存</button>
<video id="video" width="50%" height="50%" autoplay></video>
</body>
</html>

录制视频并保存：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Recorder</title>
</head>
<body>
<h1>Video Recorder</h1>
<div>
  <button id="startRecord">Start Recording</button>
  <button id="stopRecord" disabled>Stop Recording</button>
</div>
<div>
  <video id="videoPlayer" width="640" height="480" controls></video>
</div>

<script>
  let mediaRecorder;
  let recordedChunks = [];

  const startButton = document.getElementById('startRecord');
  const stopButton = document.getElementById('stopRecord');
  const videoPlayer = document.getElementById('videoPlayer');

  startButton.addEventListener('click', startRecording);
  stopButton.addEventListener('click', stopRecording);

  async function startRecording() {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
    mediaRecorder = new MediaRecorder(stream);

    mediaRecorder.ondataavailable = function(event) {
      if (event.data.size > 0) {
        recordedChunks.push(event.data);
      }
    };

    mediaRecorder.onstop = function() {
      const blob = new Blob(recordedChunks, { type: 'video/webm' });
      const url = URL.createObjectURL(blob);
      videoPlayer.src = url;
    };

    mediaRecorder.start();
    startButton.disabled = true;
    stopButton.disabled = false;
  }

  function stopRecording() {
    mediaRecorder.stop();
    startButton.disabled = false;
    stopButton.disabled = true;
  }
</script>
</body>
</html>

共享屏幕和录频并保存在本地：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Screen Recorder</title>
</head>
<body>
<h1>Screen Recorder</h1>
<div>
  <button id="startRecord">Start Recording</button>
  <button id="stopRecord" disabled>Stop Recording</button>
</div>
<div>
  <video id="videoPlayer" width="640" height="480" controls></video>
</div>
<div>
  <button id="saveVideo">Save Video</button>
</div>

<script>
  let mediaRecorder;
  let recordedChunks = [];

  const startButton = document.getElementById('startRecord');
  const stopButton = document.getElementById('stopRecord');
  const videoPlayer = document.getElementById('videoPlayer');
  const saveButton = document.getElementById('saveVideo');

  startButton.addEventListener('click', startRecording);
  stopButton.addEventListener('click', stopRecording);
  saveButton.addEventListener('click', saveVideo);

  async function startRecording() {
    const stream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
    mediaRecorder = new MediaRecorder(stream);

    mediaRecorder.ondataavailable = function(event) {
      if (event.data.size > 0) {
        recordedChunks.push(event.data);
      }
    };

    mediaRecorder.onstop = function() {
      const blob = new Blob(recordedChunks, { type: 'video/mp4' });
      const url = URL.createObjectURL(blob);
      videoPlayer.src = url;
    };

    mediaRecorder.start();
    startButton.disabled = true;
    stopButton.disabled = false;
  }

  function stopRecording() {
    mediaRecorder.stop();
    startButton.disabled = false;
    stopButton.disabled = true;
  }

  function saveVideo() {
    const blob = new Blob(recordedChunks, { type: 'video/mp4' });
    const url = URL.createObjectURL(blob);

    const a = document.createElement('a');
    a.href = url;
    a.download = 'screen_recording.mp4';

    const clickHandler = () => {
      setTimeout(() => {
        URL.revokeObjectURL(url);
        a.removeEventListener('click', clickHandler);
      }, 150);
    };

    a.addEventListener('click', clickHandler, false);
    a.click();
  }
</script>
</body>
</html>