Hi everyone. Currently I am developing a function that can record on buffer array with each chunk by using dataonavailable function in RecordRTC instead of stopping the record and sending it back to the server. However, when I send it to the server through socket.emit as an encoded64 data or bufferArray, the final video is corrupted under three extensions: x-matroska(MKV), mp4, webM. Therefore, can I ask the reasons why the file is ending up corrupted and how will I be able to fix this issue?
FYI regarding webRTC: Here is the documentation that you can read more about it: https://github.com/muaz-khan/RecordRTC
P/S: I used timesplice of 1000 and stop early from 5-10s and still cannot record as a short video.
Server - Code:
socket.on("SEND BLOB",buffer=>{
function writeOrAppendData(data){
var filePath = './'
const fileExtension = '.webm'
if (!fs.existsSync(filePath+'finalresult' + fileExtension)){
console.log('write Original file')
fs.writeFileSync(filePath+'finalresult' + fileExtension,data)
}
else {
fs.appendFileSync(filePath+'finalresult' + fileExtension,data)
}
}
console.log(buffer)
if (buffer instanceof Buffer)
writeOrAppendData(buffer)
})
Client - code:
const config = ({video:true,audio:true})
this.setState({RTCStatus:"pending"})
navigator.mediaDevices.getUserMedia(config).then( async stream=>{
const candidateURL = this.candidateID
const socketIO = io.connect(baseURL,{query: {candidateID:candidateURL }})
//this.socketRef = io.connect(baseURL);
this.stream = stream;
this.socketRef.current = socketIO;
//this.candidateVideoRef.current.srcObject = stream;
this.screenSharingStream = await navigator.mediaDevices.getDisplayMedia(config);
this.videoRecorder = new RecordRTC(this.screenSharingStream, {
type: 'video',
mimeType:"video/webm;codecs=avc1",
//disableLogs: true,
timeSlice: 1000,
bitsPerSecond: 128000,
ondataavailable:async function(blob) {
console.log(blob)
//var candidateVideo = document.getElementById('candidate-video')
//candidateVideo.src =URL.createObjectURL(blob)
console.log(candidateVideo)
// this.candidateVideoRef.current.srcObject = URL.createObjectURL(blob)
var reader = new FileReader();
reader.readAsArrayBuffer(blob)
reader.onloadend = function(){
var buffer = reader.result;
console.log(buffer)
socketIO.emit('SEND BLOB',buffer)
}
//let blobData = await fetch(blob).then(r => r.blob()).then(blobFile => new File([blobFile], "record", { type: "video/mp4" }))
//console.log(blobData)
},
});
console.log('hey')
this.videoRecorder.startRecording();
this.setState({RTCStatus:this.videoRecorder.getState()})
///const sleep = m => new Promise(r => setTimeout(r, m));
//await sleep(3000);
//this.videoRecorder.stopRecording(async function(){
//
// socketIO.emit('END BLOB')
//})//
}
RTCStop = () =>{
if (this.stream && this.screenSharingStream){
const candidateURL = this.candidateID
const socketIO = io.connect(baseURL,{query: {candidateID:candidateURL }})
this.stream.getTracks().forEach((track)=>{
if (track.readyState==='live') {
track.stop()
this.candidateVideoRef.current.style.display='none';
this.videoRecorder.stopRecording(async function(){
socketIO.emit('END BLOB')
//let blob = await fetch(this.videoRecorder.getBlob()).then(r => r.blob()).then(blobFile => new File([blobFile], "record", { type: "video/mp4" }))
//let blobDuration = await getBlobDuration(blob);
//console.log(blobDuration+'seconds')
//let data = new FormData()
//console.log(blob);
//data.append("videoDuration",blobDuration)
//data.append(this.candidateID, blob)
//console.log('axios not run');
//await request().post('/c/video', data)
//console.log('axios run');
//let rest = await
//this.setState({submitVideo: true})
})
}})