Tided up how latency stats are displayed in stats panel

Author: lukehb

Extras/FrontendTests/tests/peerconnection.spec.ts

@@ -120,7 +120,7 @@ test('Test latency calculation', {
     let latencyInfo: LatencyInfo = await page.evaluate(() => {
         return new Promise((resolve) => {
             window.pixelStreaming.addEventListener("latencyCalculated", (e: LatencyCalculatedEvent) => {
-                if(e.data.latencyInfo && e.data.latencyInfo.senderLatencyMs) {
+                if(e.data.latencyInfo && e.data.latencyInfo.senderLatencyMs && e.data.latencyInfo.rttMs) {
                     resolve(e.data.latencyInfo);
                 }
             });

Extras/JSStreamer/src/streamer.ts

@@ -184,7 +184,7 @@ export class Streamer extends EventEmitter {
                     }
                     const tranceiverOptions: RTCRtpTransceiverInit = {
                         streams: [this.localStream],
-                        direction: 'sendonly',
+                        direction: 'sendrecv',
                         sendEncodings: [
                             {
                                 maxBitrate: this.settings.WebRTC.MaxBitrate,
@@ -224,8 +224,10 @@ export class Streamer extends EventEmitter {
                 dataChannel: dataChannel
             };
 
+            const offerOptions: RTCOfferOptions = { offerToReceiveAudio: true, offerToReceiveVideo: true }
+
             peerConnection
-                .createOffer()
+                .createOffer(offerOptions)
                 .then((offer) => {
 
                     if(offer.sdp == undefined) {

Frontend/library/src/PeerConnectionController/AggregatedStats.ts

@@ -5,7 +5,7 @@ import { InboundTrackStats } from './InboundTrackStats';
 import { DataChannelStats } from './DataChannelStats';
 import { CandidateStat } from './CandidateStat';
 import { CandidatePairStats } from './CandidatePairStats';
-import { OutBoundRTPStats, OutBoundVideoStats } from './OutBoundRTPStats';
+import { RemoteOutboundRTPStats, OutboundRTPStats } from './OutBoundRTPStats';
 import { SessionStats } from './SessionStats';
 import { StreamStats } from './StreamStats';
 import { CodecStats } from './CodecStats';
@@ -19,10 +19,13 @@ export class AggregatedStats {
     inboundVideoStats: InboundVideoStats;
     inboundAudioStats: InboundAudioStats;
     candidatePairs: Array<CandidatePairStats>;
-    DataChannelStats: DataChannelStats;
+    datachannelStats: DataChannelStats;
     localCandidates: Array<CandidateStat>;
     remoteCandidates: Array<CandidateStat>;
-    outBoundVideoStats: OutBoundVideoStats;
+    outboundVideoStats: OutboundRTPStats;
+    outboundAudioStats: OutboundRTPStats;
+    remoteOutboundVideoStats: RemoteOutboundRTPStats;
+    remoteOutboundAudioStats: RemoteOutboundRTPStats;
     sessionStats: SessionStats;
     streamStats: StreamStats;
     codecs: Map<string, CodecStats>;
@@ -31,8 +34,11 @@ export class AggregatedStats {
     constructor() {
         this.inboundVideoStats = new InboundVideoStats();
         this.inboundAudioStats = new InboundAudioStats();
-        this.DataChannelStats = new DataChannelStats();
-        this.outBoundVideoStats = new OutBoundVideoStats();
+        this.datachannelStats = new DataChannelStats();
+        this.outboundVideoStats = new OutboundRTPStats();
+        this.outboundAudioStats = new OutboundRTPStats();
+        this.remoteOutboundAudioStats = new RemoteOutboundRTPStats();
+        this.remoteOutboundVideoStats = new RemoteOutboundRTPStats();
         this.sessionStats = new SessionStats();
         this.streamStats = new StreamStats();
         this.codecs = new Map<string, CodecStats>();
@@ -63,7 +69,7 @@ export class AggregatedStats {
                     this.handleDataChannel(stat);
                     break;
                 case 'inbound-rtp':
-                    this.handleInBoundRTP(stat);
+                    this.handleInboundRTP(stat);
                     break;
                 case 'local-candidate':
                     this.handleLocalCandidate(stat);
@@ -73,6 +79,7 @@ export class AggregatedStats {
                 case 'media-playout':
                     break;
                 case 'outbound-rtp':
+                    this.handleLocalOutbound(stat);
                     break;
                 case 'peer-connection':
                     break;
@@ -82,7 +89,7 @@ export class AggregatedStats {
                 case 'remote-inbound-rtp':
                     break;
                 case 'remote-outbound-rtp':
-                    this.handleRemoteOutBound(stat);
+                    this.handleRemoteOutbound(stat);
                     break;
                 case 'track':
                     this.handleTrack(stat);
@@ -124,16 +131,16 @@ export class AggregatedStats {
      * @param stat - the stats coming in from the data channel
      */
     handleDataChannel(stat: DataChannelStats) {
-        this.DataChannelStats.bytesReceived = stat.bytesReceived;
-        this.DataChannelStats.bytesSent = stat.bytesSent;
-        this.DataChannelStats.dataChannelIdentifier = stat.dataChannelIdentifier;
-        this.DataChannelStats.id = stat.id;
-        this.DataChannelStats.label = stat.label;
-        this.DataChannelStats.messagesReceived = stat.messagesReceived;
-        this.DataChannelStats.messagesSent = stat.messagesSent;
-        this.DataChannelStats.protocol = stat.protocol;
-        this.DataChannelStats.state = stat.state;
-        this.DataChannelStats.timestamp = stat.timestamp;
+        this.datachannelStats.bytesReceived = stat.bytesReceived;
+        this.datachannelStats.bytesSent = stat.bytesSent;
+        this.datachannelStats.dataChannelIdentifier = stat.dataChannelIdentifier;
+        this.datachannelStats.id = stat.id;
+        this.datachannelStats.label = stat.label;
+        this.datachannelStats.messagesReceived = stat.messagesReceived;
+        this.datachannelStats.messagesSent = stat.messagesSent;
+        this.datachannelStats.protocol = stat.protocol;
+        this.datachannelStats.state = stat.state;
+        this.datachannelStats.timestamp = stat.timestamp;
     }
 
     /**
@@ -158,23 +165,23 @@ export class AggregatedStats {
      * @param stat - ice candidate stats
      */
     handleRemoteCandidate(stat: CandidateStat) {
-        const RemoteCandidate = new CandidateStat();
-        RemoteCandidate.label = 'remote-candidate';
-        RemoteCandidate.address = stat.address;
-        RemoteCandidate.port = stat.port;
-        RemoteCandidate.protocol = stat.protocol;
-        RemoteCandidate.id = stat.id;
-        RemoteCandidate.candidateType = stat.candidateType;
-        RemoteCandidate.relayProtocol = stat.relayProtocol;
-        RemoteCandidate.transportId = stat.transportId;
-        this.remoteCandidates.push(RemoteCandidate);
+        const remoteCandidate = new CandidateStat();
+        remoteCandidate.label = 'remote-candidate';
+        remoteCandidate.address = stat.address;
+        remoteCandidate.port = stat.port;
+        remoteCandidate.protocol = stat.protocol;
+        remoteCandidate.id = stat.id;
+        remoteCandidate.candidateType = stat.candidateType;
+        remoteCandidate.relayProtocol = stat.relayProtocol;
+        remoteCandidate.transportId = stat.transportId;
+        this.remoteCandidates.push(remoteCandidate);
     }
 
     /**
      * Process the Inbound RTP Audio and Video Data
      * @param stat - inbound rtp stats
      */
-    handleInBoundRTP(stat: InboundRTPStats) {
+    handleInboundRTP(stat: InboundRTPStats) {
         switch (stat.kind) {
             case 'video':
                 // Calculate bitrate between stat updates
@@ -215,25 +222,63 @@ export class AggregatedStats {
     }
 
     /**
-     * Process the outbound RTP Audio and Video Data
-     * @param stat - remote outbound stats
+     * Process the "local" outbound RTP Audio and Video stats.
+     * @param stat - local outbound rtp stats
      */
-    handleRemoteOutBound(stat: OutBoundRTPStats) {
-        switch (stat.kind) {
-            case 'video':
-                this.outBoundVideoStats.bytesSent = stat.bytesSent;
-                this.outBoundVideoStats.id = stat.id;
-                this.outBoundVideoStats.localId = stat.localId;
-                this.outBoundVideoStats.packetsSent = stat.packetsSent;
-                this.outBoundVideoStats.remoteTimestamp = stat.remoteTimestamp;
-                this.outBoundVideoStats.timestamp = stat.timestamp;
-                break;
-            case 'audio':
-                break;
+    handleLocalOutbound(stat: OutboundRTPStats) {
+        const localOutboundStats: OutboundRTPStats =
+            stat.kind === 'audio' ? this.outboundAudioStats : this.outboundVideoStats;
+        localOutboundStats.active = stat.active;
+        localOutboundStats.codecId = stat.codecId;
+        localOutboundStats.bytesSent = stat.bytesSent;
+        localOutboundStats.frameHeight = stat.frameHeight;
+        localOutboundStats.frameWidth = stat.frameWidth;
+        localOutboundStats.framesEncoded = stat.framesEncoded;
+        localOutboundStats.framesPerSecond = stat.framesPerSecond;
+        localOutboundStats.headerBytesSent = stat.headerBytesSent;
+        localOutboundStats.id = stat.id;
+        localOutboundStats.keyFramesEncoded = stat.keyFramesEncoded;
+        localOutboundStats.kind = stat.kind;
+        localOutboundStats.mediaSourceId = stat.mediaSourceId;
+        localOutboundStats.mid = stat.mid;
+        localOutboundStats.nackCount = stat.nackCount;
+        localOutboundStats.packetsSent = stat.packetsSent;
+        localOutboundStats.qpSum = stat.qpSum;
+        localOutboundStats.qualityLimitationDurations = stat.qualityLimitationDurations;
+        localOutboundStats.qualityLimitationReason = stat.qualityLimitationReason;
+        localOutboundStats.remoteId = stat.remoteId;
+        localOutboundStats.retransmittedBytesSent = stat.retransmittedBytesSent;
+        localOutboundStats.rid = stat.rid;
+        localOutboundStats.scalabilityMode = stat.scalabilityMode;
+        localOutboundStats.ssrc = stat.ssrc;
+        localOutboundStats.targetBitrate = stat.targetBitrate;
+        localOutboundStats.timestamp = stat.timestamp;
+        localOutboundStats.totalEncodeTime = stat.totalEncodeTime;
+        localOutboundStats.totalEncodeBytesTarget = stat.totalEncodeBytesTarget;
+        localOutboundStats.totalPacketSendDelay = stat.totalPacketSendDelay;
+        localOutboundStats.transportId = stat.transportId;
+    }
 
-            default:
-                break;
-        }
+    /**
+     * Process the "remote" outbound RTP Audio and Video stats.
+     * @param stat - remote outbound rtp stats
+     */
+    handleRemoteOutbound(stat: RemoteOutboundRTPStats) {
+        const remoteOutboundStats: RemoteOutboundRTPStats =
+            stat.kind === 'audio' ? this.remoteOutboundAudioStats : this.remoteOutboundVideoStats;
+        remoteOutboundStats.bytesSent = stat.bytesSent;
+        remoteOutboundStats.codecId = stat.codecId;
+        remoteOutboundStats.id = stat.id;
+        remoteOutboundStats.kind = stat.kind;
+        remoteOutboundStats.localId = stat.localId;
+        remoteOutboundStats.packetsSent = stat.packetsSent;
+        remoteOutboundStats.remoteTimestamp = stat.remoteTimestamp;
+        remoteOutboundStats.reportsSent = stat.reportsSent;
+        remoteOutboundStats.roundTripTimeMeasurements = stat.roundTripTimeMeasurements;
+        remoteOutboundStats.ssrc = stat.ssrc;
+        remoteOutboundStats.timestamp = stat.timestamp;
+        remoteOutboundStats.totalRoundTripTime = stat.totalRoundTripTime;
+        remoteOutboundStats.transportId = stat.transportId;
     }
 
     /**