使用 WebRTC getStat() API

Question

嘿，我正在尝试在我的 WebRTC 应用程序中实现 getstat API。我发现很难获得初学者级别的任何教程。

我的申请我使用 peer js 框架创建了一个 2 人聊天室。所以在我的应用程序中，我使用可以描述为 "Sneeker-net" 的信号，即我通过在电子邮件中给他们我的 ID 来手动与我想与之聊天的人共享对等 ID 让他们说然后他们称之为ID 。它使用 stun 和 turn 服务器使我们的连接成为与 Html5 和 JavaScript 的简单点对点聊天，后者使用 peerjs API。

这是我的 HTML 5 和 Javascript 代码

HTML5码

<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>

我的 Javascript 文件

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();
}

非常感谢任何抽出时间帮助我的人我非常感谢，因为我只是 WebRTC 的初学者。干杯

Answer 1

我建议你阅读 Real-Time Communication with WebRTC for O'Reilly 这本书对初学者来说非常有用，此外，这本书将指导您使用 sokcet.io 信号逐步构建您的网络聊天应用程序第一条评论中的link

Answer 2

这是我的代码，可在 Chrome 和 Firefox 中使用。它在浏览器控制台中跟踪统计信息。因为 Chrome 统计数据非常冗长，我按照任意标准过滤它们 (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) {});
                }
            }
        }
}

您需要 rtcPeerConnection，Firefox 还需要流。

Answer 3

对于 twilio SDK 看这个 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);
                    }
                }
            });

使用 WebRTC getStat() API

Using WebRTC getStat() API

webrtc

peerjs