Multiple streaming recording in media recorder


#1

Hello Everyone,

I creating a desktop app in electron with node js. I want to start webcam and screen capture stream together in the single frame and want to save.

is this possible in electron?

// Click Event
const recordWindow = () => {
mainVideoType=1;
cleanRecord()
ipcRenderer.send(‘show-picker’, { types: [‘window’] }) // screen capture

navigator.getUserMedia({ // start webcam
audio: false,
video: { mandatory: { minWidth: 50, minHeight: 50 } }
}, getMediaStream, getUserMediaError)
}

// start streaming function
const getMediaStream = (stream) => {

var video = document.querySelector(‘video’)
video.src = URL.createObjectURL(stream)
localStream = stream
//stream.onended = () => { console.log(‘Media stream ended.’) }

let videoTracks = localStream.getVideoTracks()

if (includeMic) {

console.log('Adding audio track.')
let audioTracks = microAudioStream.getAudioTracks()
localStream.addTrack(audioTracks[0])

}

if(smallVideoType==1)
{
    console.log('web cam added.')
   // recorder.ondataavailable=stream
   //recorder=stream
   //localStream.onaddtrack(stream)
  // recorder = new MediaRecorder(stream)
} 

try {

if(mainVideoType==1 )
{
    console.log('Start recording the stream.')
    recorder = new MediaRecorder(stream)
}

} catch (e) {
console.assert(false, 'Exception while creating MediaRecorder: ’ + e)
return
}

recorder.ondataavailable = recorderOnDataAvailable
// recorder.onstop = () => { console.log(‘recorderOnStop fired’) }
recorder.start()
console.log(‘Recorder is started.’)
}
// html


#2

You’ll want to format your code by highlighting it and pressing the </> button above the editor, so that people can read it.

If you have code that is compatible with Node and Chrome, it’s compatible with Electron.


#5
 <video id="mainVideo" controls class="video-js" data-setup='{}'></video> 
<button id="record-window"><i class="ti-layers" title="Record Window"></i></button>
        <button id="record-camera"><i class="ti-video-camera" title="Record Camera"></i></button>

#6
// This is a record-window click event

const recordWindow = () => {
    mainVideoType=1;
  cleanRecord()
  ipcRenderer.send('show-picker', { types: ['window'] }) // screen capture
}

ipcRenderer.on('get-sources', (event, options) => {
  desktopCapturer.getSources(options, (error, sources) => {
    if (error) throw error
    let sourcesList = document.querySelector('.capturer-list')
    for (let source of sources) {
      let thumb = source.thumbnail.toDataURL()
      if (!thumb) continue
      let title = source.name.slice(0, 20)
      let item = `<li><a href="#"><img src="${thumb}"><span>${title}</span></a></li>`
      sourcesList.appendChild(domify(item))
    }
    let links = sourcesList.querySelectorAll('a')
    for (let i = 0; i < links.length; ++i) {
      let closure = (i) => {
        return (e) => {
          e.preventDefault()
          ipcRenderer.send('source-id-selected', sources[i].id)
          sourcesList.innerHTML = ''
        }
      }
      links[i].onclick = closure(i)
    }
  })
})

#7
//This is a record webcam click event

const recordCamera = () => {
    smallVideoType=1;
  cleanRecord()
  navigator.getUserMedia({
    audio: false,
    video: { mandatory: { minWidth: 50, minHeight: 50 } }
  }, getMediaStream, getUserMediaError)
}

const getMediaStream = (stream) => {
  var video = document.querySelector('video')
  video.src = URL.createObjectURL(stream)
  localStream = stream
  stream.onended = () => { console.log('Media stream ended.') }

  let videoTracks = localStream.getVideoTracks()

  if (includeMic) {
    console.log('Adding audio track.')
    let audioTracks = microAudioStream.getAudioTracks()
    localStream.addTrack(audioTracks[0])
    
  }
  
  try {
    console.log('Start recording the stream.')
    recorder = new MediaRecorder(stream)
  } catch (e) {
    console.assert(false, 'Exception while creating MediaRecorder: ' + e)
    return
  }
  recorder.ondataavailable = recorderOnDataAvailable
  recorder.onstop = () => { console.log('recorderOnStop fired') }
  recorder.start()
  console.log('Recorder is started.')
}




Yes, my code is compatible with node, chrome, and electron, the code is working if screen recorder and webcam start one by one, I cant merge both and record screen sharing and webcam recording.

#8

Thanks in advance,
is there anyone who can help me out of this situation? because i am a new in electron api’s and node js.