WebRTC提供了非常精细化的管理。大家除了可以使用非常方便的上层接口来使用 WebRTC之外，还可以通过对 Sender/Receiver的控制，对网络流量进行控制。另外还可以通过 WebRTC统计数据进行网络质量分析。这些知识你都可以通过本章的内容学习到。…

13-1 【基础铺垫，学前有概念】RTPRReceiver发送器

image.png
image.png
RTCRtpReceiver.track：返回与当前RTCRtpReceiver实例关联的MediaStreamTrack
通过媒体轨属性可以获取当前轨的类型，是audio/video

RTCRtpReceiver.transport：返回接收到的接收者媒体轨的RTCDTLTransport实例
存放着媒体数据传输相关的属性，其中trnasport用于媒体数据的传输，媒体流通过底层的transport进行传输。transport可以进行复用，多个媒体轨复用一个transport传输！

RTCRtpReceiver.rtcpTransport：返回发送和接收RTCP的RTCDTLTransport实例
与rtcp传输相关的属性，比如传输抖动，丢包数量、延迟….。接受方进行统计，反馈给发送端，发送方根据这些数据进行网络质量的评估，适当调整网络流量的发送，这就是流量控制

https://www.cnblogs.com/ssyfj/p/14823861.html
image.png

13-2 【基础铺垫，学前有概念】RTPSender发送器

image.png

这里的setParameters可以设置最大码率等
image.png
image.png

13-3-4 【来点实战】传输速率的控制

image.png

room_bw.html

  1. <html>
  2.     <head>
  3.         <title>WebRTC PeerConnection</title>
  4.         <link href="./css/main.css" rel="stylesheet" />
  5.     </head>
  7.     <body>
  8.         <div>
  10.             <div>
  11.                 <button id="connserver">Connect Sig Server</button>
  12.                 <button id="leave" disabled>Leave</button>    
  13.             </div>
  15.             <div>
  16.                 <label>Bandwidth:</label>
  17.                 <select id = "bandwidth" disabled>
  18.                     <option value="unlimited" selected>unlimited</option>
  19.                     <option value="2000">2000</option>
  20.                     <option value="1000">1000</option>
  21.                     <option value="500">500</option>
  22.                     <option value="250">250</option>
  23.                     <option value="125">125</option>
  24.                 </select>
  25.                 kbps
  26.             </div>
  29.             <div id="preview">
  30.                 <div >
  31.                     <h2>Local:</h2>
  32.                     <video id="localvideo" autoplay playsinline muted></video>
  33.                 </div>
  34.                 <div>
  35.                     <h2>Remote:</h2>
  36.                     <video id="remotevideo" autoplay playsinline></video>
  37.                 </div>
  39.             </div>
  41.         </div>
  43.         <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
  44.         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  45.         <script src="js/main_bw.js"></script>
  46.     </body>
  47. </html>

main_bw.js

  1. 'use strict'
  3. var localVideo = document.querySelector('video#localvideo');
  4. var remoteVideo = document.querySelector('video#remotevideo');
  6. var btnConn =  document.querySelector('button#connserver');
  7. var btnLeave = document.querySelector('button#leave');
  9. var offer = document.querySelector('textarea#offer');
  10. var answer = document.querySelector('textarea#answer');
  12. var shareDeskBox  = document.querySelector('input#shareDesk');
  14. var bandwidth = document.querySelector('select#bandwidth');
  16. var pcConfig = {
  17.   'iceServers': [{
  18.     'urls': 'turn:stun.al.learningrtc.cn:3478',
  19.     'credential': "mypasswd",
  20.     'username': "garrylea"
  21.   }]
  22. };
  24. var localStream = null;
  25. var remoteStream = null;
  27. var pc = null;
  29. var roomid;
  30. var socket = null;
  32. var offerdesc = null;
  33. var state = 'init';
  35. function sendMessage(roomid, data){
  37.     console.log('send message to other end', roomid, data);
  38.     if(!socket){
  39.         console.log('socket is null');
  40.     }
  41.     socket.emit('message', roomid, data);
  42. }
  44. function conn(){
  46.     socket = io.connect();
  48.     socket.on('joined', (roomid, id) => {
  49.         console.log('receive joined message!', roomid, id);
  50.         state = 'joined'
  52.         //如果是多人的话，第一个人不该在这里创建peerConnection
  53.         //都等到收到一个otherjoin时再创建
  54.         //所以，在这个消息里应该带当前房间的用户数
  55.         //
  56.         //create conn and bind media track
  57.         createPeerConnection();
  58.         bindTracks();
  60.         btnConn.disabled = true;
  61.         btnLeave.disabled = false;
  62.         console.log('receive joined message, state=', state);
  63.     });
  65.     socket.on('otherjoin', (roomid) => {
  66.         console.log('receive joined message:', roomid, state);
  68.         //如果是多人的话，每上来一个人都要创建一个新的 peerConnection
  69.         //
  70.         if(state === 'joined_unbind'){
  71.             createPeerConnection();
  72.             bindTracks();
  73.         }
  75.         state = 'joined_conn';
  76.         call();
  78.         console.log('receive other_join message, state=', state);
  79.     });
  81.     socket.on('full', (roomid, id) => {
  82.         console.log('receive full message', roomid, id);
  83.         socket.disconnect();
  84.         hangup();
  85.         closeLocalMedia();
  86.         state = 'leaved';
  87.         console.log('receive full message, state=', state);
  88.         alert('the room is full!');
  89.     });
  91.     socket.on('leaved', (roomid, id) => {
  92.         console.log('receive leaved message', roomid, id);
  93.         state='leaved'
  94.         socket.disconnect();
  95.         console.log('receive leaved message, state=', state);
  97.         btnConn.disabled = false;
  98.         btnLeave.disabled = true;
  99.     });
  101.     socket.on('bye', (room, id) => {
  102.         console.log('receive bye message', roomid, id);
  103.         //state = 'created';
  104.         //当是多人通话时，应该带上当前房间的用户数
  105.         //如果当前房间用户不小于 2, 则不用修改状态
  106.         //并且，关闭的应该是对应用户的peerconnection
  107.         //在客户端应该维护一张peerconnection表，它是
  108.         //一个key:value的格式，key=userid, value=peerconnection
  109.         state = 'joined_unbind';
  110.         hangup();
  111.         console.log('receive bye message, state=', state);
  112.     });
  114.     socket.on('disconnect', (socket) => {
  115.         console.log('receive disconnect message!', roomid);
  116.         if(!(state === 'leaved')){
  117.             hangup();
  118.             closeLocalMedia();
  120.         }
  121.         state = 'leaved';
  123.     });
  125.     socket.on('message', (roomid, data) => {
  126.         console.log('receive message!', roomid, data);
  128.         if(data === null || data === undefined){
  129.             console.error('the message is invalid!');
  130.             return;    
  131.         }
  133.         if(data.hasOwnProperty('type') && data.type === 'offer') {
  135.             pc.setRemoteDescription(new RTCSessionDescription(data));
  136.             //create answer
  137.             pc.createAnswer()
  138.                 .then(getAnswer)
  139.                 .catch(handleAnswerError);
  141.         }else if(data.hasOwnProperty('type') && data.type === 'answer'){
  142.             pc.setRemoteDescription(new RTCSessionDescription(data));
  143.             bandwidth.disabled = false;
  145.         }else if (data.hasOwnProperty('type') && data.type === 'candidate'){
  146.             var candidate = new RTCIceCandidate({
  147.                 sdpMLineIndex: data.label,
  148.                 candidate: data.candidate
  149.             });
  150.             pc.addIceCandidate(candidate)
  151.                 .then(()=>{
  152.                     console.log('Successed to add ice candidate');    
  153.                 })
  154.                 .catch(err=>{
  155.                     console.error(err);    
  156.                 });
  158.         }else{
  159.             console.log('the message is invalid!', data);
  161.         }
  163.     });
  166.     roomid = '111111'; 
  167.     socket.emit('join', roomid);
  169.     return true;
  170. }
  172. function connSignalServer(){
  174.     //开启本地视频
  175.     start();
  177.     return true;
  178. }
  180. function getMediaStream(stream){
  182.     localStream = stream;    
  183.     localVideo.srcObject = localStream;
  185.     //这个函数的位置特别重要，
  186.     //一定要放到getMediaStream之后再调用
  187.     //否则就会出现绑定失败的情况
  189.     //setup connection
  190.     conn();
  191. }
  193. function getDeskStream(stream){
  194.     localStream = stream;
  195. }
  197. function handleError(err){
  198.     console.error('Failed to get Media Stream!', err);
  199. }
  201. function shareDesk(){
  203.     if(IsPC()){
  204.         navigator.mediaDevices.getDisplayMedia({video: true})
  205.             .then(getDeskStream)
  206.             .catch(handleError);
  208.         return true;
  209.     }
  211.     return false;
  213. }
  215. function start(){
  217.     if(!navigator.mediaDevices ||
  218.         !navigator.mediaDevices.getUserMedia){
  219.         console.error('the getUserMedia is not supported!');
  220.         return;
  221.     }else {
  223.         var constraints = {
  224.             video: true,
  225.             audio: false 
  226.         }
  228.         navigator.mediaDevices.getUserMedia(constraints)
  229.                     .then(getMediaStream)
  230.                     .catch(handleError);
  231.     }
  233. }
  235. function getRemoteStream(e){
  236.     remoteStream = e.streams[0];
  237.     remoteVideo.srcObject = e.streams[0];
  238. }
  240. function handleOfferError(err){
  241.     console.error('Failed to create offer:', err);
  242. }
  244. function handleAnswerError(err){
  245.     console.error('Failed to create answer:', err);
  246. }
  248. function getAnswer(desc){
  249.     pc.setLocalDescription(desc);
  250.     bandwidth.disabled = false;
  252.     //send answer sdp
  253.     sendMessage(roomid, desc);
  254. }
  256. function getOffer(desc){
  257.     pc.setLocalDescription(desc);
  258.     offerdesc = desc;
  260.     //send offer sdp
  261.     sendMessage(roomid, offerdesc);    
  263. }
  265. function createPeerConnection(){
  267.     //如果是多人的话，在这里要创建一个新的连接.
  268.     //新创建好的要放到一个map表中。
  269.     //key=userid, value=peerconnection
  270.     console.log('create RTCPeerConnection!');
  271.     if(!pc){
  272.         pc = new RTCPeerConnection(pcConfig);
  274.         pc.onicecandidate = (e)=>{
  276.             if(e.candidate) {
  277.                 sendMessage(roomid, {
  278.                     type: 'candidate',
  279.                     label:event.candidate.sdpMLineIndex, 
  280.                     id:event.candidate.sdpMid, 
  281.                     candidate: event.candidate.candidate
  282.                 });
  283.             }else{
  284.                 console.log('this is the end candidate');
  285.             }
  286.         }
  288.         pc.ontrack = getRemoteStream;
  289.     }else {
  290.         console.log('the pc have be created!');
  291.     }
  293.     return;    
  294. }
  296. //绑定永远与 peerconnection在一起，
  297. //所以没必要再单独做成一个函数
  298. function bindTracks(){
  300.     console.log('bind tracks into RTCPeerConnection!');
  302.     if( pc === null && localStream === undefined) {
  303.         console.error('pc is null or undefined!');
  304.         return;
  305.     }
  307.     if(localStream === null && localStream === undefined) {
  308.         console.error('localstream is null or undefined!');
  309.         return;
  310.     }
  312.     //add all track into peer connection
  313.     localStream.getTracks().forEach((track)=>{
  314.         pc.addTrack(track, localStream);    
  315.     });
  317. }
  319. function call(){
  321.     if(state === 'joined_conn'){
  323.         var offerOptions = {
  324.             offerToRecieveAudio: 1,
  325.             offerToRecieveVideo: 1
  326.         }
  328.         pc.createOffer(offerOptions)
  329.             .then(getOffer)
  330.             .catch(handleOfferError);
  331.     }
  332. }
  334. function hangup(){
  336.     if(!pc) {
  337.         return;
  338.     }
  340.     offerdesc = null;
  342.     pc.close();
  343.     pc = null;
  345. }
  347. function closeLocalMedia(){
  349.     if(!(localStream === null || localStream === undefined)){
  350.         localStream.getTracks().forEach((track)=>{
  351.             track.stop();
  352.         });
  353.     }
  354.     localStream = null;
  355. }
  357. function leave() {
  359.     socket.emit('leave', roomid); //notify server
  361.     hangup();
  362.     closeLocalMedia();
  364.     btnConn.disabled = false;
  365.     btnLeave.disabled = true;
  366.     bandwidth.disabled = true;
  367. }
  369. function change_bw(){
  370.     bandwidth.disabled = true;
  371.     var bw = bandwidth.options[bandwidth.selectedIndex].value;
  373.     var vsender = null;
  374.     var senders = pc.getSenders();
  376.     //获取一个RTCRtpSender
  377.     senders.forEach(sender => {
  378.         if(sender && sender.track.kind === 'video'){
  379.             vsender = sender;
  380.         }
  381.     });
  383.     //获取RTCRtpSender参数，返回一个RTCRtpParameters对象
  384.     var parameters = vsender.getParameters();
  386.     if(!parameters.encodings){
  387.         parameters.encodings=[{}];    
  388.     }
  390.     //设置传输码率
  391.     if(bw === 'unlimited'){
  392.         delete parameters.encodings[0].maxBitrate;
  393.     }else{
  394.         parameters.encodings[0].maxBitrate = bw * 1000;    
  395.     }
  397.     //更新RTP传输的配置以及WebRTC连接上特定传出媒体轨的编码配置
  398.     vsender.setParameters(parameters)
  399.         .then(()=>{
  400.             bandwidth.disabled = false;    
  401.         })
  402.         .catch(err => {
  403.             console.error(err)
  404.         });
  406.     return;
  407. }
  410. btnConn.onclick = connSignalServer
  411. btnLeave.onclick = leave;
  412. bandwidth.onchange = change_bw;

效果

需要打开两个网页，然后都连接信号服务器，才能设置码率。
image.png

查看网络连接状态 chrome://webrtc-internals
image.png

旧的版本
image.png

13-5-6 【来点实战】WebRTC统计信息

index.html

  1. <html>
  2.     <head>
  3.         <title>WebRTC PeerConnection</title>
  4.         <link href="./css/main.css" rel="stylesheet" />
  5.     </head>
  7.     <body>
  8.         <div>
  10.             <div>
  11.                 <button id="connserver">Connect Sig Server</button>
  12.                 <button id="leave" disabled>Leave</button>    
  13.             </div>
  15.             <div>
  16.                 <label>BandWidth:</label>
  17.                 <select id="bandwidth" disabled>
  18.                     <option value="unlimited" selected>unlimited</option>
  19.                     <option value="2000">2000</option>
  20.                     <option value="1000">1000</option>
  21.                     <option value="500">500</option>
  22.                     <option value="250">250</option>
  23.                     <option value="125">125</option>
  24.                 </select>
  25.                 kbps
  26.             </div>
  29.             <div id="preview">
  30.                 <div >
  31.                     <h2>Local:</h2>
  32.                     <video id="localvideo" autoplay playsinline muted></video>
  33.                 </div>
  34.                 <div>
  35.                     <h2>Remote:</h2>
  36.                     <video id="remotevideo" autoplay playsinline></video>
  37.                 </div>
  39.             </div>
  41.             <div class="graph-container" id="bitrateGraph">
  42.                 <div>Bitrate</div>
  43.                 <canvas id="bitrateCanvas"></canvas>
  44.             </div>
  45.             <div class="graph-container" id="packetGraph">
  46.                 <div>Packets sent per second</div>
  47.                 <canvas id="packetCanvas"></canvas>
  48.             </div>
  50.         </div>
  52.         <script src="js/third_party/graph.js"></script>
  54.         <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
  55.         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  56.         <script src="js/main_bw.js"></script>
  57.     </body>
  58. </html>

main.js

  1. 'use strict'
  3. var localVideo = document.querySelector('video#localvideo');
  4. var remoteVideo = document.querySelector('video#remotevideo');
  6. var btnConn =  document.querySelector('button#connserver');
  7. var btnLeave = document.querySelector('button#leave');
  9. var optBw = document.querySelector('select#bandwidth');
  11. var bitrateGraph;
  12. var bitrateSeries;
  14. var packetGraph;
  15. var packetSeries;
  17. var lastResult;
  19. var pcConfig = {
  20.   'iceServers': [{
  21.     'urls': 'turn:stun.al.learningrtc.cn:3478',
  22.     'credential': "mypasswd",
  23.     'username': "garrylea"
  24.   }]
  25. };
  27. var localStream = null;
  28. var remoteStream = null;
  30. var pc = null;
  32. var roomid;
  33. var socket = null;
  35. var offerdesc = null;
  36. var state = 'init';
  38. function sendMessage(roomid, data){
  40.     console.log('send message to other end', roomid, data);
  41.     if(!socket){
  42.         console.log('socket is null');
  43.     }
  44.     socket.emit('message', roomid, data);
  45. }
  47. function conn(){
  49.     socket = io.connect();
  51.     socket.on('joined', (roomid, id) => {
  52.         console.log('receive joined message!', roomid, id);
  53.         state = 'joined'
  55.         //如果是多人的话，第一个人不该在这里创建peerConnection
  56.         //都等到收到一个otherjoin时再创建
  57.         //所以，在这个消息里应该带当前房间的用户数
  58.         //
  59.         //create conn and bind media track
  60.         createPeerConnection();
  61.         bindTracks();
  63.         btnConn.disabled = true;
  64.         btnLeave.disabled = false;
  65.         console.log('receive joined message, state=', state);
  66.     });
  68.     socket.on('otherjoin', (roomid) => {
  69.         console.log('receive joined message:', roomid, state);
  71.         //如果是多人的话，每上来一个人都要创建一个新的 peerConnection
  72.         //
  73.         if(state === 'joined_unbind'){
  74.             createPeerConnection();
  75.             bindTracks();
  76.         }
  78.         state = 'joined_conn';
  79.         call();
  81.         console.log('receive other_join message, state=', state);
  82.     });
  84.     socket.on('full', (roomid, id) => {
  85.         console.log('receive full message', roomid, id);
  86.         socket.disconnect();
  87.         hangup();
  88.         closeLocalMedia();
  89.         state = 'leaved';
  90.         console.log('receive full message, state=', state);
  91.         alert('the room is full!');
  92.     });
  94.     socket.on('leaved', (roomid, id) => {
  95.         console.log('receive leaved message', roomid, id);
  96.         state='leaved'
  97.         socket.disconnect();
  98.         console.log('receive leaved message, state=', state);
  100.         btnConn.disabled = false;
  101.         btnLeave.disabled = true;
  102.         optBw.disabled = true;
  103.     });
  105.     socket.on('bye', (room, id) => {
  106.         console.log('receive bye message', roomid, id);
  107.         //state = 'created';
  108.         //当是多人通话时，应该带上当前房间的用户数
  109.         //如果当前房间用户不小于 2, 则不用修改状态
  110.         //并且，关闭的应该是对应用户的peerconnection
  111.         //在客户端应该维护一张peerconnection表，它是
  112.         //一个key:value的格式，key=userid, value=peerconnection
  113.         state = 'joined_unbind';
  114.         hangup();
  115.         console.log('receive bye message, state=', state);
  116.     });
  118.     socket.on('disconnect', (socket) => {
  119.         console.log('receive disconnect message!', roomid);
  120.         if(!(state === 'leaved')){
  121.             hangup();
  122.             closeLocalMedia();
  124.         }
  125.         state = 'leaved';
  127.         btnConn.disabled = false;
  128.         btnLeave.disabled = true;
  129.         optBw.disabled = true;
  131.     });
  133.     socket.on('message', (roomid, data) => {
  134.         console.log('receive message!', roomid, data);
  136.         if(data === null || data === undefined){
  137.             console.error('the message is invalid!');
  138.             return;    
  139.         }
  141.         if(data.hasOwnProperty('type') && data.type === 'offer') {
  143.             pc.setRemoteDescription(new RTCSessionDescription(data));
  144.             //create answer
  145.             pc.createAnswer()
  146.                 .then(getAnswer)
  147.                 .catch(handleAnswerError);
  149.         }else if(data.hasOwnProperty('type') && data.type === 'answer'){
  150.             optBw.disabled = false
  151.             pc.setRemoteDescription(new RTCSessionDescription(data));
  153.         }else if (data.hasOwnProperty('type') && data.type === 'candidate'){
  154.             var candidate = new RTCIceCandidate({
  155.                 sdpMLineIndex: data.label,
  156.                 candidate: data.candidate
  157.             });
  158.             pc.addIceCandidate(candidate)
  159.                 .then(()=>{
  160.                     console.log('Successed to add ice candidate');    
  161.                 })
  162.                 .catch(err=>{
  163.                     console.error(err);    
  164.                 });
  166.         }else{
  167.             console.log('the message is invalid!', data);
  169.         }
  171.     });
  174.     roomid = '111111'; 
  175.     socket.emit('join', roomid);
  177.     return true;
  178. }
  180. function connSignalServer(){
  182.     //开启本地视频
  183.     start();
  185.     return true;
  186. }
  188. function getMediaStream(stream){
  190.     localStream = stream;    
  191.     localVideo.srcObject = localStream;
  193.     //这个函数的位置特别重要，
  194.     //一定要放到getMediaStream之后再调用
  195.     //否则就会出现绑定失败的情况
  197.     //setup connection
  198.     conn();
  200.     bitrateSeries = new TimelineDataSeries();
  201.     bitrateGraph = new TimelineGraphView('bitrateGraph', 'bitrateCanvas');
  202.     bitrateGraph.updateEndDate();
  204.     packetSeries = new TimelineDataSeries();
  205.     packetGraph = new TimelineGraphView('packetGraph', 'packetCanvas');
  206.     packetGraph.updateEndDate();
  207. }
  209. function getDeskStream(stream){
  210.     localStream = stream;
  211. }
  213. function handleError(err){
  214.     console.error('Failed to get Media Stream!', err);
  215. }
  217. function shareDesk(){
  219.     if(IsPC()){
  220.         navigator.mediaDevices.getDisplayMedia({video: true})
  221.             .then(getDeskStream)
  222.             .catch(handleError);
  224.         return true;
  225.     }
  227.     return false;
  229. }
  231. function start(){
  233.     if(!navigator.mediaDevices ||
  234.         !navigator.mediaDevices.getUserMedia){
  235.         console.error('the getUserMedia is not supported!');
  236.         return;
  237.     }else {
  239.         var constraints = {
  240.             video: true,
  241.             audio: false 
  242.         }
  244.         navigator.mediaDevices.getUserMedia(constraints)
  245.                     .then(getMediaStream)
  246.                     .catch(handleError);
  247.     }
  249. }
  251. function getRemoteStream(e){
  252.     remoteStream = e.streams[0];
  253.     remoteVideo.srcObject = e.streams[0];
  254. }
  256. function handleOfferError(err){
  257.     console.error('Failed to create offer:', err);
  258. }
  260. function handleAnswerError(err){
  261.     console.error('Failed to create answer:', err);
  262. }
  264. function getAnswer(desc){
  265.     pc.setLocalDescription(desc);
  267.     optBw.disabled = false;
  268.     //send answer sdp
  269.     sendMessage(roomid, desc);
  270. }
  272. function getOffer(desc){
  273.     pc.setLocalDescription(desc);
  274.     offerdesc = desc;
  276.     //send offer sdp
  277.     sendMessage(roomid, offerdesc);    
  279. }
  281. function createPeerConnection(){
  283.     //如果是多人的话，在这里要创建一个新的连接.
  284.     //新创建好的要放到一个map表中。
  285.     //key=userid, value=peerconnection
  286.     console.log('create RTCPeerConnection!');
  287.     if(!pc){
  288.         pc = new RTCPeerConnection(pcConfig);
  290.         pc.onicecandidate = (e)=>{
  292.             if(e.candidate) {
  293.                 sendMessage(roomid, {
  294.                     type: 'candidate',
  295.                     label:event.candidate.sdpMLineIndex, 
  296.                     id:event.candidate.sdpMid, 
  297.                     candidate: event.candidate.candidate
  298.                 });
  299.             }else{
  300.                 console.log('this is the end candidate');
  301.             }
  302.         }
  304.         pc.ontrack = getRemoteStream;
  305.     }else {
  306.         console.log('the pc have be created!');
  307.     }
  309.     return;    
  310. }
  312. //绑定永远与 peerconnection在一起，
  313. //所以没必要再单独做成一个函数
  314. function bindTracks(){
  316.     console.log('bind tracks into RTCPeerConnection!');
  318.     if( pc === null && localStream === undefined) {
  319.         console.error('pc is null or undefined!');
  320.         return;
  321.     }
  323.     if(localStream === null && localStream === undefined) {
  324.         console.error('localstream is null or undefined!');
  325.         return;
  326.     }
  328.     //add all track into peer connection
  329.     localStream.getTracks().forEach((track)=>{
  330.         pc.addTrack(track, localStream);    
  331.     });
  333. }
  335. function call(){
  337.     if(state === 'joined_conn'){
  339.         var offerOptions = {
  340.             offerToRecieveAudio: 1,
  341.             offerToRecieveVideo: 1
  342.         }
  344.         pc.createOffer(offerOptions)
  345.             .then(getOffer)
  346.             .catch(handleOfferError);
  347.     }
  348. }
  350. function hangup(){
  352.     if(!pc) {
  353.         return;
  354.     }
  356.     offerdesc = null;
  358.     pc.close();
  359.     pc = null;
  361. }
  363. function closeLocalMedia(){
  365.     if(!(localStream === null || localStream === undefined)){
  366.         localStream.getTracks().forEach((track)=>{
  367.             track.stop();
  368.         });
  369.     }
  370.     localStream = null;
  371. }
  373. function leave() {
  375.     socket.emit('leave', roomid); //notify server
  377.     hangup();
  378.     closeLocalMedia();
  380.     btnConn.disabled = false;
  381.     btnLeave.disabled = true;
  382.     optBw.disabled = true;
  383. }
  385. function chang_bw()
  386. {
  387.     optBw.disabled = true;
  388.     var bw = optBw.options[optBw.selectedIndex].value;
  390.     var vsender = null;
  391.     var senders = pc.getSenders();
  393.     senders.forEach( sender => {
  394.         if(sender && sender.track.kind === 'video'){
  395.             vsender = sender;    
  396.         }    
  397.     });
  399.     var parameters = vsender.getParameters();
  400.     if(!parameters.encodings){
  401.         return;    
  402.     }
  404.     if(bw === 'unlimited'){
  405.         return;    
  406.     }
  408.     parameters.encodings[0].maxBitrate = bw * 1000;
  410.     vsender.setParameters(parameters)
  411.         .then(()=>{
  412.             optBw.disabled = false;
  413.             console.log('Successed to set parameters!');
  414.         })
  415.         .catch(err => {
  416.             console.error(err);
  417.         })
  418. }
  420. // query getStats every second
  421. window.setInterval(() => {
  422.   if (!pc) {
  423.     return;
  424.   }
  425.   const sender = pc.getSenders()[0];
  426.   if (!sender) {
  427.     return;
  428.   }
  429.   sender.getStats().then(res => {
  430.     res.forEach(report => {
  431.       let bytes;
  432.       let packets;
  433.       if (report.type === 'outbound-rtp') {
  434.         if (report.isRemote) {
  435.           return;
  436.         }
  437.         const now = report.timestamp;
  438.         bytes = report.bytesSent;
  439.         packets = report.packetsSent;
  440.         if (lastResult && lastResult.has(report.id)) {
  441.           // calculate bitrate
  442.           const bitrate = 8 * (bytes - lastResult.get(report.id).bytesSent) /
  443.             (now - lastResult.get(report.id).timestamp);
  445.           // append to chart
  446.           bitrateSeries.addPoint(now, bitrate);
  447.           bitrateGraph.setDataSeries([bitrateSeries]);
  448.           bitrateGraph.updateEndDate();
  450.           // calculate number of packets and append to chart
  451.           packetSeries.addPoint(now, packets -
  452.             lastResult.get(report.id).packetsSent);
  453.           packetGraph.setDataSeries([packetSeries]);
  454.           packetGraph.updateEndDate();
  455.         }
  456.       }
  457.     });
  458.     lastResult = res;
  459.   });
  460. }, 1000);
  462. btnConn.onclick = connSignalServer
  463. btnLeave.onclick = leave;
  464. optBw.onchange = chang_bw;

重点代码部分

  1. // query getStats every second
  2. window.setInterval(() => {
  3.   if (!pc) {
  4.     return;
  5.   }
  6.   const sender = pc.getSenders()[0];
  7.   if (!sender) {
  8.     return;
  9.   }
  10.   sender.getStats().then(res => {
  11.     res.forEach(report => {
  12.       let bytes;
  13.       let packets;
  14.       if (report.type === 'outbound-rtp') {
  15.         if (report.isRemote) {
  16.           return;
  17.         }
  18.         const now = report.timestamp;
  19.         bytes = report.bytesSent;
  20.         packets = report.packetsSent;
  21.         if (lastResult && lastResult.has(report.id)) {
  22.           // calculate bitrate
  23.           const bitrate = 8 * (bytes - lastResult.get(report.id).bytesSent) /
  24.             (now - lastResult.get(report.id).timestamp);
  26.           // append to chart
  27.           bitrateSeries.addPoint(now, bitrate);
  28.           bitrateGraph.setDataSeries([bitrateSeries]);
  29.           bitrateGraph.updateEndDate();
  31.           // calculate number of packets and append to chart
  32.           packetSeries.addPoint(now, packets -
  33.             lastResult.get(report.id).packetsSent);
  34.           packetGraph.setDataSeries([packetSeries]);
  35.           packetGraph.updateEndDate();
  36.         }
  37.       }
  38.     });
  39.     lastResult = res;
  40.   });
  41. }, 1000);

这里依赖了graph.js绘制码率图。

效果

初始化效果
image.png

连接后的效果

image.png
这里是设置了码率为1000kbps.显示码率，和每秒的包大小。

image.png

如果同时传输视频和音频，则在统计时，需要这么做

  1. window.setInterval(() => {
  2.   if (!pc) {
  3.     return;
  4.   }
  5.   const senders = pc.getSenders();
  6.   if (!senders) {
  7.     return;
  8.   }
  10.   var vsender;
  11.   senders.forEach(sender => {
  12.     if(sender && sender.track.kind === 'video')
  13.     { vsender = sender;}
  14.   });
  16.   if(!vsender){
  17.     return;
  18.   }
  20.   vsender.getStats().then(res => {
  21.    //******省略

相关代码

13chapter.zip