js调用摄像头录像

原创

已于 2023-04-10 11:50:10 修改 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

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

该代码示例展示如何利用HTML5和JavaScript的MediaRecorderAPI从用户摄像头捕获视频流并进行录制，当用户点击开始和停止按钮时，可以开始和结束录制。录制的视频片段会存储在recordedChunks数组中，并在停止录制后合并成一个Blob对象，显示在video元素上。

<!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">开始录制