使用原生实现一个屏幕录制功和存储功能

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <!-- 控制按钮 -->
    <div>
      <button id="startCaptureScreenButton">开始捕获屏幕</button>
      <button id="stopCaptureScreenButton">停止捕获屏幕</button>

      <button id="startCaptureCameraButton">开始捕获摄像头和麦克风</button>
      <button id="stopCaptureCameraButton">停止捕获摄像头和麦克风</button>
    </div>

    <!-- 视频预览 -->
    <div>
      <video id="video" autoplay muted></video>
    </div>

    <script src="main.js"></script>
  </body>
</html>

// 媒体流对象, 用于存储从显示器、或摄像头、或麦克风，捕获到的媒体流
let stream
// 媒体录制对象, 用于对捕获到的 stream 媒体流进行录制
let recorder

// 捕获屏幕:开始
startCaptureScreenButton.addEventListener('click', async () => {
  stream = await navigator.mediaDevices.getDisplayMedia()
  video.srcObject = stream
  startRecord()
})

// 捕获屏幕:停止
stopCaptureScreenButton.addEventListener('click', () => {
  stream.getTracks().forEach(track => track.stop())
  video.srcObject = null
  stopRecord()
})

// 捕获摄像头和麦克风:开始
startCaptureCameraButton.addEventListener('click', async () => {
  stream = await navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true,
  })
  video.srcObject = stream
  startRecord()
})

// 捕获摄像头和麦克风:停止
stopCaptureCameraButton.addEventListener('click', () => {
  stream.getTracks().forEach(track => track.stop())
  video.srcObject = null
  stopRecord()
})

// 开始录制
function startRecord() {
  // 创建媒体录制对象, 并将媒体流对象作为参数传入
  recorder = new MediaRecorder(stream)
  const chunks = []

  // 当有可用数据时, 保存数据
  recorder.ondataavailable = (event) => {
    chunks.push(event.data)
  }

  // 当录制停止后, 保存文件
  recorder.onstop = () => {
    const blob = new Blob(chunks, { type: 'video/webm' })
    const url = URL.createObjectURL(blob)

    const a = document.createElement('a')
    a.href = url
    a.download = 'my-awesome-video.webm'
    document.body.append(a)
    a.click()
    a.remove()
    URL.revokeObjectURL(url)
  }

  // 开始录制
  recorder.start()
}

// 停止录制
function stopRecord() {
  recorder.stop()
}

实现视频音频录制和存储功能

使用原生实现一个屏幕录制功和存储功能

上面运用到了Media Capture and Streams API