>

프로젝트에 비디오가 표시되어 있습니다. 비디오 위에는 어떤 물체가 그려지는 캔버스가 있습니다. 따라서 비디오에는 일부 도면이 오버레이됩니다. 이제 도면을 포함한 비디오 파일을 다운로드하고 싶습니다. webrtc mediaRecorder를 사용하고 있습니다. window.requestAnimationFrame에서 캔버스에 비디오를 그립니다. 내 보낸 비디오는 좋아 보이지만 캔버스를 캡처했기 때문에 비디오에서 오디오가 없습니다. 비디오에서 오디오를 캡처하여 canvasStream에 추가 할 수 있습니까? 또한 오디오를 포함한 비디오 스트림을 녹화했지만 그 위에 그림이 없습니다. 어떤 제안?


  • 답변 # 1

    입력 스트림 AudioTrack 및 Canvas 비디오 트랙으로 새 MediaStream을 만들어야합니다.
    그런 다음 새 스트림을 녹음하면 레코더 출력 (blobs)에 오디오와 비디오가 모두 포함됩니다.

    var options = {mimeType: 'video/webm'};
    var recordedBlobs = [];
    var newStream = new MediaStream();
    newStream.addTrack(inputStream.getAudioTracks()[0]);
    newStream.addTrack(canvasStream.getVideoTracks()[0]);
    mediaRecorder = new MediaRecorder(newStream, options);
    mediaRecorder.ondataavailable = function (event) {
        if (event.data && event.data.size > 0) {
            recordedBlobs.push(event.data);
        }
    }
    mediaRecorder.start(1000);
    
    

    내 데모를보십시오.

  • 이전 python - 저장된 CNN에서 교육 이미지에 할당 된 클래스 확률을 추출 할 수 있습니까?
  • 다음 ember.js - ember - 런타임에 경로와 컨트롤러를 어떻게 만들 수 있습니까?