Question

编辑

进一步检查后，我认为这是Windows 10和/或我使用的内置视频播放器的问题。将Chrome用作视频播放器时，webm和mp4格式均可正常使用。仍然不确定为什么会发生这种情况，但据我所知，这个问题与JavaScript无关。

END EDIT

我正在使用电子开发带有javascript的应用程序。它捕获屏幕视频和麦克风音频，并将其保存到视频文件中-我尝试过webm和mp4格式。

问题是当我播放视频时，音频可以正常播放，但屏幕却是黑色的。我尝试使用内置的影视和Windows Media Player播放视频。奇怪的是，当我将视频上传到YouTube时，效果很好。我有Windows 10。

我不是流或视频/音频专家，因此很难缩小范围。我将附加一些用于保存视频的代码。不知道问题出在代码中还是其他地方。

// combine audio and video and create MediaRecorder
let combinedStream = new MediaStream([
        videoStream.getTracks()[0],
        audioStream.getTracks()[0]
      ])
      preview.srcObject = videoStream
      recorder = new MediaRecorder(combinedStream)
      blobs = []
      recorder.ondataavailable = e => blobs.push(e.data)
      recorder.start()

然后我将文件保存在具有这些功能的按钮上

function saveRecording() {
  toArrayBuffer(new Blob(blobs, { type: 'video/webm' }), ab => {
    var buffer = toBuffer(ab)
    var filename = 'test.webm'
    var filepath = path.resolve(app.getPath('downloads'), filename)
    fs.writeFile(filepath, buffer, error => {
      if (error) {
        console.log('Error saving file: ', error)
      } else {
        console.log('File saved')
      }
    })
  })
}

function toArrayBuffer(blob, cb) {
  let fileReader = new FileReader()
  fileReader.onload = function() {
    let arrayBuffer = this.result
    cb(arrayBuffer)
  }
  fileReader.readAsArrayBuffer(blob)
}

function toBuffer(ab) {
  let buffer = new Buffer(ab.byteLength)
  let arr = new Uint8Array(ab)
  for (let i = 0; i < arr.byteLength; i++) {
    buffer[i] = arr[i]
  }
  return buffer
}

黑屏视频Windows 10

0 个答案: