Using WebRTC getStat() API

Question

Hey I am trying to implement the getstat API in my WebRTC application. Im finding it hard to get any tutorials at all , at a beginners level.

My Application I created a 2 person chat-room using the peer js framework. so in my application I am using what can be described a "Sneeker-net" for signaling , ie I am manually sharing a peer id with the person I want a chat with via giving them my id in a email lets say then they call that ID . it uses the stun and turn servers to make our connections its a simple peer to peer chat with Html5 and JavaScript which uses the peerjs API.

here is my HTML 5 AND Javascript code

HTML5 code

<html>
<head>
  <title> PeerJS video chat with manual signalling example</title>
  <link rel="stylesheet" href="style.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdn.peerjs.com/0.3/peer.js"></script>
  <script type="text/javascript" src="ps-webrtc-peerjs-start.js  ></script>




  </head>

<body>

<div>
<!-- Video area -->

<div id="video-container">
    Your Friend<video id="their-video" autoplay class="their-video"></video>
    <video id="my-video" muted="true" autoplay class="my-video"></video> You
</div>


<!-- Steps -->
<div>
    <h2> PeerJS Video Chat with Manual Signalling</h2>

    <!--Get local audio/video stream-->
    <div id="step1">
        <p>Please click 'allow' on the top of the screen so we can access your webcam and microphone for calls</p>
        <div id="step1-error">
            <p>Failed to access the webcam and microphone. Make sure to run this demo on an http server and click allow when asked for permission by the browser.</p>
            <a href="#" id="step1-retry" class="button">Try again</a>
        </div>
    </div>

<!--Get local audio/video stream-->


<!--Make calls to others-->

<div id="step2">
    <p>Your id: <span id="my-id">...</span></p>
    <p>Share this id with others so they can call you.</p>
    <p><span id="subhead">Make a call</span><br>
        <input type="text" placeholder="Call user id..." id="callto-id">
        <a href="#" id="make-call">Call</a>
    </p>
</div>




<!--Call in progress-->

<!--Call in progress-->
<div id="step3">
    <p>Currently in call with <span id="their-id">...</span></p>
    <p><a href="#" id="end-call">End call</a></p>
</div>

</div>




</div>

</body>
</html>

My Javascript file

navigator.getWebcam = (navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia);

// PeerJS object ** FOR PRODUCTION, GET YOUR OWN KEY at http://peerjs.com/peerserver **
var peer = new Peer({
    key: 'XXXXXXXXXXXXXXXX',
    debug: 3,
    config: {
        'iceServers': [{
            url: 'stun:stun.l.google.com:19302'
        }, {
            url: 'stun:stun1.l.google.com:19302'
        }, {
            url: 'turn:numb.viagenie.ca',
            username: "XXXXXXXXXXXXXXXXXXXXXXXXX",
            credential: "XXXXXXXXXXXXXXXXX"
        }]
    }
});

// On open, set the peer id so when peer is on we display our peer id as text 


peer.on('open', function() {
    $('#my-id').text(peer.id);
});

peer.on('call', function(call) {
    // Answer automatically for demo
    call.answer(window.localStream);
    step3(call);
});

// Click handlers setup
$(function() {
    $('#make-call').click(function() {
        //Initiate a call!
        var call = peer.call($('#callto-id').val(), window.localStream);
        step3(call);
    });
    $('end-call').click(function() {
        window.existingCall.close();
        step2();
    });

    // Retry if getUserMedia fails
    $('#step1-retry').click(function() {
        $('#step1-error').hide();
        step();
    });

    // Get things started
    step1();
});

function step1() {
    //Get audio/video stream
    navigator.getWebcam({
        audio: true,
        video: true
    }, function(stream) {
        // Display the video stream in the video object
        $('#my-video').prop('src', URL.createObjectURL(stream));


        // Displays error  
        window.localStream = stream;
        step2();
    }, function() {
        $('#step1-error').show();
    });
}

function step2() { //Adjust the UI
    $('#step1', '#step3').hide();
    $('#step2').show();
}

function step3(call) {
    // Hang up on an existing call if present
    if (window.existingCall) {
        window.existingCall.close();
    }

    // Wait for stream on the call, then setup peer video
    call.on('stream', function(stream) {
        $('#their-video').prop('src', URL.createObjectURL(stream));
    });
    $('#step1', '#step2').hide();
    $('#step3').show();
}

Many thanks to anybody who takes time out to help me I am very grateful, as Im only a beginner at WebRTC . Cheers

I think that you will find your answer here : [link](http://stackoverflow.com/a/24070353/1960671) — Antonin M., Mar 19 '15 at 10:35

score 2 · Accepted Answer · answered Mar 19 '15 at 13:06

2

Here is my code, which works in both Chrome and Firefox. It traces stats in the browser console. Because Chrome stats are very verbose, I filter them following an arbitrary criteria (statNames.indexOf("transportId") > -1):

function logStats() {
        var rtcPeerConn = ...;
        try {
            // Chrome
            rtcPeerConn.getStats(function callback(report) {
                var rtcStatsReports = report.result();
                for (var i=0; i<rtcStatsReports.length; i++) {
                    var statNames = rtcStatsReports[i].names();
                    // filter the ICE stats
                    if (statNames.indexOf("transportId") > -1) {
                        var logs = "";
                        for (var j=0; j<statNames.length; j++) {
                            var statName = statNames[j];
                            var statValue = rtcStatsReports[i].stat(statName);
                            logs = logs + statName + ": " + statValue + ", ";
                        }
                        console.log(logs);
                    }
                }
            });
        } catch (e) {
            // Firefox
            if (remoteVideoStream) {
                var tracks = remoteVideoStream.getTracks();
                for (var h=0; h<tracks.length; h++) {
                    rtcPeerConn.getStats(tracks[h], function callback(report) {
                        console.log(report);
                    }, function(error) {});
                }
            }
        }
}

You need the rtcPeerConnection, and Firefox requires the stream in addition.

answered Mar 19 '15 at 13:06

peveuve

770
8
20

Thanks for your help I am using chrome with my app so this helps a lot I am trying to figure out how to get the stats with my app. When you said "You need the rtcPeerConnection" does that mean I have to add a rtcPeerConnection method or object like yours and like Antonin M. [link] (http://stackoverflow.com/questions/24066850/is-there-an-api-for-the-chrome-webrtc-internals-variables-in-javascript/24070353#24070353) with his example he uses Peer js . I apologise as I am new to this subject and beginner at Js as well so its tough to grasp all help is welcome. Many thanks – WebRTC83 Mar 20 '15 at 17:30
since you seem to use PeerJS, you can retrieve the rtcPeerConnection from the mediaConnection returned by peer.call() (for example), like this: rtcPeerConn = mediaConnection.pc And yes, it is not documented. – peveuve Mar 20 '15 at 21:26
function logStats() { var rtcPeerConn = mediaConnection.pc try { following with the rest of the code you have provided this should work@peveuve does that look correct? and then with changing the statnames to what ever stat needs to be called . Also is this any different from receiving stats from(chrome://webrtc-internals/)? is there any extra stats from the getstatsapi that you would not find on the chrome internals page many thanks @peveuve – WebRTC83 Mar 26 '15 at 13:51
The code provided is the one I use in my product, it works. I am pretty sure getStats() retrieves the same information as chrome://webrtc-internals, but it's very verbose, so tedious to check everything. – peveuve Mar 26 '15 at 16:59
Brilliant thanks ever so much for your time @peveuve, looking at using both of them. – WebRTC83 Mar 27 '15 at 14:26
@WebRTC83 you should accept the answer, it will be nice for people looking for... the anwser – peveuve Apr 01 '15 at 13:05

score 2 · Answer 2 · edited May 23 '17 at 12:00

for twilio SDK look at this post:

Is there an API for the chrome://webrtc-internals/ variables in javascript?

var rtcPeerConn =Twilio.Device.activeConnection();
rtcPeerConn.options.mediaStreamFactory.protocol.pc.getStats(function callback(report) {
                var rtcStatsReports = report.result();
                for (var i=0; i<rtcStatsReports.length; i++) {
                    var statNames = rtcStatsReports[i].names();
                    // filter the ICE stats
                    if (statNames.indexOf("transportId") > -1) {
                        var logs = "";
                        for (var j=0; j<statNames.length; j++) {
                            var statName = statNames[j];
                            var statValue = rtcStatsReports[i].stat(statName);
                            logs = logs + statName + ": " + statValue + ", ";
                        }
                        console.log(logs);
                    }
                }
            });

score 0 · Answer 3 · answered Mar 18 '15 at 19:04

0

I advice you to read Real-Time Communication with WebRTC for O'Reilly It is very useful book for beginners in addition the book will guide you to build your webchat application ste by step using sokcet.io for signaling the link in the first comment

answered Mar 18 '15 at 19:04

Allloush

1,140
8
27

Many thanks for you help, I wanted to try incorporate in this app I have been working on if it fails I will look into building one from that book – WebRTC83 Mar 20 '15 at 17:10

Using WebRTC getStat() API

3 Answers3