在WebRTC中使用多次调用getUserMedia来拆分音频和视频

如何解决在WebRTC中使用多次调用getUserMedia来拆分音频和视频

我正在开发一个简单的应用程序，该应用程序使用WebRTC和RecordRTC库通过网络摄像头和麦克风录制音频和视频，然后将它们保存到服务器，但是我需要将它们另存为单独的文件。我目前正在尝试通过多次调用navigator.mediaDevices.getUserMedia并将其保存到不同的HTML标签来进行此操作，但是对于音频标签，我目前却遇到了An error occurred: TypeError: Cannot set property 'srcObject' of null的错误。有可能做我想做的事吗？如果是这样，错误发生在哪里？我的代码包含在下面。如果没有，是否有其他方法可以实现？

<html>
<head> 
   <Meta charset = "utf-8">
</head>
<body>
   <div class="camera">
      <audio style="display: none;"></audio>
      <video id="video" autoplay controls></video><br>
      <button id="startbutton">Start Recording</button>
      <button id="stopbutton">Stop Recording</button>
      <button id="photobutton">Take photo</button>
   </div>
   <canvas id="canvas" style="display: none;"></canvas>
   <div class="output">
      <img id="photo">
   </div>
   <button id="downloadbutton" style="display: none;">Download All</button>

   <script src = "RecordRTC.js"></script>
   <!-- web streams API polyfill to support Firefox -->
   <script src="https://unpkg.com/@mattiasbuelens/web-streams-polyfill/dist/polyfill.min.js"></script>

   <!-- ../libs/DBML.js to fix video seeking issues -->
   <script src="https://www.webrtc-experiment.com/EBML.js"></script>

   <!-- for Edge/FF/Chrome/Opera/etc. getUserMedia support -->
   <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
   <script src="https://www.webrtc-experiment.com/DetectRTC.js"> </script>
   <script>
      var startbutton = document.getElementById('startbutton');
      var stopbutton = document.getElementById('stopbutton');
      var video = document.getElementById('video');
      var audio = document.getElementById('audio');
      var canvas = document.getElementById('canvas');
      var photo = document.getElementById('photo');
      var photobutton = document.getElementById('photobutton');
      var downloadbutton = document.getElementById('downloadbutton');
      var videorecorder;
      var audiorecorder;
      var videoData;
      var audioData;
      var imageData;
      var width = 320;
      var height = 0;
      var streaming = false;

      stopbutton.disabled = true;

      function stopVideoRecordingCallback() {
         video.src = video.srcObject = null;
         video.muted = false;
         video.volume = 1;
         video.src = URL.createObjectURL(videorecorder.getBlob());
         videorecorder.stream.stop();
         videorecorder.destroy();
         videorecorder = null;
      }

      function stopAudioRecordingCallback() {
         audiorecorder.stop();
      }

      function clearphoto() {
         var context = canvas.getContext('2d');
         context.fillStyle = "#AAA";
         context.fillRect(0,canvas.width,canvas.height);

         var data = canvas.toDataURL('image/png');
         photo.setAttribute('src',data);
      }
         
      function takepicture() {
         var context = canvas.getContext('2d');
         if (width && height) {
            canvas.width = width;
            canvas.height = height;
            context.drawImage(video,width,height);
            
            var data = canvas.toDataURL('image/png');
            photo.setAttribute('src',data);
         } else {
            clearphoto();
         }
      }

      startbutton.addEventListener('click',function() {
         navigator.mediaDevices.getUserMedia({video: true,audio: false}).then(function(stream) {
            video.srcObject = stream;
            videorecorder = RecordRTC(stream,{
               type: 'video'
            });
            videorecorder.startRecording();
            startbutton.disabled = true;
            videorecorder.stream = stream;
            document.getElementById('stopbutton').disabled = false;
            video.addEventListener('canplay',function(ev){
               if (!streaming) {
                  height = video.videoHeight / (video.videoWidth/width);
                  if (isNaN(height)) {
                     height = width / (4/3);
                  }
                  
                  video.setAttribute('width',width);
                  video.setAttribute('height',height);
                  canvas.setAttribute('width',width);
                  canvas.setAttribute('height',height);
                  streaming = true;
               }
            },false);

            photobutton.addEventListener('click',function(ev){
               takepicture();
               ev.preventDefault();
            },false);
            
            clearphoto();
         }).catch(function(err) {
            console.log("An error occurred: " + err);
         });

         navigator.mediaDevices.getUserMedia({video: false,audio: true}).then(function(mic) {
            audio.srcObject = mic;
            audiorecorder = RecordRTC(microphone,options);
            audiorecorder.startRecording();
         }).catch(function(err) {
            console.log("An error occurred: " + err);
         });
      });

      stopbutton.addEventListener('click',function(){
         this.disabled = true;
         videorecorder.stopRecording(stopVideoRecordingCallback);
         audiorecorder.stopRecording(stopAudioRecordingCallback);
         downloadbutton.style.display = block;
      });
   </script> 
</body> 
</html>