js调用摄像头录像

st紫月

已于 2023-04-10 11:50:10 修改

阅读量988

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端开发语言

于 2023-03-26 00:19:06 首次发布

本文链接：https://blog.csdn.net/ziyue13/article/details/129774668

版权

JavaScript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>摄像头录制视频</title>
    <style>
      video {
        width: 100%;
        max-width: 500px;
        height: auto;
      }
    </style>
  </head>
  <body>
    <h1>摄像头录制视频</h1>
    <video id="video" autoplay></video>
    <button id="startButton">开始录制</button>
    <button id="stopButton">停止录制</button>
	<video id="video1" autoplay></video>
	
	<script type="text/javascript">
		// 获取页面元素
const video = document.getElementById('video');
const video1 = document.getElementById('video1');
const startButton = document.getElementById('startButton');
const stopButton = document.getElementById('stopButton');
const downloadButton = document.querySelector("#download");
// 媒体设备约束
const constraints = {
  video: true,
  audio: false
};

// 定义全局变量
let mediaRecorder;
let recordedChunks = [];

// 获取摄像头流
navigator.mediaDevices.getUserMedia(constraints)
  .then(stream => {
    video.srcObject = stream;
    mediaRecorder = new MediaRecorder(stream);

    // 当开始录制时，将数据存储在recordedChunks数组中
    mediaRecorder.ondataavailable = event => {
      recordedChunks.push(event.data);
    };

    // 当录制完成时，将录制视频呈现在video元素中
    mediaRecorder.onstop = () => {
      const recordedBlob = new Blob(recordedChunks, { type: 'video/webm' });
      video1.src = URL.createObjectURL(recordedBlob);
      video1.controls = true;
    };
  })
  .catch(err => {
    console.error(`摄像头流获取失败: ${err}`);
  });

// 当点击“开始录制”按钮时，开始录制
startButton.addEventListener('click', () => {
  recordedChunks = [];
  mediaRecorder.start();
});

// 当点击“停止录制”按钮时，停止录制
stopButton.addEventListener('click', () => {
  mediaRecorder.stop();
});
	</script>
	
  </body>
</html>