ضبط صدا و تصویر در الکترون – آموزش Electron

سه شنبه ۱۶ بهمن ۱۳۹۷
بازدید ۱,۶۱۹ نفر
AmRo
(10 امتیاز از 2 رای)
Loading...

تصویر electron-audio-and-video-capturing_5835 ضبط صدا و تصویر در الکترون - آموزش Electron

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

یکی از ویژگی های مهم در برنامه هایی که برای اشتراک گذاری صفحه نمایش، تماس تصویری، تماس صوتی و غیره استفاده می شوند، ضبط صدا و تصویر است. در الکترون به راحتی می توانید به وب کم، صدا و تصویر نمایشگر سیستمی که برنامه بر روی آن اجرا می شود، دسترسی داشته باشد. ما در این بخش از 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)

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>

<!DOCTYPE html>

<html>

<head>

<title>Audio and Video</title>

</head>

<body>

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>

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

تصویر electron-audio-and-video-capturing_5835_1 ضبط صدا و تصویر در الکترون - آموزش Electron

حال برنامه 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)
}