Fatal编程技术网
  • webrtc/
  • 使用WebRTC getStat（）API

使用WebRTC getStat（）API

webrtc

使用WebRTC getStat（）API,webrtc,peerjs,Webrtc,Peerjs,嘿，我正在尝试在我的WebRTC应用程序中实现GetStatAPI。我发现很难得到任何入门级的教程 我的申请 我使用peer js框架创建了一个两人聊天室。因此，在我的应用程序中，我使用了一种可以称为“斯内克网络”的方式来发送信号，也就是说，我通过在电子邮件中提供我的id，手动与我想要聊天的人共享一个对等id，让他们说，然后他们调用该id。它使用stun和turn服务器使我们的连接成为一个简单的点对点聊天，使用Html5和使用peerjs API的JavaScript 这是我的HTML5和Jav

嘿，我正在尝试在我的WebRTC应用程序中实现GetStatAPI。我发现很难得到任何入门级的教程

我的申请 我使用peer js框架创建了一个两人聊天室。因此，在我的应用程序中，我使用了一种可以称为“斯内克网络”的方式来发送信号，也就是说，我通过在电子邮件中提供我的id，手动与我想要聊天的人共享一个对等id，让他们说，然后他们调用该id。它使用stun和turn服务器使我们的连接成为一个简单的点对点聊天，使用Html5和使用peerjs API的JavaScript

这是我的HTML5和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>
非常感谢所有抽出时间帮助我的人，我非常感谢，因为我只是WebRTC的初学者。
干杯

我建议您阅读O'Reilly与WebRTC的实时通信 这本书对初学者非常有用。此外，本书还将指导您使用sokcet.io逐步构建webchat应用程序
第一条评论中的链接

我建议您阅读O'Reilly与WebRTC的实时通信 这本书对初学者非常有用。此外，本书还将指导您使用sokcet.io逐步构建webchat应用程序
第一条评论中的链接

我建议您阅读O'Reilly与WebRTC的实时通信 这本书对初学者非常有用。此外，本书还将指导您使用sokcet.io逐步构建webchat应用程序
第一条评论中的链接

我建议您阅读O'Reilly与WebRTC的实时通信 这本书对初学者非常有用。此外，本书还将指导您使用sokcet.io逐步构建webchat应用程序
第一条评论中的链接是我的代码，它可以在Chrome和Firefox中使用。它在浏览器控制台中跟踪统计信息。因为Chrome统计数据非常详细，所以我按照任意标准（statNames.indexOf（“transportId”）>-1）过滤它们：

函数logStats（）{
var rtcPeerConn=。。。；
试一试{
//铬
getStats（函数回调（报告）{
var rtcStatsReports=report.result（）；
对于（变量i=0；i-1）{
var logs=“”；

对于（var j=0；j这是我的代码，在Chrome和Firefox中都可以使用。它在浏览器控制台中跟踪统计信息。因为Chrome统计信息非常详细，所以我会按照任意条件（statNames.indexOf（“transportId”）>-1）对它们进行筛选：


函数logStats（）{
var rtcPeerConn=。。。；
试一试{
//铬
getStats（函数回调（报告）{
var rtcStatsReports=report.result（）；
对于（变量i=0；i-1）{
var logs=“”；

对于（var j=0；j这是我的代码，在Chrome和Firefox中都可以使用。它在浏览器控制台中跟踪统计信息。因为Chrome统计信息非常详细，所以我会按照任意条件（statNames.indexOf（“transportId”）>-1）对它们进行筛选：


函数logStats（）{
var rtcPeerConn=。。。；
试一试{
//铬
getStats（函数回调（报告）{
var rtcStatsReports=report.result（）；
对于（变量i=0；i-1）{
var logs=“”；

对于（var j=0；j这是我的代码，在Chrome和Firefox中都可以使用。它在浏览器控制台中跟踪统计信息。因为Chrome统计信息非常详细，所以我会按照任意条件（statNames.indexOf（“transportId”）>-1）对它们进行筛选：


函数logStats（）{
var rtcPeerConn=。。。；
试一试{
//铬
getStats（函数回调（报告）{
var rtcStatsReports=report.result（）；
对于（变量i=0；i-1）{
var logs=“”；

对于（var j=0；j对于twilio SDK，请查看以下帖子：




var rtpeerconn=Twilio.Device.activeConnection（）；
rtpeerconn.options.mediaStreamFactory.protocol.pc.getStats（函数回调（报告）{
var rtcStatsReports=report.result（）；
对于（变量i=0；i-1）{
var logs=“”；

对于（var j=0；j对于twilio SDK，请查看以下帖子：




var rtpeerconn=Twilio.Device.activeConnection（）；
rtpeerconn.options.mediaStreamFactory.protocol.pc.getStats（函数回调（报告）{
var rtcStatsReports=report.result（）；
对于（变量i=0；i-1）{
var logs=“”；

对于（var j=0；j对于twilio SDK，请查看以下帖子：




var rtpeerconn=Twilio.Device.activeConnection（）；
rtpeerconn.options.mediaStreamFactory.protocol.pc.getStats（函数回调（报告）{
var rtcStatsReports=report.result（）；
对于（变量i=0；i-1）{
var logs=“”；

对于（var j=0；j对于twilio SDK，请查看以下帖子：




var rtpeerconn=Twilio.Device.activeConnection（）；
rtpeerconn.options.mediaStreamFactory.protocol.pc.getStats（函数回调（报告）{
var rtcStatsReports=report.result（）；
对于（变量i=0；i-1）{
var logs=“”；

对于我想你会在这里找到你的答案：非常感谢你的帮助我想你会在这里找到你的答案：非常感谢你的帮助我想你会在这里找到你的答案：非常感谢你的帮助我想你会在这里找到你的答案他的应用程序我一直在努力，如果它失败了，我会考虑建立一个从那本书多谢你的帮助，我想尝试incor

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



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



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