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