Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

206
Views
Web application for recording video from user's web camera

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?

over 4 years ago · Santiago Trujillo
2 answers
Answer question

0

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

over 4 years ago · Santiago Trujillo Report

0

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

over 4 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!