How to record webcam video and keep recording across multiple pages

user_10087117 0
Viewed 400

Currently I am trying to find a way to record video from the webcam using WebRTC and getUserMedia. I managed to capture a video for a given time but what I wanted to do was to start recording on the first page of the application and keep recording until the user presses a certain button after several pages. Here what happens is when user goes to another page the recording stops even if time is not up.

I am kind of new to front end development and using Node.js. Is there a way for me to use the webcam globally through the application?

Here is the code I used for simple recording in HTML:

navigator.mediaDevices.getUserMedia({
    video: true,
    audio: true
  }).then(async function(stream) {
    let recorder = RecordRTC(stream, {
        type: 'video'
    });
    recorder.startRecording();

    const sleep = m => new Promise(r => setTimeout(r, m));
    await sleep(10000);

    recorder.stopRecording(function() {
        let blob = recorder.getBlob();
        invokeSaveAsDialog(blob);
        var url = URL.createObjectURL(blob);
        document.querySelector("video").src = url;
    });
  });
webrtc html javascript
1 Answers

Not really, because recording is started by code running within a web page loaded into the browser. If that page is no longer loaded (because the user navigated their window to another page), then obviously that code must stop running. So you'd have to start a new recording session each time.

If you had a single-page application where the whole page was never refreshed, and content changes are loaded via AJAX, then you could implement it, but if your site has different pages, then it's hard to see how you would implement your requirement successfully.

user_59470430
Related