0

问题： 在我的 React 应用程序中，navigator.mediaDevices.getDisplayMedia当我将主干设置为视频标签并播放时，我在应用程序中设置了屏幕录制，并且播放成功。但是当我尝试将它保存到本地机器时，它只保存了 0 分钟的视频。

这是我的代码。

const VideoCall = ({ match }) => {
    const { params: { campaignPatienId, userId, id, meetingId, videoId } } = match;
    const [mediaR,setMediaR] = useState(null);
    const [recordingStarted,setRecordingStarted] = useState(false)
  
    const handleRecording = async () =>{
        const videoElem = document.querySelector("video");
        var displayMediaOptions = {
            video: {
              cursor: "always"
            },
            audio: {
                echoCancellation: true,
                noiseSuppression: true,
                sampleRate: 44100
            }
          };
          try {
            navigator.mediaDevices.getDisplayMedia(displayMediaOptions).then((strem)=>{
                console.log(strem,"stream")
                videoElem.srcObject = strem;
                setRecordingStarted(true)
                let mediaRecorder = new MediaRecorder(strem);
                
                let chunks = [];
                videoElem.onloadedmetadata= (e) =>{
                    videoElem.play();
                }

                mediaRecorder.ondataavailable = function (ev) {
                    console.log({ev})
                    chunks.push(ev.data)
                }
                mediaRecorder.onstop = (ev) => {
                    // window.clearTimeout(timoutStop);
                    let blob = new Blob(chunks, { type: "video/mp4" });
                    console.log(blob,"blob")
                    chunks = [];
                    strem.getTracks().forEach(function (track) {
                        track.stop();
                    });
                    var url = URL.createObjectURL(blob);
                    var a = document.createElement('a');
                    document.body.appendChild(a);
                    a.style = 'display: none';
                    a.href = url;
                    a.download = 'test.mp4';
                    a.click();
                    window.URL.revokeObjectURL(url);

                }

                mediaRecorder.start();
                setMediaR(mediaRecorder)
            });
            
          } catch(err) {
            console.error("Error: " + err);
          }
    }


    const stopRecording = async () =>{
      let currentRecorder = mediaR;
      if (currentRecorder.state != "inactive") {
        await currentRecorder.stop();
      }
    }


    return (
        <div className="row" style={{ height: '100%', width: '100%' }}>
            <div className="col-md-12" >
                <div className="row">
                    <div className="colHeader">
                        <h3>Chat with Client</h3>
                        <div class="create-user-button" >
                            <Link
                                to="/mychat">
                                Go to Chat Screen
                                </Link>
                        </div>
                        <div>
                        {recordingStarted ?  <button
                            type="button"
                            onClick={() => stopRecording()}
                            className="btn btn-default scoreOverview"
                        >
                           Download
                        </button>:  <button
                            type="button"
                            onClick={() => handleRecording()}
                            className="btn btn-default scoreOverview"
                        >
                           Record Video Call
                        </button>}
                       
                        </div>
                    </div>
                </div>
                <video id="video" autoplay width="100%"></video>
                
                
            </div>
        </div>
    )
}

export default withRouter(VideoCall)

有人可以帮我解决这个问题吗？.我尝试了很多，但它总是下载 0 分钟的视频。

4

1 回答 1

1

WebRTC (getDisplayMedia) 通常记录为 webm。

我有一个在record.a.video上运行的示例应用程序

并在代码中（看起来与您的相似，但对于 mimetype）：https ://github.com/dougsillars/recordavideo/blob/main/public/index.js#L652

function download() {
    var blob = new Blob(recordedBlobs, {type: 'video/webm'});
    var url = window.URL.createObjectURL(blob);
    var a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'test.webm';
    document.body.appendChild(a);
    a.click();
    setTimeout(function() {
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
    }, 100);
}
于 2021-06-07T19:14:57.847 回答