0

I am interested in building a web application, which will be served by nginx, and that will ask user access to their web camera, record for a given time period, maybe replay it to user, and store it in the server.

I am also thinking of a basic user interface. Could that be pure HTML+PHP?. Could that be python?

Similar questions here do not seem very relevant/helpful.

What would you suggest?

nullgeppetto
  • 539
  • 1
  • 8
  • 25

2 Answers2

3

You can use MediaRecorder to record video from webcam.

Record a video and save its data to recordedBlobs:

function handleDataAvailable(event) {
    if (event.data && event.data.size > 0) {
        recordedBlobs.push(event.data);
    }
}

function startRecording() {
    recordedBlobs = [];
    let options = { mimeType: 'video/webm;codecs=vp8' };
    let types = ['video/webm;codecs=vp9', 'video/webm\;codecs=h264', 'video/webm', 'video/mpeg', ''];

    for (let i in types) {
        try {
            if (MediaRecorder.isTypeSupported(types[i])) {
                options = { mimeType: types[i] };
                break;
            }
        }
        catch (e) {
            console.log('Exception while creating MediaRecorder: ${JSON.stringify(e)}');
        }
    }

    try {
        mediaRecorder = new MediaRecorder(window.stream, options);
    } catch (e) {
        console.error('Exception while creating MediaRecorder: ${JSON.stringify(e)}');
        return;
    }
    mediaRecorder.onstop = (event) => {
        console.log('Recorder stopped: ', event);
    };
    mediaRecorder.ondataavailable = handleDataAvailable;
    mediaRecorder.start(10); // collect 10ms of data
}

function stopRecording() {
    mediaRecorder.stop();
}

Upload the video data to your action page:

function upload() {
    const blob = new Blob(recordedBlobs, { type: 'video/webm' });
    var formData = new FormData();
    formData.append("video", blob, fileName + ".webm");

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "upload.aspx");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {

            } 
        }
    };
    xhr.onerror = function () {
        alert(`Network Error`);
    };
    xhr.send(formData);
}

You can implement the action page in any programming language, PHP, Java, Python, or C#.

yushulx
  • 11,695
  • 8
  • 37
  • 64
  • Thanks for your answer. But could you please add a minimal example of using this code in HTML? You see, I'm absolutely newbie :/ Thanks again. – nullgeppetto Apr 30 '20 at 03:44
  • @nullgeppetto You can refer to the [WebRTC GitHub samples](https://github.com/webrtc/samples/tree/gh-pages/src/content/getusermedia/record). – yushulx Apr 30 '20 at 04:42
  • @nullgeppetto don't forget to accept my answer if my code can help you. Thanks. – yushulx Apr 30 '20 at 04:44
1

No. Access to the user's webcam through a browser requires JavaScript and APIs provided to it by the browser.

Serverside programs do not run on the user's computer and thus cannot access its hardware (and Python and PHP cannot run client-side from a webpage).

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Right, many thanks for your response. So, does that mean that using JS can do that? Record and save to server? Is Flask required in this case? Apologies, I have virtually zero experience in this domain, I'm thinking about an app for an experiment in ML. Thanks again. – nullgeppetto Apr 29 '20 at 21:57