OvenPlayer Best way to monitor video quality with webrtc as source?

So I am using player with webrtc protocol and all works fine. I turned the log on with OvenPlayer.debug(true); and if understand it right the video quality is flexible depending on the speed of the user who is streaming. But how do I actually monitor the quality of the stream I am getting?

This is the object I see returned by getConfig()

The streamer is sending stream to oven engine, I get url and feed it to oven player on my side. Maybe you have some examples at Codepen or something? Sorry for bothering you too much, I might be am missing something obvious 😉

PS I am trying to recreated something like here https://webrtc.github.io/samples/src/content/peerconnection/constraints/ where on the right side it shows incoming stream and quality of this stream, when I test it, it gradually upgrades to highest quality...

Mar 09 '22 16:03 brootle

@brootle Hi.

To monitor the quality of the WebRTC stream, you need to use the stat api of the RTPPeerConnection connected to the OvenMediaEngine. However, OvenPlayer does not expose RTPPeerConnection externally.

I'll try to add a relevant interface when time permits.

Thanks.

Mar 10 '22 04:03 SangwonOh

@SangwonOh cool, tag me when you push those updates, thanks!

Mar 10 '22 15:03 brootle

@SangwonOh Execuse me! I wonder whether OvenPlayer now supports monitoring video quality level when playing. Thanks!

May 25 '22 09:05 htliu6

@htliu6 Hi. We plan to work after adding features such as ABR. Thanks and stay tuned!

May 27 '22 05:05 SangwonOh

Latest OvenPlayer and bolow code will help to monitor webrtc stats.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OvenPlayer AirenSoft</title>
    <style>
        #player {
            width: 100%;
        }
    </style>
</head>
<body>
<h1>OvenPlayer</h1>
<!--hello -->
<div id="player">

</div>
<div class="stats-box">

</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ovenplayer.min.js"></script>

<script>

    const player = OvenPlayer.create('player', {
        autoStart: true,
        sources: [
            {
                type: 'webrtc',
                file: 'ws://sangwon.airensoft.com:3333/app/stream'
            },
        ]
    });

    player.on('peerConnectionPrepared', function (myPeerConnection) {
        setInterval(() => {
            myPeerConnection.getStats(null).then((stats) => {
                let statsOutput = "";

                stats.forEach((report) => {
                    statsOutput +=
                        `<h2>Report: ${report.type}</h2>\n<strong>ID:</strong> ${report.id}<br>\n` +
                        `<strong>Timestamp:</strong> ${report.timestamp}<br>\n`;

                    Object.keys(report).forEach((statName) => {
                        if (
                            statName !== "id" &&
                            statName !== "timestamp" &&
                            statName !== "type"
                        ) {
                            statsOutput += `<strong>${statName}:</strong> ${report[statName]}<br>\n`;
                        }
                    });
                });

                document.querySelector(".stats-box").innerHTML = statsOutput;
            });
        }, 1000);
    });

    player.on('peerConnectionDestroyed', function (pc) {
        console.log('PeerConnection has been destroyed >A<')
    });

</script>
</body>
</html>

We are closing the issue due to a long period of inactivity. If further discussion is needed, please open a new issue.

Jan 12 '24 07:01 SangwonOh

OvenPlayer OvenPlayer copied to clipboard

Best way to monitor video quality with webrtc as source?

OvenPlayer
OvenPlayer copied to clipboard