本章讲解端对端传输如何进行媒体能力的协商，以及其处理的基本流程。这部分知识非常重要，了解了这部分知识基本上就撑握了WebRTC的一半，它们是实现真正的 1V1实时互动直播的基础。

10-1 【必备原理】媒体能力协商过程一

图片.png

图片.png
图片.png
Bob提前准备好没有音视频流的Answer，只是建立连接。
图片.png

10-2 【必备原理】媒体能力协商过程二

图片.png
图片.png
图片.png
图片.png
图片.png

图片.png
图片.png
图片.png
图片.png

10-3 【必备原理】1:1连接的基本流程

图片.png
上面的
媒体协商部分Offer-Answer
候选者的连接与检测部分Candidate
媒体数据流的通信部分 Stream

10-4-5 【来点实战】本机内的1:1音视频互通

1）效果

图片.png

2）代码

index.html

  1. <html>
  2.     <head>
  3.         <title>RTCPeerConnection</title>
  4.         <link rel="stylesheet" href="css/main.css"/>
  5.     </head>
  6.     <body>
  7.         <div>
  8.             <video id="localVideo" autoplay playsinline></video>
  9.             <video id="remoteVideo" autoplay playsinline></video>
  10.             <div>
  11.                 <button id="start">start</button>
  12.                 <button id="call">call</button>
  13.                 <button id="hangup">hang up</button>
  14.             </div>
  15.         </div>
  17.         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  18.         <script src="./js/main.js"></script>
  20.     </body>
  21. </html>

main.js

  1. 'use strict'
  3. var localVideo = document.querySelector('video#localVideo');
  4. var remoteVideo = document.querySelector('video#remoteVideo');
  5. var btnStart = document.querySelector('button#start');
  6. var btnCall = document.querySelector('button#call');
  7. var btnHangUp= document.querySelector('button#hangup');
  10. var localStream;
  11. var pc1;
  12. var pc2;
  15. function gotMediaStream(stream){
  16.     localVideo.srcObject = stream;
  17.     localStream = stream;
  18. }
  20. function handleError(err){
  21.     console.log("Failed to call getUserMedia", err);
  22. }
  24. //开始建立连接
  25. function start(){
  26.     var constraints = {
  27.         video: true,
  28.         audio: false 
  29.     }
  31.     if(!navigator.mediaDevices ||
  32.         !navigator.mediaDevices.getUserMedia){
  33.         return;
  34.     }else {
  35.         navigator.mediaDevices.getUserMedia(constraints)
  36.                     .then(gotMediaStream)
  37.                     .catch(handleError);
  38.     }
  40. }
  43. function gotAnswerDescription(desc){
  44.     pc2.setLocalDescription(desc);
  46.     //send sdp to caller
  47.     //recieve sdp from callee
  49.     pc1.setRemoteDescription(desc);
  51. }
  53. function gotLocalDescription(desc){
  54.     pc1.setLocalDescription(desc);
  56.     //send sdp to callee
  58.     //receive sdp from caller 
  59.      pc2.setRemoteDescription(desc);    
  60.     pc2.createAnswer().then(gotAnswerDescription)
  61.              .catch(handleError);
  62. }
  65. function gotRemoteStream(e){
  67.     if(remoteVideo.srcObject !== e.streams[0]){
  68.         remoteVideo.srcObject = e.streams[0];
  69.     }
  70. }
  72. //呼叫函数
  73. function call(){
  74.     if(!localStream)
  75.     {
  76.         console.log('no start');
  77.         return;
  78.     }
  80.     var offerOptions = {
  81.         offerToReceiveAudio: 0,
  82.         offerToReceiveVideo: 1 
  83.     }
  85.     if(!pc1)
  86.         pc1 = new RTCPeerConnection();
  88.     pc1.onicecandidate = (e) => {
  90.         // send candidate to peer
  91.         // receive candidate from peer
  93.         pc2.addIceCandidate(e.candidate)
  94.             .catch(handleError);
  95.         console.log('pc1 ICE candidate:', e.candidate);
  96.     }
  98.     pc1.iceconnectionstatechange = (e) => {
  99.         console.log(`pc1 ICE state: ${pc.iceConnectionState}`);
  100.         console.log('ICE state change event: ', e);
  101.     }
  103.     if(!pc2)
  104.         pc2 = new RTCPeerConnection();
  105.     pc2.onicecandidate = (e)=> {
  107.         // send candidate to peer
  108.         // receive candidate from peer
  110.         pc1.addIceCandidate(e.candidate)
  111.             .catch(handleError);
  112.         console.log('pc2 ICE candidate:', e.candidate);
  113.     }
  115.     pc2.iceconnectionstatechange = (e) => {
  116.         console.log(`pc2 ICE state: ${pc.iceConnectionState}`);
  117.         console.log('ICE state change event: ', e);
  118.     }
  120.     pc2.ontrack = gotRemoteStream;
  122.     //add Stream to caller
  123.     localStream.getTracks().forEach((track)=>{
  124.         pc1.addTrack(track, localStream);
  125.     });
  127.     pc1.createOffer(offerOptions)
  128.         .then(gotLocalDescription)
  129.         .catch(handleError);
  131. }
  134. function hangup(){
  135.     if(pc1)
  136.         pc1.close();
  137.     if(pc2)
  138.         pc2.close();
  139.     pc1 = null;
  140.     pc2 = null;
  142. }
  144. btnStart.onclick = start;
  145. btnCall.onclick = call;
  146. btnHangUp.onclick = hangup;

server.js

使用第八章的server.js

  1. 'use strict'
  3. var log4js = require('log4js');
  4. var http = require('http');
  5. var https = require('https');
  6. var fs = require('fs');
  7. var socketIo = require('socket.io');
  9. var express = require('express');
  10. var serveIndex = require('serve-index');
  12. var USERCOUNT = 3;
  14. log4js.configure({
  15.     appenders: {
  16.         file: {
  17.             type: 'file',
  18.             filename: 'app.log',
  19.             layout: {
  20.                 type: 'pattern',
  21.                 pattern: '%r %p - %m',
  22.             }
  23.         }
  24.     },
  25.     categories: {
  26.        default: {
  27.           appenders: ['file'],
  28.           level: 'debug'
  29.        }
  30.     }
  31. });
  33. var logger = log4js.getLogger();
  35. var app = express();
  36. app.use(serveIndex('./public'));
  37. app.use(express.static('./public'));
  41. //http server
  42. var http_server = http.createServer(app);
  43. http_server.listen(80, '0.0.0.0');
  45. var options = {
  46.     key : fs.readFileSync('./cert/1557605_www.learningrtc.cn.key'),
  47.     cert: fs.readFileSync('./cert/1557605_www.learningrtc.cn.pem')
  48. }
  50. //https server
  51. var https_server = https.createServer(options, app);
  52. var io = socketIo.listen(https_server);
  54. io.sockets.on('connection', (socket)=> {
  56.     socket.on('message', (room, data)=>{
  57.         socket.to(room).emit('message',room, data);
  58.     });
  60.     socket.on('join', (room)=>{
  61.         socket.join(room);
  62.         var myRoom = io.sockets.adapter.rooms[room]; 
  63.         var users = (myRoom)? Object.keys(myRoom.sockets).length : 0;
  64.         logger.debug('the user number of room is: ' + users);
  66.         if(users < USERCOUNT){
  67.             socket.emit('joined', room, socket.id); //发给除自己之外的房间内的所有人
  68.             if(users > 1){
  69.                 socket.to(room).emit('otherjoin', room, socket.id);
  70.             }
  72.         }else{
  73.             socket.leave(room);    
  74.             socket.emit('full', room, socket.id);
  75.         }
  76.         //socket.emit('joined', room, socket.id); //发给自己
  77.         //socket.broadcast.emit('joined', room, socket.id); //发给除自己之外的这个节点上的所有人
  78.         //io.in(room).emit('joined', room, socket.id); //发给房间内的所有人
  79.     });
  81.     socket.on('leave', (room)=>{
  82.         var myRoom = io.sockets.adapter.rooms[room]; 
  83.         var users = (myRoom)? Object.keys(myRoom.sockets).length : 0;
  84.         logger.debug('the user number of room is: ' + (users-1));
  85.         //socket.emit('leaved', room, socket.id);
  86.         //socket.broadcast.emit('leaved', room, socket.id);
  87.         socket.to(room).emit('bye', room, socket.id);
  88.         socket.emit('leaved', room, socket.id);
  89.         //io.in(room).emit('leaved', room, socket.id);
  90.     });
  92. });
  94. https_server.listen(443, '0.0.0.0');

10-6 【来点实战】获取 offer/answer 创建的 SDP

图片.png

图片.png

1）效果

图片.png

2）代码

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>
  11.             <div>
  12.                 <button id="start">Start</button>    
  13.                 <button id="call" disabled>Call</button>    
  14.                 <button id="hangup" disabled>HangUp</button>    
  15.             </div>
  17.             <div id="preview">
  18.                 <div >
  19.                     <h2>Local:</h2>
  20.                     <video id="localvideo" autoplay playsinline></video>
  21.                     <h2>Local SDP:</h2>
  22.                     <textarea id="offer"></textarea>
  23.                 </div>
  24.                 <div>
  25.                     <h2>Remote:</h2>
  26.                     <video id="remotevideo" autoplay playsinline></video>
  27.                     <h2>Remote SDP:</h2>
  28.                     <textarea id="answer"></textarea>
  29.                 </div>
  30.             </div>
  31.         </div>
  33.         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  34.         <script src="js/main.js"></script>
  35.     </body>
  36. </html>

main.js

  1. 'use strict'
  3. var localVideo = document.querySelector('video#localvideo');
  4. var remoteVideo = document.querySelector('video#remotevideo');
  6. var btnStart = document.querySelector('button#start');
  7. var btnCall = document.querySelector('button#call');
  8. var btnHangup = document.querySelector('button#hangup');
  10. var offerSdpTextarea = document.querySelector('textarea#offer');
  11. var answerSdpTextarea = document.querySelector('textarea#answer');
  13. var localStream;
  14. var pc1;
  15. var pc2;
  17. function getMediaStream(stream){
  18.     localVideo.srcObject = stream;
  19.     localStream = stream;
  20. }
  22. function handleError(err){
  23.     console.error('Failed to get Media Stream!', err);
  24. }
  26. //开始建立连接
  27. function start(){
  29.     if(!navigator.mediaDevices ||
  30.         !navigator.mediaDevices.getUserMedia){
  31.         console.error('the getUserMedia is not supported!');
  32.         return;
  33.     }else {
  34.         var constraints = {
  35.             video: true,
  36.             audio: false
  37.         }
  38.         navigator.mediaDevices.getUserMedia(constraints)
  39.                     .then(getMediaStream)
  40.                     .catch(handleError);
  42.         btnStart.disabled = true;
  43.         btnCall.disabled = false;
  44.         btnHangup.disabled = true;
  45.     }
  46. }
  48. function getRemoteStream(e){
  49.     remoteVideo.srcObject = e.streams[0];
  50. }
  52. function handleOfferError(err){
  53.     console.error('Failed to create offer:', err);
  54. }
  56. function handleAnswerError(err){
  57.     console.error('Failed to create answer:', err);
  58. }
  60. function getAnswer(desc){
  61.     pc2.setLocalDescription(desc);
  62.     answerSdpTextarea.value = desc.sdp
  64.     //send desc to signal
  65.     //receive desc from signal
  67.     pc1.setRemoteDescription(desc);
  68. }
  70. function getOffer(desc){
  71.     pc1.setLocalDescription(desc);
  72.     offerSdpTextarea.value = desc.sdp
  74.     //send desc to signal
  75.     //receive desc from signal
  77.     pc2.setRemoteDescription(desc);
  79.     pc2.createAnswer()
  80.         .then(getAnswer)
  81.         .catch(handleAnswerError);
  83. }
  85. function call(){
  86.     if(!localStream)
  87.     {
  88.         console.log('no start');
  89.         return;
  90.     }
  92.     if(!pc1)
  93.         pc1 = new RTCPeerConnection();
  94.     if(!pc2)
  95.         pc2 = new RTCPeerConnection();
  97.     pc1.onicecandidate = (e)=>{
  98.         pc2.addIceCandidate(e.candidate);    
  99.     }
  101.     pc2.onicecandidate = (e)=>{
  102.         pc1.addIceCandidate(e.candidate);    
  103.     }
  105.     pc2.ontrack = getRemoteStream;
  107.     localStream.getTracks().forEach((track)=>{
  108.         pc1.addTrack(track, localStream);    
  109.     });
  111.     var offerOptions = {
  112.         offerToRecieveAudio: 0,
  113.         offerToRecieveVideo: 1
  114.     }
  116.     pc1.createOffer(offerOptions)
  117.         .then(getOffer)
  118.         .catch(handleOfferError);
  120.     btnCall.disabled = true;
  121.     btnHangup.disabled = false;
  122. }
  124. function hangup(){
  125.     if(pc1)
  126.         pc1.close();
  127.     if(pc2)
  128.         pc2.close();
  129.     pc1 = null;
  130.     pc2 = null;
  132.     btnCall.disabled = false;
  133.     btnHangup.disabled = true;
  134. }
  136. btnStart.onclick = start;
  137. btnCall.onclick = call;
  138. btnHangup.onclick = hangup;

server.js和上一个的一样。

10-7 WebRTC媒体协商的过程是怎样的？

思路：
A用户先要向B用户发送Offer消息；然后B用户给A用户回Answer。
点拨：
能信的双方要先与信令服力器建立连接，然后开始交换 Offer/Answer消息，最终实现媒体协商。