CIao a tutti sto sviluppando una video chat in javascript, con altri utenti del mio sito però nonostante ho seguito molte guide sulle API, riesco a registrare dalla cam e mi appare un pulsante di download del file " .webm " Però ho bisogno che venga trasmesso direttamente all'URL del mio sito in maniera automatizzata al termine della registrazione.

Praticamente voglio che scriva ad anello sempre lo stesso file, per ciascun utente nel raggio di 60 secondi.

Ho visto delle guide su npm, webrtc etc.. ma sono troppo difficili per me, mi serve qualcosa piu' legato al php o direttamente in javascript.

Ho provato in tutti i modi, anche con il formdata API ma non capisco come si usa, vorrei che quello che viene scaricato in locale .webm andasse a finire in una cartella o sottocartella del mio sito, cosi' da poterlo utilizzare con il tag html <video> come streaming, anche se in differita, non è importante.

Potete aiutarmi per favore.Grazie.

Posto il codice sorgente javascript.

<script>
let preview = document.getElementById("preview");
let recording = document.getElementById("recording");
let startButton = document.getElementById("startButton");
let stopButton = document.getElementById("stopButton");
let downloadButton = document.getElementById("downloadButton");
let logElement = document.getElementById("log");

let recordingTimeMS = 50000;

function log(msg) {
logElement.innerHTML += msg + "";
}

function wait(delayInMS) {
return new Promise(resolve => setTimeout(resolve, delayInMS));
}

function startRecording(stream, lengthInMS) {
let recorder = new MediaRecorder(stream);
let data = [];

recorder.ondataavailable = event => data.push(event.data);
recorder.start();
log(recorder.state + " for " + (lengthInMS/1000) + " seconds...");

let stopped = new Promise((resolve, reject) => {
recorder.onstop = resolve;
recorder.onerror = event => reject(event.name);
});

let recorded = wait(lengthInMS).then(
() => recorder.state == "recording" && recorder.stop()
);

return Promise.all([
stopped,
recorded
])
.then(() => data);
}

function stop(stream) {
stream.getTracks().forEach(track => track.stop());
}

startButton.addEventListener("click", function() {
navigator.mediaDevices.getUserMedia({
video: true,
audio: true
}).then(stream => {
preview.srcObject = stream;
downloadButton.href = stream;
preview.captureStream = preview.captureStream || preview.mozCaptureStream;
return new Promise(resolve => preview.onplaying = resolve);
}).then(() => startRecording(preview.captureStream(), recordingTimeMS))
.then (recordedChunks => {
let recordedBlob = new Blob(recordedChunks, { type: "video/webm" });
recording.src = URL.createObjectURL(recordedBlob);
downloadButton.href = recording.src;
downloadButton.download = "<?php echo $user; ?>.webm";
})
.catch(log);
}, false);
stopButton.addEventListener("click", function() {
stop(preview.srcObject);
}, false);
</script>