javascript - RecordRTC，将视频块发送到服务器并在服务器端记录为 webm 或 mp4

Question

大家好。目前我正在开发一个函数，该函数可以通过在 RecordRTC 中使用 dataonavailable 函数而不是停止记录并将其发送回服务器来记录每个块的缓冲区数组。但是，当我通过 socket.emit 作为编码的 64 数据或 bufferArray 将其发送到服务器时，最终视频在三个扩展名下被损坏：x-matroska(MKV)、mp4、webM。因此，我能否询问文件最终损坏的原因以及如何解决此问题？

关于 webRTC 的仅供参考：您可以阅读以下文档：https ://github.com/muaz-khan/RecordRTC

P/S：我用了1000倍的时间，5-10秒就提前停止了，还是不能录制成短视频。

服务器 - 代码：

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)


    })

客户端 - 代码：

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

标签： javascriptsocket.iovideo-streamingrecordrtc