在电子项目中使用 video/mp4 作为 mimetype答案

【问题标题】：Use video/mp4 for mimetype in electron project在电子项目中使用 video/mp4 作为 mimetype
【发布时间】：2021-07-17 09:27:09
【问题描述】：

所以我一直在使用电子使用这个tutorial 来制作这个屏幕录像机，它工作得很好，但是它以 .webm 格式记录，有没有一种简单的方法可以制作它使用mimetype和正确的编解码器或其他方式记录在.mp4中

我的录音机是这样的：

const constraints = {
   audio: false,
   video: {
     mandatory: {
       chromeMediaSource: 'desktop',
       chromeMediaSourceId: source.id
     }
   }
 };

 const stream = await navigator.mediaDevices
   .getUserMedia(constraints);

 //LOOK HERE
 const options = { mimeType: 'video/webm; codecs=vp9' };  
 mediaRecorder = new MediaRecorder(stream, options);

所有被记录的数据被压入一个数组，然后转换成一个blob作为原始数据，blob声明如下：

const blob = new Blob(recordedChunks, {
      type: 'video/webm; codecs=vp9'
    });

如果有人也可以建议我如何在这个应用程序中添加录音，那就太好了。

【问题讨论】：

标签： javascript node.js electron blob mime-types

【解决方案1】：

虽然这篇文章很旧，但我也遇到了这个问题，这就是我最终要做的，

您不能直接在电子中使用桌面录制添加音频，而是应该为音频和视频创建两个单独的流，然后将它们合并为一个

// separate contraints for video options

const videoconstraints = {
    audio: false,
    video: {
      mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: source.id
      }
    }
  };

// separate constraints for audio options
const audioconstraints = {audio: true};


// two different streams for audio and video
const audioStream = await navigator.mediaDevices.getUserMedia(audioconstraints);
const videoStream = await navigator.mediaDevices.getUserMedia(videoconstraints);

// now you can combine both the streams to get one single stream
const stream = new MediaStream([...videoStream.getVideoTracks(), ...audioStream.getAudioTracks()])

至于第一部分，我也在寻找解决方案。

【讨论】：