navigator.mediaDevices.getUserMedia录制桌面视频并保存

最新推荐文章于 2025-07-10 14:52:06 发布

置顶

letMeAlone_

最新推荐文章于 2025-07-10 14:52:06 发布

阅读量1.3w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： javascript electron 文章标签： audiocontext API

本文链接：https://blog.youkuaiyun.com/a250758092/article/details/84676803

本文介绍了如何使用navigator.mediaDevices.getUserMedia结合electron.desktopCapturer录制桌面视频，并通过AudioContext API混音实现同时录制桌面声音和麦克风声音。在录制过程中，由于桌面音轨默认不包含麦克风声音，需要使用AudioContext将两者混合后再添加到视频流中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果，需要同时录制麦克风声音以及桌面声音，请看最后

以下代码中有用到electron的desktopCapturer模块(用于PC应用开发)，如果你并不需要，可以直接忽略，直接定义你要录制的视频源和音频源。重点如果要录制桌面，audio约束必须为 false，否则会报错，暂时不支持audio，如果你需要录制桌面的声音，则必须设置audio约束
audio: {
mandatory: {
chromeMediaSource: ‘desktop’
}
}

import {
   
   
  desktopCapturer
} from 'electron'

import fs from 'fs';


/**
 *自动录屏模块*录制桌面
 *
 * @class Recorder
 */
class Recorder {
   
   

  constructor(path) {
   
   
    this.mediaOutputPath = path;
  }


  /**
   *开始录制
   *
   * @memberof Recorder
   */
  startRecord = () => {
   
   

    desktopCapturer.getSources({
   
   
      types: ['screen']
    }, (error, sources) => {
   
   
      if (error) {
   
   
        throw error;
      }
      /* 要获取桌面音频必须设置audio约束如下 */
      navigator.mediaDevices.getUserMedia({
   
   
        audio:  {
   
   
          mandatory: {
   
   
            chromeMediaSource: 'desktop'
          }
        },
        video:   {
   
   
          mandatory: {
   
   
            chromeMediaSource: 'desktop',
            maxWidth: window.screen.width,
            maxHeight: window.screen.height
            /*cursor:"never" */
            /*取消录制鼠标，以免鼠标闪烁，这个目前标准定义了各浏览器还没实现，
            如果需要请使用webrtc-adapter，使用最新API，
            视频录制被单独分离成getDisplayMedia，
            但是cursor约束条件是否有效暂时也不确定。没试过。*/
          }
        }  
      })