Electron：摄像头录制和屏幕录制

摄像头录制

main.js

javascript 复制代码

const { app, BrowserWindow} = require('electron')


let mainWin = null
const createWindow = () => {
  mainWin = new BrowserWindow({
    width: 800,
    height: 600,
    title: '自定义菜单',
    webPreferences: {
      // 允许渲染进程使用nodejs
      nodeIntegration: true,
      // 允许渲染进程使用nodejs
      contextIsolation: false,
    }
  })
  mainWin.loadFile('index.html')
  mainWin.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

index.html

javascript 复制代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
</head>

<body>
  <button id="openCamera">打开摄像头</button>
  <button id="start">开始录制</button>
  <button id="stop">停止录制</button>
  <button id="play">播放</button>

  <video src="" id="originVideo"></video>
  <video src="" id="playVideo" width="400" height="500"></video>

  <script>

    const openCamera = document.querySelector("#openCamera")
    const start = document.querySelector("#start")
    const stop = document.querySelector("#stop")
    const play = document.querySelector("#play")
    const originVideo = document.querySelector("#originVideo")
    const playVideo = document.querySelector("#playVideo")

    let stream;
    let blobData = []
    let recordInstance;

    openCamera.addEventListener("click", () => {
      handleOpenCamera()
    })

    start.addEventListener("click", () => {
      startRecord()
    })
    stop.addEventListener("click", () => {
      recordInstance && recordInstance.stop()
    })
    play.addEventListener("click", () => {
      const blob = new Blob(blobData, { type: 'video/mp4' })
      const videoUrl = URL.createObjectURL(blob)
      playVideo.src = videoUrl;
      playVideo.play()
    })

    // 打开摄像头
    const handleOpenCamera = async () => {
      stream = await navigator.mediaDevices.getUserMedia({
        video: {
          width: 400, height: 500
        },
        audio: true
      })
      console.log("handleOpenCamera stream", stream);
      originVideo.srcObject = stream
      originVideo.play()
    }

    //开始录制
    const startRecord = () => {
      recordInstance = new MediaRecorder(stream, { mimeType: 'video/webm' })
      console.log("startRecord stream", stream);
      if (recordInstance) {
        recordInstance.start()
        recordInstance.ondataavailable = function (e) {
          blobData.push(e.data)
        }
        recordInstance.onstop = function (e) {
          console.log("startRecord onstop");
        }
      }
    }

  </script>

</body>

</html>

屏幕录制

main.js

javascript 复制代码

const { app, BrowserWindow, desktopCapturer, session } = require('electron')


let mainWin = null
const createWindow = () => {
  mainWin = new BrowserWindow({
    width: 1000,
    height: 800,
    title: '自定义菜单',
    webPreferences: {
      // 允许渲染进程使用nodejs
      nodeIntegration: true,
      // 允许渲染进程使用nodejs
      contextIsolation: false,
    }
  })

  session.defaultSession.setDisplayMediaRequestHandler((request, callback) => {
    desktopCapturer.getSources({ types: ['screen'] }).then((sources) => {
      // Grant access to the first screen found.
      callback({ video: sources[0], audio: 'loopback' })
    })
  })

  mainWin.loadFile('index.html')
  mainWin.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

index.html

javascript 复制代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title></title>
</head>

<body>
  <button id="openCamera">打开摄像头</button>
  <button id="screenRecord">屏幕录制</button>
  <button id="start">开始录制</button>
  <button id="stop">停止录制</button>
  <button id="play">播放录制的视频</button>

  <video src="" id="originVideo"></video>
  <video src="" id="playVideo" width="400" height="500"></video>

  <script>

    const openCamera = document.querySelector("#openCamera")
    const screenRecord = document.querySelector("#screenRecord")
    const start = document.querySelector("#start")
    const stop = document.querySelector("#stop")
    const play = document.querySelector("#play")
    const originVideo = document.querySelector("#originVideo")
    const playVideo = document.querySelector("#playVideo")

    let stream;
    let blobData = []
    let recordInstance;

    // 打开摄像头
    openCamera.addEventListener("click", () => {
      handleOpenCamera()
    })

    // 屏幕录制
    screenRecord.addEventListener("click", () => {
      handleScreenRecord()
    })

    // 开始录制
    start.addEventListener("click", () => {
      startRecord()
    })

    // 停止录制
    stop.addEventListener("click", () => {
      recordInstance && recordInstance.stop()
    })

    // 播放录制的视频
    play.addEventListener("click", () => {
      const blob = new Blob(blobData, { type: 'video/mp4' })
      const videoUrl = URL.createObjectURL(blob)
      playVideo.src = videoUrl;
      playVideo.play()
    })

    // 打开摄像头
    const handleOpenCamera = async () => {
      stream = await navigator.mediaDevices.getUserMedia({
        video: {
          width: 400, height: 500
        },
        audio: true
      })
      console.log("handleOpenCamera stream", stream);
      originVideo.srcObject = stream
      originVideo.play()
    }

    // 屏幕录制
    const handleScreenRecord = async () => {
      stream = await navigator.mediaDevices.getDisplayMedia({
        video: {
          width: 400, height: 500
        },
        // video: true,
        audio: true
      })
      console.log("handlescreenRecord stream", stream);
      originVideo.srcObject = stream
      originVideo.play()
    }

    //开始录制
    const startRecord = () => {
      recordInstance = new MediaRecorder(stream, { mimeType: 'video/webm' })
      console.log("startRecord stream", stream);
      if (recordInstance) {
        recordInstance.start()
        recordInstance.ondataavailable = function (e) {
          blobData.push(e.data)
        }
        recordInstance.onstop = function (e) {
          console.log("startRecord onstop");
        }
      }
    }

  </script>

</body>

</html>