媒体记录器 API 生成的有损视频

如何解决媒体记录器 API 生成的有损视频

这是回答我的项目开发目标的最后一篇文章： RecordRTC with sending video chunks to server and record as webm or mp4 on server side。在解决了更换 mediaRecorder API 的问题后，我决定在使用 MediaRecorder 流式传输后进一步处理视频。但是，视频文件有损（丢失大量数据）。我使用 Media Recorder 的 ondataavailable 函数通过每 1 秒（时间拼接）的 encoding64 将 blob 从浏览器传输到服务器。因此，我可以问为什么即使我对视频文件进行了编码也会丢失数据，此外，如何稳定流媒体的视频处理？

仅供参考：这里是任何想要阅读有关 Media Recorder 的更多信息的链接：https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder

P/S：如果您鼓励我再次切换到 webRTC，如果您能帮助我解决问题，我将不胜感激 - 使用 webRTC 时文件最终损坏 - 在上述链接中?

以下是从我的后端和前端设置的所有代码：

客户端代码：

startMedia = ()=>{
      this.setState({mediaState:"pending"})
      navigator.mediaDevices.getDisplayMedia({video: true}).then( async (screenSharingStream)=>{
          //console.log(MediaRecorder.isTypeSupported('video/webm; codecs=vp8,opus'))
          const socketIO = io.connect(baseURL,{query: {candidateID: this.candidateID,roundTest:this.roundTest }})
          const mediaStream = await navigator.mediaDevices.getUserMedia({video:true,audio:true}).catch(e => {throw e});
          const mediaReCorderoptions = {
            videoBitsPerSecond : 128000,audioBitsPerSecond:128000,mimeType : 'video/webm; codecs=vp8,opus'
          }

          
          this.socketRef.current = socketIO;
          this.mediaStream = mediaStream
          this.screenSharingStream = screenSharingStream
          this.candidateVideoRef.current.srcObject = this.mediaStream;
          this.mediaRecorder = new MediaRecorder(this.screenSharingStream,mediaReCorderoptions)
          this.mediaRecorder.ondataavailable = function(event){
            if (event && event.data.size>0){
              const reader = new FileReader();
              reader.onload = function(){
                const dataURL = reader.result;
                const base64EncodedData = dataURL.split(',')[1];
                //console.log(buffer)
                socketIO.emit('SEND BLOB',base64EncodedData)
              }
              reader.readAsDataURL(event.data)
            }
          }
          this.mediaRecorder.start(1000)
          this.setState({mediaState:this.mediaRecorder.state})

         
      }).catch(err=>{
          console.log(err.name)
          switch(err.name){
            case 'NotAllowedError':
              message.error('Candidate does not allow!!')
              this.setState({mediaState:"Aborting"})
              break;
            default:
              message.error('System Error. Please contact us!')
              this.setState({mediaState:"Aborting"})
              break;
          }
      })
    
  }
  stopMedia = () =>{
      if (this.mediaStream){
        this.mediaStream.getTracks().forEach((track)=>{
          if (track.readyState==='live') {
            track.stop()
            this.candidateVideoRef.current.style.display='none';
          }})
      }
      if (this.screenSharingStream) {
        this.mediaRecorder.stop()
        this.setState({mediaState:this.mediaRecorder.state})
      }
  }

服务器代码：

socket.on("SEND BLOB",chunk=>{
        try {
        //if (chunk instanceof Buffer){
            const fileExtension = '.webm'
            const  dataBuffer = new Buffer(chunk,'base64');
            const fileStream = fs.createWriteStream(path.join(__dirname,'./videos/candidate/',candidateID + '-' + roundTest + fileExtension),{flags: 'a'});
            fileStream.write(dataBuffer);
        }
        catch(e){
            console.log(e)
        }
})

如果你想看，这是我视频的结果（我只拍了一张照片）