DVR: The video frame rate is not normal after DVR WebRTC to FLV.

[HappyManYun]

Note: Please read FAQ before file an issue, see #2716

Description

Please description your issue here

1. SRS Version: 5 (This is about starting RTC to RTMP, DVR in a Docker environment)

2. SRS Log:

No abnormalities

3. SRS Config:

listen              1935;
max_connections     1000;
daemon              off;
srs_log_tank        console;

http_server {
    enabled         on;
    listen          8080;
    dir             ./objs/nginx/html;
}

http_api {
    enabled         on;
    listen          1985;
}
stats {
    network         0;
}
rtc_server {
    enabled on;
    listen 8000; # UDP port
    # @see https://github.com/ossrs/srs/wiki/v4_CN_WebRTC#config-candidate
    candidate $CANDIDATE;
}

vhost __defaultVhost__ {
    rtc {
        enabled     on;
        rtmp_to_rtc on;
        rtc_to_rtmp on;
        pli_for_rtmp 0.5;
    }
    dvr {
        enabled         on;
        dvr_path        ./objs/nginx/html/dvr/[timestamp].flv;
    }
}

Replay

Please describe how to replay the bug?

Step 1: Add a canvas

<canvas id='canvasId' width='800px' height='500px'></canvas>

Step 2: Draw the animation

 setInterval(() => {
            var canvas = document.getElementById('canvasId');
            var canvasRenderingContext2D = canvas.getContext("2d");
            canvasRenderingContext2D.clearRect(0, 0, 800, 500);
            canvasRenderingContext2D.font = "20px Arial";
            canvasRenderingContext2D.fillStyle = "black";
            canvasRenderingContext2D.fillRect(0, 0, 800, 500);
            canvasRenderingContext2D.fillStyle = "white";
            canvasRenderingContext2D.fillText(new Date().toString(), 150, 240);
        }, 1000/30);

Step 3: Replace the video track with WebRTC

self.constraints = {
        audio: true,
        // video: {
        //     width: {ideal: 320, max: 576}
        // }
    };

var mediaStreamTrack = document.getElementById('canvasId').captureStream(30).getTracks()[0];
self.pc.addTrack(mediaStreamTrack);
self.ontrack && self.ontrack({track: mediaStreamTrack});

Expect

The VLC player is playing an RTMP stream at a frame rate of 1000, and the recorded video file also shows a frame rate of 1000 in VLC. If the recording length is ten minutes, you might not be able to drag the progress bar when playing it with flvjs.

TRANS_BY_GPT4

[HappyManYun]

This is the added canvas <canvas id='canvasId' width='800px' height='500px'></canvas>.

TRANS_BY_GPT4

[winlinvip]

Could you please submit a complete HTML+JS code? You can compress it into a zip file and upload it here as an attachment.

TRANS_BY_GPT4

[HappyManYun]

players.zip