Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

215
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda