Electron -音频和视频捕获
如果您正在构建用于屏幕共享、语音备忘录等的应用程序，那么音频和视频捕捉是非常重要的特性。
我们将使用getUserMedia HTML5 API来用Electron捕获音频和视频流。
让我们如下先从总体上建立我们的main.js文件
const{app,BrowserWindow}=require('electron')
const url =require('url')
const path =require('path')
let win
// Set the path where recordings will be saved
app.setPath("userData", \_\_dirname +"/saved\_recordings")
function createWindow(){
win =newBrowserWindow({width:800, height:600})
win.loadURL(url.format({
pathname: path.join(\_\_dirname,'index.html'),
protocol:'file:',
slashes:true
}))
}
app.on('ready', createWindow)现在我们已经设置好了我们的主进程，让我们创建一个HTML文件来捕获这个内容。用下列内容创建一个名为index.html的文件。
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Audio and Video</title>
</head>
<body>
<videoautoplay></video>
<scripttype="text/javascript">
function errorCallback(e){
console.log('Error', e)
}
navigator.getUserMedia({video:true, audio:true},(localMediaStream)=>{
var video = document.querySelector('video')
video.src = window.URL.createObjectURL(localMediaStream)
video.onloadedmetadata =(e)=>{
// Ready to go. Do some stuff.
};
}, errorCallback)
</script>
</body>
</html>上面的程序将生成以下输出
你现在有了网络摄像头和麦克风的流。您可以通过网络发送这个流，或者以您喜欢的格式保存它。
查看用于捕获图像的MDN文档，以从您的网络摄像机获取图像并存储它们。这是使用HTML5 getUserMedia API完成的。您还可以使用带有电子的desktopCapturer模块捕获用户桌面。
现在让我们看一个如何获得屏幕流的示例。
使用上面相同的main.js文件，用以下内容编辑index.html文件
desktopCapturer.getSources({types:\['window','screen'\]},(error, sources)=>{
if(error)throw error
for(let i =0; i < sources.length;++i){
if(sources\[i\].name ==='Your Window Name here!'){
navigator.webkitGetUserMedia({
audio:false,
video:{
mandatory:{
chromeMediaSource:'desktop',
chromeMediaSourceId: sources\[i\].id,
minWidth:1280,
maxWidth:1280,
minHeight:720,
maxHeight:720
}
}
}, handleStream, handleError)
return
}
}
})
function handleStream (stream){
document.querySelector('video').src = URL.createObjectURL(stream)
}
function handleError (e){
console.log(e)我们使用desktopCapturer模块来获取关于每个打开窗口的信息。现在，您可以根据传递给上面if语句的名称捕获特定应用程序或整个屏幕的事件。这只将屏幕上发生的事情流到应用程序中。
本文翻译转载自www.tutorialspoint.com