Electron-audio-and-video-capturing
Electron-オーディオとビデオのキャプチャ
画面共有、音声メモなどのアプリを構築している場合、オーディオとビデオのキャプチャは重要な特性です。 また、プロファイル画像をキャプチャするアプリケーションが必要な場合にも便利です。
Electronでオーディオおよびビデオストリームをキャプチャするには、getUserMedia HTML5 APIを使用します。 次のように、 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 = new BrowserWindow({width: 800, height: 600})
win.loadURL(url.format({
pathname: path.join(__dirname, 'indexl'),
protocol: 'file:',
slashes: true
}))
}
app.on('ready', createWindow)
メインプロセスを設定したので、このコンテンツをキャプチャするHTMLファイルを作成しましょう。 次の内容で indexl と呼ばれるファイルを作成します-
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Audio and Video</title>
</head>
<body>
<video autoplay></video>
<script type = "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 Documentationをご覧になり、ウェブカメラから画像を取得して保存してください。 これは、HTML5 getUserMedia APIを使用して行われました。 Electronに付属の_desktopCapturer_モジュールを使用して、ユーザーのデスクトップをキャプチャすることもできます。 次に、画面ストリームを取得する方法の例を見てみましょう。
上記と同じmain.jsファイルを使用し、次の内容になるようにindexlファイルを編集します-
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ステートメント*に渡す名前に応じて、特定のアプリケーションまたは画面全体のイベントをキャプチャできます。 これにより、その画面で発生しているもののみがアプリにストリーミングされます。
https://stackoverflow.com/questions/36753288/saving-desktopcapturer-to-video-file-in-electron [このStackOverflowの質問]を参照して、使用方法を詳細に理解できます。