这是我第一次处理视频，有点不知所措。

问题

我想能够记录用户的屏幕，每5秒发送录制的屏幕到我的后端服务器。然后，在我的后端服务器上，每5秒添加一个完整的视频。
如果我发送3部分5秒，我想有完整的15秒视频。

我所尝试的

我有以下前端代码：

function accessRecord(id) {
    navigator.mediaDevices.getDisplayMedia({
        audio: false,
        video: true
    }).then(startStream).catch(failedStream)
}

function startStream(stream) {
    const mediaRecorder = new MediaRecorder(stream, {
        // I have tried adding a mimeType as well
        // mimeType: 'video/mp4'
    });

    mediaRecorder.start(5000);

    mediaRecorder.ondataavailable = (e) => {
        fetch('http://localhost/api/session/12/video/stream', {
            method: 'POST',
            body: new Blob([e.data]),
        }).then(() => {
            console.log('success')
        }).catch((e) => {
            console.log('error')
            console.log(e);
        })
    };
}

然后，在我的后端服务器[Laravel]上，我执行以下逻辑：

Route::post('session/{id}/video/stream', function (Request $request) {
    $videoData = $request->getContent();

    $filename = 'video_uuid-video.mp4';

    if (!file_exists(storage_path('app/videos/' . $filename))) {
        touch(storage_path('app/videos/' . $filename));
    }

    \Illuminate\Support\Facades\Storage::append('videos/' . $filename, $videoData);

    return response()->json(['message' => 'Video frame uploaded successfully']);
});

每当我停止流媒体，并尝试在我的Mac（MacOS）上打开视频时，视频无法打开：

我不知道我做错了什么。我想记录每5秒的视频，然后附加到当前的视频，并在年底（当流结束），我想能够播放视频。