ضبط صدا و تصویر در الکترون

یکی از ویژگی های مهم در برنامه هایی که برای اشتراک گذاری صفحه نمایش، تماس تصویری، تماس صوتی و غیره استفاده می شوند، ضبط صدا و تصویر است. در الکترون به راحتی می توانید به وب کم، صدا و تصویر نمایشگر سیستمی که برنامه بر روی آن اجرا می شود، دسترسی داشته باشد. ما در این بخش از getUserMedia که مربوط به API زبان HTML5 است برای دریافت stream های صوتی و تصویری استفاده خواهیم کرد.

یک فایل جدید با نام 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, 'index.html'),
      protocol: 'file:',
      slashes: true
   }))
}
app.on('ready', createWindow)

بعد از تنظیم فرآیند اصلی در فایل main.js، یک فایل HTML برای ضبط محتوا ایجاد می کنیم. یک فایل با نام index.html ایجاد کرده و محتوای زیر را در آن بنویسید:

<!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>

خروجی برنامه فوق:

حال برنامه Stream مربوط به دوربین و میکروفون را دریافت می کند. شما می توانید این Stream را در شبکه ارسال و یا در یک فرمت خاص ذخیره کنید.

علاوه بر وب کم، شما می توانید با استفاده از desktopCapturer صفحه دسکتاپ را نیز ضبط کنید. در ادامه با یک مثال نحوه استفاده از این API را آموزش می دهیم.

از همان فایل 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 می توانیم اطلاعاتی را در مورد هر پنجره باز شده در صفحه دسکتاپ بدست آوریم.

خروجی برنامه فوق: