摄像头录制
main.js
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
<!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
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
<!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>
