用于从用户的网络摄像头录制视频的 Web 应用程序

Question

我有兴趣构建一个 Web 应用程序，它将由 nginx 提供服务，它将要求用户访问他们的网络摄像头，在给定的时间段内进行记录，可能会向用户重播，并且将其存储在服务器中。

我也在考虑基本的用户界面。那会不会是纯HTML+PHP？。会不会是python？

这里类似的问题好像不是很relevant/helpful.

你有什么建议？

Answer 1

没有。通过浏览器访问用户的网络摄像头需要 JavaScript and APIs provided to it by the browser.

服务器端程序不运行在用户的计算机上，因此无法访问其硬件（并且 Python 和 PHP 不能运行网页客户端） .

Answer 2

您可以使用 MediaRecorder 从网络摄像头录制视频。

录制视频并将其数据保存到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();
}

将视频数据上传到您的操作页面：

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);
}

您可以使用任何编程语言实现操作页面，PHP、Java、Python 或 C#。

用于从用户的网络摄像头录制视频的 Web 应用程序

Web application for recording video from user's web camera

html

webcam

web-applications

nginx

video-recording