我无法预览录制RTC视频

Question

我正在开发一个用户可以自己录制视频并上传视频的应用程序。我正在使用recordRTC。在将录制的视频上传到服务器之前，如何预览？我尝试了下面的代码，但视频只是在视频的前几秒而不是整个视频中循环播放。

successCallback(stream: MediaStream) {  
    var options = {
        mimeType: 'video/webm', 
        bitsPerSecond: 128000
    };
    this.stream = stream;
    this.recordRTC = RecordRTC(stream, options);
    this.recordRTC.startRecording();
    let video:any=document.getElementById('vid1')
    try {
        video.srcObject = stream;
    } catch (error) {
        video.src = URL.createObjectURL(stream);
    }
    video.play()
    this.toggleControls();
}
errorCallback() {
    console.log('error')
}
startRecording() {
    navigator.mediaDevices.getUserMedia(this.mediaConstraints).then(this.successCallback.bind(this), this.errorCallback.bind(this));
}
stopRecording() {
    let recordRTC = this.recordRTC;
    recordRTC.stopRecording(this.processVideo.bind(this));
    let stream = this.stream;
    stream.getAudioTracks().forEach(track => track.stop());
    stream.getVideoTracks().forEach(track => track.stop());
    
}
processVideo(audioVideoWebMURL) {
    this.isVid1=false
    this.vidURL=audioVideoWebMURL
} 
getSantizeUrl(url : string) {
    return this.sanitizer.bypassSecurityTrustUrl(url);
}

这是html文件

<ng-container *ngIf="isVid1; else elseIsVid">
    <video id="vid1" playsinline></video>
</ng-container>
<ng-template #elseIsVid>
    <video id="vid2" [src]="this.getSantizeUrl(vidURL)" autoplay playsinline></video>
</ng-template>

id =“ vid1”的视频是录像机将要显示的位置，录制后，我想隐藏id =“ vid1”的视频并显示其他视频，以便在上传之前可以观看到服务器