Web application for recording video from user's web camera

Question

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?

Answer 1

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#.