• WebRTC 系列（四、多人通话，H5、Android、iOS）

    WebRTC 系列（三、点对点通话，H5、Android、iOS）

     上一篇博客中，我们已经实现了点对点通话，即一对一通话，这一次就接着实现多人通话。多人通话的实现方式呢也有好几种方案，这里我简单介绍两种方案。

    一、多人通话方案

    1.Mesh

    多个客户端之间建立多个 PeerConnection，即如果有三个客户端 A、B、C，A 有两个 PeerConnection 分别与 B、C 通信，B 也是有两个 PeerConnection，分别与 A、C 通信，C 也是有两个 PeerConnection，分别与 A、B 通信，如图：

    ​​​​​​​​​​​​​​优点：服务端压力小，不需要对音视频数据做处理。
    缺点：客户端编解码压力较大，传输的数据与通话人数成正比，兼容性较差。

    2.Mixer

    客户端只与服务器有一个 PeerConnection，有多个客户端时，服务端增加多个媒体流，由服务端来做媒体数据转发，如图：

    优点：客户端只有一个连接，传输数据减少，服务端可对音视频数据预处理，兼容性好。
    缺点：服务器压力大，通话人数过多时，服务器如果对音视频数据有预处理，可能导致通话延迟。

    3.demo 方案选择

    两种方案各有利弊，感觉在实际业务中，第二种方案更合适，毕竟把更多逻辑放在服务端更可控一点，我为了演示简单，就选用了第一种方案，下面就说说第一种方案的话，第一个人、第二个人、第三个人加入房间的流程是什么样的。

    第一个人 A 加入房间：

    1. A 发送 join；
    2. 服务器向房间内其他所有人发送 otherJoin；
    3. 房间内没有其他人，结束。

    第二个人 B 加入房间：

    1. B 发送 join；
    2. 服务器向房间内其他所有人发送 otherJoin；
    3. A 收到 otherJoin（带有 B 的 userId）；
    4. A 检查远端视频渲染控件集合中是否存在 B 的 userId 对应的远端视频渲染控件，没有则创建并初始化，然后保存；
    5. A 检查 PeerConnection 集合中是否存在 B 的 userId 对应的 PeerConnection，没有则创建并添加音轨、视轨，然后保存；
    6. A 通过 PeerConnection 创建 offer，获取 sdp；
    7. A 将 offer sdp 作为参数 setLocalDescription；
    8. A 发送 offer sdp（带有 A 的 userId）；
    9. B 收到 offer（带有 A 的 userId）；
    10. B 检查远端视频渲染控件集合中是否存在 A 的 userId 对应远端视频渲染控件，没有则创建并初始化，然后保存；
    11. B 检查 PeerConnection 集合中是否存在 A 的 userId 对应的 PeerConnection，没有则创建并添加音轨、视轨，然后保存；
    12. B 将 offer sdp 作为参数 setRemoteDescription；
    13. B 通过 PeerConnection 创建 answer，获取 sdp；
    14. B 将 answer sdp 作为参数 setLocalDescription；
    15. B 发送 answer sdp（带有 B 的 userId）；
    16. A 收到 answer sdp（带有 B 的 userId）；
    17. A 通过 userId 找到对应 PeerConnection，将 answer sdp 作为参数 setRemoteDescription。

    第三个人 C 加入房间：

    1. C 发送 join；
    2. 服务器向房间内其他所有人发送 otherJoin；
    3. A 收到 otherJoin（带有 C 的 userId）；
    4. A 检查远端视频渲染控件集合中是否存在 C 的 userId 对应的远端视频渲染控件，没有则创建并初始化，然后保存；
    5. A 检查 PeerConnection 集合中是否存在 C 的 userId 对应的 PeerConnection，没有则创建并添加音轨、视轨，然后保存；
    6. A 通过 PeerConnection 创建 offer，获取 sdp；
    7. A 将 offer sdp 作为参数 setLocalDescription；
    8. A 发送 offer sdp（带有 A 的 userId）；
    9. C 收到 offer（带有 A 的 userId）；
    10. C 检查远端视频渲染控件集合中是否存在 A 的 userId 对应远端视频渲染控件，没有则创建并初始化，然后保存；
    11. C 检查 PeerConnection 集合中是否存在 A 的 userId 对应的 PeerConnection，没有则创建并添加音轨、视轨，然后保存；
    12. C 将 offer sdp 作为参数 setRemoteDescription；
    13. C 通过 PeerConnection 创建 answer，获取 sdp；
    14. C 将 answer sdp 作为参数 setLocalDescription；
    15. C 发送 answer sdp（带有 C 的 userId）；
    16. A 收到 answer sdp（带有 C 的 userId）；
    17. A 通过 userId 找到对应 PeerConnection，将 answer sdp 作为参数 setRemoteDescription。
    18. B 收到 otherJoin（带有 C 的 userId）；
    19. B 检查远端视频渲染控件集合中是否存在 C 的 userId 对应的远端视频渲染控件，没有则创建并初始化，然后保存；
    20. B 检查 PeerConnection 集合中是否存在 C 的 userId 对应的 PeerConnection，没有则创建并添加音轨、视轨，然后保存；
    21. B 通过 PeerConnection 创建 offer，获取 sdp；
    22. B 将 offer sdp 作为参数 setLocalDescription；
    23. B 发送 offer sdp（带有 B 的 userId）；
    24. C 收到 offer（带有 B 的 userId）；
    25. C 检查远端视频渲染控件集合中是否存在 B 的 userId 对应远端视频渲染控件，没有则创建并初始化，然后保存；
    26. C 检查 PeerConnection 集合中是否存在 B 的 userId 对应的 PeerConnection，没有则创建并添加音轨、视轨，然后保存；
    27. C 将 offer sdp 作为参数 setRemoteDescription；
    28. C 通过 PeerConnection 创建 answer，获取 sdp；
    29. C 将 answer sdp 作为参数 setLocalDescription；
    30. C 发送 answer sdp（带有 C 的 userId）；
    31. B 收到 answer sdp（带有 C 的 userId）；
    32. B 通过 userId 找到对应 PeerConnection，将 answer sdp 作为参数 setRemoteDescription。

    依此类推，如果还有第四个用户 D 再加入房间的话，D 也会发送 join，然后 A、B、C 也会类似上述 3～17 步处理。

    这期间的 onIceCandidate 回调的处理和之前类似，只是将生成的 IceCandidate 对象传递给对方时需要带上发送方（自己）的 userId，便于对方找到对应的 PeerConnection，以及接收方的 userId，便于服务器找到接收方的长连接。

    这期间的 onAddStream 回调的处理也和之前类似，只是需要通过对方的 userId 找到对应的远端控件渲染控件。

    二、信令服务器

    信令服务器的依赖就不重复了，根据上述流程，我们需要引入用户的概念，但暂时我没有引入房间的概念，所以在测试的时候我认为只有一个房间，所有人都加入的同一个房间。

    多人通话 WebSocket 服务端代码：

    1. package com.qinshou.webrtcdemo_server;
    2.  
    3. import com.google.gson.Gson;
    4. import com.google.gson.JsonObject;
    5. import com.google.gson.reflect.TypeToken;
    6.  
    7. import org.java_websocket.WebSocket;
    8. import org.java_websocket.handshake.ClientHandshake;
    9. import org.java_websocket.server.WebSocketServer;
    10.  
    11. import java.net.InetSocketAddress;
    12. import java.util.LinkedList;
    13. import java.util.List;
    14. import java.util.Map;
    15.  
    16. /**
    17.  * Author: MrQinshou
    18.  * Email: cqflqinhao@126.com
    19.  * Date: 2023/2/8 9:33
    20.  * Description: 多人通话 WebSocketServer
    21.  */
    22. public class MultipleWebSocketServerHelper {
    23.     public static class WebSocketBean {
    24.         private String mUserId;
    25.         private WebSocket mWebSocket;
    26.  
    27.         public WebSocketBean() {
    28.         }
    29.  
    30.         public WebSocketBean(WebSocket webSocket) {
    31.             mWebSocket = webSocket;
    32.         }
    33.  
    34.         public String getUserId() {
    35.             return mUserId;
    36.         }
    37.  
    38.         public void setUserId(String userId) {
    39.             mUserId = userId;
    40.         }
    41.  
    42.         public WebSocket getWebSocket() {
    43.             return mWebSocket;
    44.         }
    45.  
    46.         public void setWebSocket(WebSocket webSocket) {
    47.             mWebSocket = webSocket;
    48.         }
    49.     }
    50.  
    51.     private WebSocketServer mWebSocketServer;
    52.     private final List mWebSocketBeans = new LinkedList<>();
    53.     //    private static final String HOST_NAME = "192.168.1.104";
    54.     private static final String HOST_NAME = "172.16.2.172";
    55.     private static final int PORT = 8888;
    56.  
    57.     private WebSocketBean getWebSocketBeanByWebSocket(WebSocket webSocket) {
    58.         for (WebSocketBean webSocketBean : mWebSocketBeans) {
    59.             if (webSocket == webSocketBean.getWebSocket()) {
    60.                 return webSocketBean;
    61.             }
    62.         }
    63.         return null;
    64.     }
    65.  
    66.     private WebSocketBean getWebSocketBeanByUserId(String userId) {
    67.         for (WebSocketBean webSocketBean : mWebSocketBeans) {
    68.             if (userId.equals(webSocketBean.getUserId())) {
    69.                 return webSocketBean;
    70.             }
    71.         }
    72.         return null;
    73.     }
    74.  
    75.     private WebSocketBean removeWebSocketBeanByWebSocket(WebSocket webSocket) {
    76.         for (WebSocketBean webSocketBean : mWebSocketBeans) {
    77.             if (webSocket == webSocketBean.getWebSocket()) {
    78.                 mWebSocketBeans.remove(webSocketBean);
    79.                 return webSocketBean;
    80.             }
    81.         }
    82.         return null;
    83.     }
    84.  
    85.     public void start() {
    86.         InetSocketAddress inetSocketAddress = new InetSocketAddress(HOST_NAME, PORT);
    87.         mWebSocketServer = new WebSocketServer(inetSocketAddress) {
    88.  
    89.             @Override
    90.             public void onOpen(WebSocket conn, ClientHandshake handshake) {
    91.                 System.out.println("onOpen--->" + conn);
    92.                 // 有客户端连接，创建 WebSocketBean，此时仅保存了 WebSocket 连接，但还没有和 userId 绑定
    93.                 mWebSocketBeans.add(new WebSocketBean(conn));
    94.             }
    95.  
    96.             @Override
    97.             public void onClose(WebSocket conn, int code, String reason, boolean remote) {
    98.                 System.out.println("onClose--->" + conn);
    99.                 WebSocketBean webSocketBean = removeWebSocketBeanByWebSocket(conn);
    100.                 if (webSocketBean == null) {
    101.                     return;
    102.                 }
    103.                 // 通知其他用户有人退出房间
    104.                 JsonObject jsonObject = new JsonObject();
    105.                 jsonObject.addProperty("msgType", "otherQuit");
    106.                 jsonObject.addProperty("userId", webSocketBean.mUserId);
    107.                 for (WebSocketBean w : mWebSocketBeans) {
    108.                     if (w != webSocketBean) {
    109.                         w.mWebSocket.send(jsonObject.toString());
    110.                     }
    111.                 }
    112.             }
    113.  
    114.             @Override
    115.             public void onMessage(WebSocket conn, String message) {
    116.                 System.out.println("onMessage--->" + message);
    117.                 Map map = new Gson().fromJson(message, new TypeToken>() {
    118.                 }.getType());
    119.                 String msgType = map.get("msgType");
    120.                 if ("join".equals(msgType)) {
    121.                     // 收到加入房间指令
    122.                     String userId = map.get("userId");
    123.                     WebSocketBean webSocketBean = getWebSocketBeanByWebSocket(conn);
    124.                     // WebSocket 连接绑定 userId
    125.                     if (webSocketBean != null) {
    126.                         webSocketBean.setUserId(userId);
    127.                     }
    128.                     // 通知其他用户有其他人加入房间
    129.                     JsonObject jsonObject = new JsonObject();
    130.                     jsonObject.addProperty("msgType", "otherJoin");
    131.                     jsonObject.addProperty("userId", userId);
    132.                     for (WebSocketBean w : mWebSocketBeans) {
    133.                         if (w != webSocketBean && w.getUserId() != null) {
    134.                             w.mWebSocket.send(jsonObject.toString());
    135.                         }
    136.                     }
    137.                     return;
    138.                 }
    139.                 if ("quit".equals(msgType)) {
    140.                     // 收到退出房间指令
    141.                     String userId = map.get("userId");
    142.                     WebSocketBean webSocketBean = getWebSocketBeanByWebSocket(conn);
    143.                     // WebSocket 连接解绑 userId
    144.                     if (webSocketBean != null) {
    145.                         webSocketBean.setUserId(null);
    146.                     }
    147.                     // 通知其他用户有其他人退出房间
    148.                     JsonObject jsonObject = new JsonObject();
    149.                     jsonObject.addProperty("msgType", "otherQuit");
    150.                     jsonObject.addProperty("userId", userId);
    151.                     for (WebSocketBean w : mWebSocketBeans) {
    152.                         if (w != webSocketBean && w.getUserId() != null) {
    153.                             w.mWebSocket.send(jsonObject.toString());
    154.                         }
    155.                     }
    156.                     return;
    157.                 }
    158.                 // 其他消息透传
    159.                 // 接收方
    160.                 String toUserId = map.get("toUserId");
    161.                 // 找到接收方对应 WebSocket 连接
    162.                 WebSocketBean webSocketBean = getWebSocketBeanByUserId(toUserId);
    163.                 if (webSocketBean != null) {
    164.                     webSocketBean.getWebSocket().send(message);
    165.                 }
    166.             }
    167.  
    168.             @Override
    169.             public void onError(WebSocket conn, Exception ex) {
    170.                 ex.printStackTrace();
    171.                 System.out.println("onError");
    172.             }
    173.  
    174.             @Override
    175.             public void onStart() {
    176.                 System.out.println("onStart");
    177.             }
    178.         };
    179.         mWebSocketServer.start();
    180.     }
    181.  
    182.     public void stop() {
    183.         if (mWebSocketServer == null) {
    184.             return;
    185.         }
    186.         for (WebSocket webSocket : mWebSocketServer.getConnections()) {
    187.             webSocket.close();
    188.         }
    189.         try {
    190.             mWebSocketServer.stop();
    191.         } catch (InterruptedException e) {
    192.             throw new RuntimeException(e);
    193.         }
    194.         mWebSocketServer = null;
    195.     }
    196.  
    197.     public static void main(String[] args) {
    198.         new MultipleWebSocketServerHelper().start();
    199.     }
    200. }

    三、消息格式

    传递的消息的话，相较于点对点通话，sdp 和 iceCandidate 中需要添加 fromUserId 和 toUserId 字段，另外还需要增加 join、otherJoin、quit、ohterQuit 消息：

    1. // sdp
    2. {
    3.     "msgType": "sdp",
    4.     "fromUserId": userId,
    5.     "toUserId": toUserId,
    6.     "type": sessionDescription.type,
    7.     "sdp": sessionDescription.sdp
    8. }
    9.  
    10. // iceCandidate
    11. {
    12. 	"msgType": "iceCandidate",
    13.     "fromUserId": userId,
    14.     "toUserId": toUserId,
    15. 	"id": iceCandidate.sdpMid,
    16. 	"label": iceCandidate.sdpMLineIndex,
    17. 	"candidate": iceCandidate.candidate
    18. }
    19.  
    20. // join
    21. {
    22.     "msgType": "join"
    23.     "userId": userId
    24. }
    25.  
    26. // otherJoin
    27. {
    28.     "msgType": "otherJoin"
    29.     "userId": userId
    30. }
    31.  
    32. // quit
    33. {
    34.     "msgType": "quit"
    35.     "userId": userId
    36. }
    37.  
    38. // otherQuit
    39. {
    40.     "msgType": "otherQuit"
    41.     "userId": userId
    42. }

    四、H5

    代码与 p2p_demo 其实差不了太多，但是我们创建 PeerConnection 的时机需要根据上面梳理流程进行修改，发送的信令也需要根据上面定义的格式进行修改，布局中将远端视频渲染控件去掉，改成一个远端视频渲染控件的容器，每当有新的连接时创建新的远端视频渲染控件放到容器中，另外，WebSocket 需要额外处理 otherJoin 和 otherQuit 信令。

    1.添加依赖

    这个跟前两篇的一样，不需要额外引入。

    2.multiple_demo.html

    1. <html>
    2.  
    3. <head>
    4.     <title>Multiple Demotitle>
    5.     <style>
    6.         body {
    7.             overflow: hidden;
    8.             margin: 0px;
    9.             padding: 0px;
    10.         }
    11.  
    12.         #local_view {
    13.             width: 100%;
    14.             height: 100%;
    15.         }
    16.  
    17.         #remote_views {
    18.             width: 9%;
    19.             height: 80%;
    20.             position: absolute;
    21.             top: 10%;
    22.             right: 10%;
    23.             bottom: 10%;
    24.             overflow-y: auto;
    25.         }
    26.  
    27.         .remote_view {
    28.             width: 100%;
    29.             aspect-ratio: 9/16;
    30.         }
    31.  
    32.         #left {
    33.             width: 10%;
    34.             height: 5%;
    35.             position: absolute;
    36.             left: 10%;
    37.             top: 10%;
    38.         }
    39.  
    40.         #p_websocket_state,
    41.         #input_server_url,
    42.         .my_button {
    43.             width: 100%;
    44.             height: 100%;
    45.             display: block;
    46.             margin-bottom: 10%;
    47.         }
    48.     style>
    49. head>
    50.  
    51. <body>
    52.     <video id="local_view" width="480" height="270" autoplay controls muted>video>
    53.     <div id="remote_views">
    54.     div>
    55.  
    56.     <div id="left">
    57.         <p id="p_websocket_state">WebSocket 已断开p>
    58.         <input id="input_server_url" type="text" placeholder="请输入服务器地址" value="ws://192.168.1.104:8888">input>
    59.         <button id="btn_connect" class="my_button" onclick="connect()">连接 WebSocketbutton>
    60.         <button id="btn_disconnect" class="my_button" onclick="disconnect()">断开 WebSocketbutton>
    61.         <button id="btn_join" class="my_button" onclick="join()">加入房间button>
    62.         <button id="btn_quit" class="my_button" onclick="quit()">退出房间button>
    63.     div>
    64. body>
    65.  
    66. <script type="text/javascript">
    67.     /**
    68.      * Author: MrQinshou
    69.      * Email: cqflqinhao@126.com
    70.      * Date: 2023/4/15 11:24
    71.      * Description: 生成 uuid
    72.      */
    73.     function uuid() {
    74.         return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
    75.             var r = Math.random() * 16 | 0;
    76.             var v = c == 'x' ? r : (r & 0x3 | 0x8);
    77.             return v.toString(16);
    78.         });
    79.     }
    80. script>
    81.  
    82. <script type="text/javascript">
    83.     var localView = document.getElementById("local_view");
    84.     var remoteViews = document.getElementById("remote_views");
    85.     var localStream;
    86.     // let userId = uuid();
    87.     let userId = "h5";
    88.     let peerConnectionDict = {};
    89.     let remoteViewDict = {};
    90.  
    91.     function createPeerConnection(fromUserId) {
    92.         let peerConnection = new RTCPeerConnection();
    93.         peerConnection.oniceconnectionstatechange = function (event) {
    94.             if ("disconnected" == event.target.iceConnectionState) {
    95.                 let peerConnection = peerConnectionDict[fromUserId];
    96.                 if (peerConnection != null) {
    97.                     peerConnection.close();
    98.                     delete peerConnectionDict[fromUserId];
    99.                 }
    100.                 let remoteView = remoteViewDict[fromUserId];
    101.                 if (remoteView != null) {
    102.                     remoteView.removeAttribute('src');
    103.                     remoteView.load();
    104.                     remoteView.remove();
    105.                     delete remoteViewDict[fromUserId];
    106.                 }
    107.             }
    108.         }
    109.         peerConnection.onicecandidate = function (event) {
    110.             console.log("onicecandidate--->" + event.candidate);
    111.             sendIceCandidate(event.candidate, fromUserId);
    112.         }
    113.         peerConnection.ontrack = function (event) {
    114.             console.log("remote ontrack--->" + event.streams);
    115.             let remoteView = remoteViewDict[fromUserId];
    116.             if (remoteView == null) {
    117.                 return;
    118.             }
    119.             let streams = event.streams;
    120.             if (streams && streams.length > 0) {
    121.                 remoteView.srcObject = streams[0];
    122.             }
    123.         }
    124.         return peerConnection;
    125.     }
    126.  
    127.     function createOffer(peerConnection, fromUserId) {
    128.         peerConnection.createOffer().then(function (sessionDescription) {
    129.             console.log(fromUserId + " create offer success.");
    130.             peerConnection.setLocalDescription(sessionDescription).then(function () {
    131.                 console.log(fromUserId + " set local sdp success.");
    132.                 var jsonObject = {
    133.                     "msgType": "sdp",
    134.                     "fromUserId": userId,
    135.                     "toUserId": fromUserId,
    136.                     "type": "offer",
    137.                     "sdp": sessionDescription.sdp
    138.                 };
    139.                 send(JSON.stringify(jsonObject));
    140.             }).catch(function (error) {
    141.                 console.log("error--->" + error);
    142.             })
    143.         }).catch(function (error) {
    144.             console.log("error--->" + error);
    145.         })
    146.     }
    147.  
    148.     function createAnswer(peerConnection, fromUserId) {
    149.         peerConnection.createAnswer().then(function (sessionDescription) {
    150.             console.log(fromUserId + " create answer success.");
    151.             peerConnection.setLocalDescription(sessionDescription).then(function () {
    152.                 console.log(fromUserId + " set local sdp success.");
    153.                 var jsonObject = {
    154.                     "msgType": "sdp",
    155.                     "fromUserId": userId,
    156.                     "toUserId": fromUserId,
    157.                     "type": "answer",
    158.                     "sdp": sessionDescription.sdp
    159.                 };
    160.                 send(JSON.stringify(jsonObject));
    161.             }).catch(function (error) {
    162.                 console.log("error--->" + error);
    163.             })
    164.         }).catch(function (error) {
    165.             console.log("error--->" + error);
    166.         })
    167.     }
    168.  
    169.     function join() {
    170.         var jsonObject = {
    171.             "msgType": "join",
    172.             "userId": userId,
    173.         };
    174.         send(JSON.stringify(jsonObject));
    175.     }
    176.  
    177.     function quit() {
    178.         var jsonObject = {
    179.             "msgType": "quit",
    180.             "userId": userId,
    181.         };
    182.         send(JSON.stringify(jsonObject));
    183.         for (var key in peerConnectionDict) {
    184.             let peerConnection = peerConnectionDict[key];
    185.             peerConnection.close();
    186.             delete peerConnectionDict[key];
    187.         }
    188.         for (var key in remoteViewDict) {
    189.             let remoteView = remoteViewDict[key];
    190.             remoteView.removeAttribute('src');
    191.             remoteView.load();
    192.             remoteView.remove();
    193.             delete remoteViewDict[key];
    194.         }
    195.     }
    196.  
    197.  
    198.     function sendOffer(offer, toUserId) {
    199.         var jsonObject = {
    200.             "msgType": "sdp",
    201.             "fromUserId": userId,
    202.             "toUserId": toUserId,
    203.             "type": "offer",
    204.             "sdp": offer.sdp
    205.         };
    206.         send(JSON.stringify(jsonObject));
    207.     }
    208.  
    209.     function receivedOffer(jsonObject) {
    210.         let fromUserId = jsonObject["fromUserId"];
    211.         var peerConnection = peerConnectionDict[fromUserId];
    212.         if (peerConnection == null) {
    213.             // 创建 PeerConnection
    214.             peerConnection = createPeerConnection(fromUserId);
    215.             // 为 PeerConnection 添加音轨、视轨
    216.             for (let i = 0; localStream != null && i < localStream.getTracks().length; i++) {
    217.                 const track = localStream.getTracks()[i];
    218.                 peerConnection.addTrack(track, localStream);
    219.             }
    220.             peerConnectionDict[fromUserId] = peerConnection;
    221.         }
    222.         var remoteView = remoteViewDict[fromUserId];
    223.         if (remoteView == null) {
    224.             remoteView = document.createElement("video");
    225.             remoteView.className = "remote_view";
    226.             remoteView.autoplay = true;
    227.             remoteView.control = true;
    228.             remoteView.muted = true;
    229.             remoteViews.appendChild(remoteView);
    230.             remoteViewDict[fromUserId] = remoteView;
    231.         }
    232.         let options = {
    233.             "type": jsonObject["type"],
    234.             "sdp": jsonObject["sdp"]
    235.         }
    236.         // 将 offer sdp 作为参数 setRemoteDescription
    237.         let sessionDescription = new RTCSessionDescription(options);
    238.         peerConnection.setRemoteDescription(sessionDescription).then(function () {
    239.             console.log(fromUserId + " set remote sdp success.");
    240.             // 通过 PeerConnection 创建 answer，获取 sdp
    241.             peerConnection.createAnswer().then(function (sessionDescription) {
    242.                 console.log(fromUserId + " create answer success.");
    243.                 // 将 answer sdp 作为参数 setLocalDescription
    244.                 peerConnection.setLocalDescription(sessionDescription).then(function () {
    245.                     console.log(fromUserId + " set local sdp success.");
    246.                     // 发送 answer sdp
    247.                     sendAnswer(sessionDescription, fromUserId);
    248.                 })
    249.             })
    250.         }).catch(function (error) {
    251.             console.log("error--->" + error);
    252.         });
    253.     }
    254.  
    255.     function sendAnswer(answer, toUserId) {
    256.         var jsonObject = {
    257.             "msgType": "sdp",
    258.             "fromUserId": userId,
    259.             "toUserId": toUserId,
    260.             "type": "answer",
    261.             "sdp": answer.sdp
    262.         };
    263.         send(JSON.stringify(jsonObject));
    264.     }
    265.  
    266.     function receivedAnswer(jsonObject) {
    267.         let fromUserId = jsonObject["fromUserId"];
    268.         var peerConnection = peerConnectionDict[fromUserId];
    269.         if (peerConnection == null) {
    270.             // 创建 PeerConnection
    271.             peerConnection = createPeerConnection(fromUserId);
    272.             // 为 PeerConnection 添加音轨、视轨
    273.             for (let i = 0; localStream != null && i < localStream.getTracks().length; i++) {
    274.                 const track = localStream.getTracks()[i];
    275.                 peerConnection.addTrack(track, localStream);
    276.             }
    277.             peerConnectionDict[fromUserId] = peerConnection;
    278.         }
    279.         var remoteView = remoteViewDict[fromUserId];
    280.         if (remoteView == null) {
    281.             remoteView = document.createElement("video");
    282.             remoteView.className = "remote_view";
    283.             remoteView.autoplay = true;
    284.             remoteView.control = true;
    285.             remoteView.muted = true;
    286.             remoteViews.appendChild(remoteView);
    287.             remoteViewDict[fromUserId] = remoteView;
    288.         }
    289.         let options = {
    290.             "type": jsonObject["type"],
    291.             "sdp": jsonObject["sdp"]
    292.         }
    293.         let sessionDescription = new RTCSessionDescription(options);
    294.         let type = jsonObject["type"];
    295.         peerConnection.setRemoteDescription(sessionDescription).then(function () {
    296.             console.log(fromUserId + " set remote sdp success.");
    297.         }).catch(function (error) {
    298.             console.log("error--->" + error);
    299.         });
    300.     }
    301.  
    302.     function sendIceCandidate(iceCandidate, toUserId) {
    303.         if (iceCandidate == null) {
    304.             return;
    305.         }
    306.         var jsonObject = {
    307.             "msgType": "iceCandidate",
    308.             "fromUserId": userId,
    309.             "toUserId": toUserId,
    310.             "id": iceCandidate.sdpMid,
    311.             "label": iceCandidate.sdpMLineIndex,
    312.             "candidate": iceCandidate.candidate
    313.         };
    314.         send(JSON.stringify(jsonObject));
    315.     }
    316.  
    317.     function receivedCandidate(jsonObject) {
    318.         let fromUserId = jsonObject["fromUserId"];
    319.         let peerConnection = peerConnectionDict[fromUserId];
    320.         if (peerConnection == null) {
    321.             return
    322.         }
    323.         let options = {
    324.             "sdpMLineIndex": jsonObject["label"],
    325.             "sdpMid": jsonObject["id"],
    326.             "candidate": jsonObject["candidate"]
    327.         }
    328.         let iceCandidate = new RTCIceCandidate(options);
    329.         peerConnection.addIceCandidate(iceCandidate);
    330.     }
    331.  
    332.     function receivedOtherJoin(jsonObject) {
    333.         // 创建 PeerConnection
    334.         let userId = jsonObject["userId"];
    335.         var peerConnection = peerConnectionDict[userId];
    336.         if (peerConnection == null) {
    337.             peerConnection = createPeerConnection(userId);
    338.             for (let i = 0; localStream != null && i < localStream.getTracks().length; i++) {
    339.                 const track = localStream.getTracks()[i];
    340.                 peerConnection.addTrack(track, localStream);
    341.             }
    342.             peerConnectionDict[userId] = peerConnection;
    343.         }
    344.         var remoteView = remoteViewDict[userId];
    345.         if (remoteView == null) {
    346.             remoteView = document.createElement("video");
    347.             remoteView.className = "remote_view";
    348.             remoteView.autoplay = true;
    349.             remoteView.control = true;
    350.             remoteView.muted = true;
    351.             remoteViews.appendChild(remoteView);
    352.             remoteViewDict[userId] = remoteView;
    353.         }
    354.         // 通过 PeerConnection 创建 offer，获取 sdp
    355.         peerConnection.createOffer().then(function (sessionDescription) {
    356.             console.log(userId + " create offer success.");
    357.             // 将 offer sdp 作为参数 setLocalDescription
    358.             peerConnection.setLocalDescription(sessionDescription).then(function () {
    359.                 console.log(userId + " set local sdp success.");
    360.                 // 发送 offer sdp
    361.                 sendOffer(sessionDescription, userId);
    362.             }).catch(function (error) {
    363.                 console.log("error--->" + error);
    364.             })
    365.         }).catch(function (error) {
    366.             console.log("error--->" + error);
    367.         });
    368.     }
    369.  
    370.     function receivedOtherQuit(jsonObject) {
    371.         let userId = jsonObject["userId"];
    372.         let peerConnection = peerConnectionDict[userId];
    373.         if (peerConnection != null) {
    374.             peerConnection.close();
    375.             delete peerConnectionDict[userId];
    376.         }
    377.         let remoteView = remoteViewDict[userId];
    378.         if (remoteView != null) {
    379.             remoteView.removeAttribute('src');
    380.             remoteView.load();
    381.             remoteView.remove();
    382.             delete remoteViewDict[userId];
    383.         }
    384.     }
    385.  
    386.     navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function (mediaStream) {
    387.         // 初始化 PeerConnectionFactory；
    388.         // 创建 EglBase；
    389.         // 创建 PeerConnectionFactory；
    390.         // 创建音轨；
    391.         // 创建视轨；
    392.         localStream = mediaStream;
    393.         // 初始化本地视频渲染控件；
    394.         // 初始化远端视频渲染控件；
    395.         // 开始本地渲染。
    396.         localView.srcObject = mediaStream;
    397.     }).catch(function (error) {
    398.         console.log("error--->" + error);
    399.     })
    400. script>
    401.  
    402. <script type="text/javascript">
    403.     var websocket;
    404.  
    405.     function connect() {
    406.         let inputServerUrl = document.getElementById("input_server_url");
    407.         let pWebsocketState = document.getElementById("p_websocket_state");
    408.         let url = inputServerUrl.value;
    409.         websocket = new WebSocket(url);
    410.         websocket.onopen = function () {
    411.             console.log("onOpen");
    412.             pWebsocketState.innerText = "WebSocket 已连接";
    413.         }
    414.         websocket.onmessage = function (message) {
    415.             console.log("onmessage--->" + message.data);
    416.             let jsonObject = JSON.parse(message.data);
    417.             let msgType = jsonObject["msgType"];
    418.             if ("sdp" == msgType) {
    419.                 let type = jsonObject["type"];
    420.                 if ("offer" == type) {
    421.                     receivedOffer(jsonObject);
    422.                 } else if ("answer" == type) {
    423.                     receivedAnswer(jsonObject);
    424.                 }
    425.             } else if ("iceCandidate" == msgType) {
    426.                 receivedCandidate(jsonObject);
    427.             } else if ("otherJoin" == msgType) {
    428.                 receivedOtherJoin(jsonObject);
    429.             } else if ("otherQuit" == msgType) {
    430.                 receivedOtherQuit(jsonObject);
    431.             }
    432.         }
    433.         websocket.onclose = function (error) {
    434.             console.log("onclose--->" + error);
    435.             pWebsocketState.innerText = "WebSocket 已断开";
    436.         }
    437.         websocket.onerror = function (error) {
    438.             console.log("onerror--->" + error);
    439.         }
    440.     }
    441.  
    442.     function disconnect() {
    443.         websocket.close();
    444.     }
    445.  
    446.     function send(message) {
    447.         if (!websocket) {
    448.             return;
    449.         }
    450.         websocket.send(message);
    451.     }
    452.  
    453. script>
    454.  
    455. html>

    多人通话至少需要三个端，我们就等所有端都实现了再最后来看效果。

    五、Android

    1.添加依赖

    这个跟前两篇的一样，不需要额外引入。

    2.布局

    1. "1.0" encoding="utf-8"?>
    2. <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3.     xmlns:app="http://schemas.android.com/apk/res-auto"
    4.     xmlns:tools="http://schemas.android.com/tools"
    5.     android:layout_width="match_parent"
    6.     android:layout_height="match_parent"
    7.     android:background="#FF000000"
    8.     android:keepScreenOn="true"
    9.     tools:context=".P2PDemoActivity">
    10.  
    11.     <org.webrtc.SurfaceViewRenderer
    12.         android:id="@+id/svr_local"
    13.         android:layout_width="match_parent"
    14.         android:layout_height="0dp"
    15.         app:layout_constraintBottom_toBottomOf="parent"
    16.         app:layout_constraintDimensionRatio="9:16"
    17.         app:layout_constraintEnd_toEndOf="parent"
    18.         app:layout_constraintStart_toStartOf="parent"
    19.         app:layout_constraintTop_toTopOf="parent" />
    20.  
    21.     <androidx.core.widget.NestedScrollView
    22.         android:layout_width="90dp"
    23.         android:layout_height="wrap_content"
    24.         android:layout_marginTop="30dp"
    25.         android:layout_marginEnd="30dp"
    26.         android:layout_marginBottom="30dp"
    27.         app:layout_constraintEnd_toEndOf="parent"
    28.         app:layout_constraintTop_toTopOf="parent">
    29.  
    30.         <androidx.appcompat.widget.LinearLayoutCompat
    31.             android:id="@+id/ll_remotes"
    32.             android:layout_width="match_parent"
    33.             android:layout_height="wrap_content"
    34.             android:orientation="vertical">
    35.  
    36.         androidx.appcompat.widget.LinearLayoutCompat>
    37.     androidx.core.widget.NestedScrollView>
    38.  
    39.     <androidx.appcompat.widget.LinearLayoutCompat
    40.         android:layout_width="match_parent"
    41.         android:layout_height="wrap_content"
    42.         android:layout_marginStart="30dp"
    43.         android:layout_marginTop="30dp"
    44.         android:layout_marginEnd="30dp"
    45.         android:orientation="vertical"
    46.         app:layout_constraintStart_toStartOf="parent"
    47.         app:layout_constraintTop_toTopOf="parent">
    48.  
    49.         <androidx.appcompat.widget.AppCompatTextView
    50.             android:id="@+id/tv_websocket_state"
    51.             android:layout_width="match_parent"
    52.             android:layout_height="wrap_content"
    53.             android:text="WebSocket 已断开"
    54.             android:textColor="#FFFFFFFF" />
    55.  
    56.         <androidx.appcompat.widget.AppCompatEditText
    57.             android:id="@+id/et_server_url"
    58.             android:layout_width="match_parent"
    59.             android:layout_height="wrap_content"
    60.             android:hint="请输入服务器地址"
    61.             android:textColor="#FFFFFFFF"
    62.             android:textColorHint="#FFFFFFFF" />
    63.  
    64.         <androidx.appcompat.widget.AppCompatButton
    65.             android:id="@+id/btn_connect"
    66.             android:layout_width="wrap_content"
    67.             android:layout_height="wrap_content"
    68.             android:text="连接 WebSocket"
    69.             android:textAllCaps="false" />
    70.  
    71.         <androidx.appcompat.widget.AppCompatButton
    72.             android:id="@+id/btn_disconnect"
    73.             android:layout_width="wrap_content"
    74.             android:layout_height="wrap_content"
    75.             android:text="断开 WebSocket"
    76.             android:textAllCaps="false" />
    77.  
    78.         <androidx.appcompat.widget.AppCompatButton
    79.             android:id="@+id/btn_join"
    80.             android:layout_width="wrap_content"
    81.             android:layout_height="wrap_content"
    82.             android:text="加入房间"
    83.             android:textSize="12sp" />
    84.  
    85.         <androidx.appcompat.widget.AppCompatButton
    86.             android:id="@+id/btn_quit"
    87.             android:layout_width="wrap_content"
    88.             android:layout_height="wrap_content"
    89.             android:text="退出房间"
    90.             android:textSize="12sp" />
    91.     androidx.appcompat.widget.LinearLayoutCompat>
    92. androidx.constraintlayout.widget.ConstraintLayout>

    布局中将远端视频渲染控件去掉，改成一个远端视频渲染控件的容器，每当有新的连接时创建新的远端视频渲染控件放到容器中。

    3.MultipleDemoActivity.java

    1. package com.qinshou.webrtcdemo_android;
    2.  
    3. import android.content.Context;
    4. import android.os.Bundle;
    5. import android.text.TextUtils;
    6. import android.view.View;
    7. import android.view.ViewGroup;
    8. import android.widget.EditText;
    9. import android.widget.LinearLayout;
    10. import android.widget.TextView;
    11.  
    12. import androidx.appcompat.app.AppCompatActivity;
    13. import androidx.appcompat.widget.LinearLayoutCompat;
    14.  
    15. import org.json.JSONException;
    16. import org.json.JSONObject;
    17. import org.webrtc.AudioSource;
    18. import org.webrtc.AudioTrack;
    19. import org.webrtc.Camera2Capturer;
    20. import org.webrtc.Camera2Enumerator;
    21. import org.webrtc.CameraEnumerator;
    22. import org.webrtc.DataChannel;
    23. import org.webrtc.DefaultVideoDecoderFactory;
    24. import org.webrtc.DefaultVideoEncoderFactory;
    25. import org.webrtc.EglBase;
    26. import org.webrtc.IceCandidate;
    27. import org.webrtc.MediaConstraints;
    28. import org.webrtc.MediaStream;
    29. import org.webrtc.PeerConnection;
    30. import org.webrtc.PeerConnectionFactory;
    31. import org.webrtc.RtpReceiver;
    32. import org.webrtc.SessionDescription;
    33. import org.webrtc.SurfaceTextureHelper;
    34. import org.webrtc.SurfaceViewRenderer;
    35. import org.webrtc.VideoCapturer;
    36. import org.webrtc.VideoDecoderFactory;
    37. import org.webrtc.VideoEncoderFactory;
    38. import org.webrtc.VideoSource;
    39. import org.webrtc.VideoTrack;
    40.  
    41. import java.util.ArrayList;
    42. import java.util.List;
    43. import java.util.Map;
    44. import java.util.UUID;
    45. import java.util.concurrent.ConcurrentHashMap;
    46.  
    47. /**
    48.  * Author: MrQinshou
    49.  * Email: cqflqinhao@126.com
    50.  * Date: 2023/3/21 17:22
    51.  * Description: P2P demo
    52.  */
    53. public class MultipleDemoActivity extends AppCompatActivity {
    54.     private static final String TAG = MultipleDemoActivity.class.getSimpleName();
    55.     private static final String AUDIO_TRACK_ID = "ARDAMSa0";
    56.     private static final String VIDEO_TRACK_ID = "ARDAMSv0";
    57.     private static final List STREAM_IDS = new ArrayList() {{
    58.         add("ARDAMS");
    59.     }};
    60.     private static final String SURFACE_TEXTURE_HELPER_THREAD_NAME = "SurfaceTextureHelperThread";
    61.     private static final int WIDTH = 1280;
    62.     private static final int HEIGHT = 720;
    63.     private static final int FPS = 30;
    64.  
    65.     private EglBase mEglBase;
    66.     private PeerConnectionFactory mPeerConnectionFactory;
    67.     private VideoCapturer mVideoCapturer;
    68.     private AudioTrack mAudioTrack;
    69.     private VideoTrack mVideoTrack;
    70.     private WebSocketClientHelper mWebSocketClientHelper = new WebSocketClientHelper();
    71. //    private String mUserId = UUID.randomUUID().toString();
    72.     private String mUserId = "Android";
    73.     private final Map mPeerConnectionMap = new ConcurrentHashMap<>();
    74.     private final Map mRemoteViewMap = new ConcurrentHashMap<>();
    75.  
    76.     @Override
    77.     protected void onCreate(Bundle savedInstanceState) {
    78.         super.onCreate(savedInstanceState);
    79.         setContentView(R.layout.activity_multiple_demo);
    80.         ((EditText) findViewById(R.id.et_server_url)).setText("ws://192.168.1.104:8888");
    81.         findViewById(R.id.btn_connect).setOnClickListener(new View.OnClickListener() {
    82.             @Override
    83.             public void onClick(View view) {
    84.                 String url = ((EditText) findViewById(R.id.et_server_url)).getText().toString().trim();
    85.                 mWebSocketClientHelper.connect(url);
    86.             }
    87.         });
    88.         findViewById(R.id.btn_disconnect).setOnClickListener(new View.OnClickListener() {
    89.             @Override
    90.             public void onClick(View view) {
    91.                 mWebSocketClientHelper.disconnect();
    92.             }
    93.         });
    94.         findViewById(R.id.btn_join).setOnClickListener(new View.OnClickListener() {
    95.             @Override
    96.             public void onClick(View view) {
    97.                 join();
    98.             }
    99.         });
    100.         findViewById(R.id.btn_quit).setOnClickListener(new View.OnClickListener() {
    101.             @Override
    102.             public void onClick(View view) {
    103.                 quit();
    104.             }
    105.         });
    106.         mWebSocketClientHelper.setOnWebSocketListener(new WebSocketClientHelper.OnWebSocketClientListener() {
    107.             @Override
    108.             public void onOpen() {
    109.                 runOnUiThread(new Runnable() {
    110.                     @Override
    111.                     public void run() {
    112.                         ((TextView) findViewById(R.id.tv_websocket_state)).setText("WebSocket 已连接");
    113.                     }
    114.                 });
    115.             }
    116.  
    117.             @Override
    118.             public void onClose() {
    119.                 runOnUiThread(new Runnable() {
    120.                     @Override
    121.                     public void run() {
    122.                         ((TextView) findViewById(R.id.tv_websocket_state)).setText("WebSocket 已断开");
    123.                     }
    124.                 });
    125.             }
    126.  
    127.             @Override
    128.             public void onMessage(String message) {
    129.                 ShowLogUtil.debug("message--->" + message);
    130.                 try {
    131.                     JSONObject jsonObject = new JSONObject(message);
    132.                     String msgType = jsonObject.optString("msgType");
    133.                     if (TextUtils.equals("sdp", msgType)) {
    134.                         String type = jsonObject.optString("type");
    135.                         if (TextUtils.equals("offer", type)) {
    136.                             receivedOffer(jsonObject);
    137.                         } else if (TextUtils.equals("answer", type)) {
    138.                             receivedAnswer(jsonObject);
    139.                         }
    140.                     } else if (TextUtils.equals("iceCandidate", msgType)) {
    141.                         receivedCandidate(jsonObject);
    142.                     } else if (TextUtils.equals("otherJoin", msgType)) {
    143.                         receivedOtherJoin(jsonObject);
    144.                     } else if (TextUtils.equals("otherQuit", msgType)) {
    145.                         receivedOtherQuit(jsonObject);
    146.                     }
    147.                 } catch (JSONException e) {
    148.                     e.printStackTrace();
    149.                 }
    150.             }
    151.         });
    152.         // 初始化 PeerConnectionFactory
    153.         initPeerConnectionFactory(MultipleDemoActivity.this);
    154.         // 创建 EglBase
    155.         mEglBase = EglBase.create();
    156.         // 创建 PeerConnectionFactory
    157.         mPeerConnectionFactory = createPeerConnectionFactory(mEglBase);
    158.         // 创建音轨
    159.         mAudioTrack = createAudioTrack(mPeerConnectionFactory);
    160.         // 创建视轨
    161.         mVideoCapturer = createVideoCapturer();
    162.         VideoSource videoSource = createVideoSource(mPeerConnectionFactory, mVideoCapturer);
    163.         mVideoTrack = createVideoTrack(mPeerConnectionFactory, videoSource);
    164.         // 初始化本地视频渲染控件，这个方法非常重要，不初始化会黑屏
    165.         SurfaceViewRenderer svrLocal = findViewById(R.id.svr_local);
    166.         svrLocal.init(mEglBase.getEglBaseContext(), null);
    167.         mVideoTrack.addSink(svrLocal);
    168.         // 开始本地渲染
    169.         // 创建 SurfaceTextureHelper，用来表示 camera 初始化的线程
    170.         SurfaceTextureHelper surfaceTextureHelper = SurfaceTextureHelper.create(SURFACE_TEXTURE_HELPER_THREAD_NAME, mEglBase.getEglBaseContext());
    171.         // 初始化视频采集器
    172.         mVideoCapturer.initialize(surfaceTextureHelper, MultipleDemoActivity.this, videoSource.getCapturerObserver());
    173.         mVideoCapturer.startCapture(WIDTH, HEIGHT, FPS);
    174.     }
    175.  
    176.     @Override
    177.     protected void onDestroy() {
    178.         super.onDestroy();
    179.         if (mEglBase != null) {
    180.             mEglBase.release();
    181.             mEglBase = null;
    182.         }
    183.         if (mVideoCapturer != null) {
    184.             try {
    185.                 mVideoCapturer.stopCapture();
    186.             } catch (InterruptedException e) {
    187.                 e.printStackTrace();
    188.             }
    189.             mVideoCapturer.dispose();
    190.             mVideoCapturer = null;
    191.         }
    192.         if (mAudioTrack != null) {
    193.             mAudioTrack.dispose();
    194.             mAudioTrack = null;
    195.         }
    196.         if (mVideoTrack != null) {
    197.             mVideoTrack.dispose();
    198.             mVideoTrack = null;
    199.         }
    200.         for (PeerConnection peerConnection : mPeerConnectionMap.values()) {
    201.             peerConnection.close();
    202.             peerConnection.dispose();
    203.         }
    204.         mPeerConnectionMap.clear();
    205.         SurfaceViewRenderer svrLocal = findViewById(R.id.svr_local);
    206.         svrLocal.release();
    207.         for (SurfaceViewRenderer surfaceViewRenderer : mRemoteViewMap.values()) {
    208.             surfaceViewRenderer.release();
    209.         }
    210.         mRemoteViewMap.clear();
    211.         mWebSocketClientHelper.disconnect();
    212.     }
    213.  
    214.     private void initPeerConnectionFactory(Context context) {
    215.         PeerConnectionFactory.initialize(PeerConnectionFactory.InitializationOptions.builder(context).createInitializationOptions());
    216.     }
    217.  
    218.     private PeerConnectionFactory createPeerConnectionFactory(EglBase eglBase) {
    219.         VideoEncoderFactory videoEncoderFactory = new DefaultVideoEncoderFactory(eglBase.getEglBaseContext(), true, true);
    220.         VideoDecoderFactory videoDecoderFactory = new DefaultVideoDecoderFactory(eglBase.getEglBaseContext());
    221.         return PeerConnectionFactory.builder().setVideoEncoderFactory(videoEncoderFactory).setVideoDecoderFactory(videoDecoderFactory).createPeerConnectionFactory();
    222.     }
    223.  
    224.     private AudioTrack createAudioTrack(PeerConnectionFactory peerConnectionFactory) {
    225.         AudioSource audioSource = peerConnectionFactory.createAudioSource(new MediaConstraints());
    226.         AudioTrack audioTrack = peerConnectionFactory.createAudioTrack(AUDIO_TRACK_ID, audioSource);
    227.         audioTrack.setEnabled(true);
    228.         return audioTrack;
    229.     }
    230.  
    231.     private VideoCapturer createVideoCapturer() {
    232.         VideoCapturer videoCapturer = null;
    233.         CameraEnumerator cameraEnumerator = new Camera2Enumerator(MultipleDemoActivity.this);
    234.         for (String deviceName : cameraEnumerator.getDeviceNames()) {
    235.             // 前摄像头
    236.             if (cameraEnumerator.isFrontFacing(deviceName)) {
    237.                 videoCapturer = new Camera2Capturer(MultipleDemoActivity.this, deviceName, null);
    238.             }
    239.         }
    240.         return videoCapturer;
    241.     }
    242.  
    243.     private VideoSource createVideoSource(PeerConnectionFactory peerConnectionFactory, VideoCapturer videoCapturer) {
    244.         // 创建视频源
    245.         VideoSource videoSource = peerConnectionFactory.createVideoSource(videoCapturer.isScreencast());
    246.         return videoSource;
    247.     }
    248.  
    249.     private VideoTrack createVideoTrack(PeerConnectionFactory peerConnectionFactory, VideoSource videoSource) {
    250.         // 创建视轨
    251.         VideoTrack videoTrack = peerConnectionFactory.createVideoTrack(VIDEO_TRACK_ID, videoSource);
    252.         videoTrack.setEnabled(true);
    253.         return videoTrack;
    254.     }
    255.  
    256.     private PeerConnection createPeerConnection(PeerConnectionFactory peerConnectionFactory, String fromUserId) {
    257.         // 内部会转成 RTCConfiguration
    258.         List iceServers = new ArrayList<>();
    259.         PeerConnection peerConnection = peerConnectionFactory.createPeerConnection(iceServers, new PeerConnection.Observer() {
    260.             @Override
    261.             public void onSignalingChange(PeerConnection.SignalingState signalingState) {
    262.             }
    263.  
    264.             @Override
    265.             public void onIceConnectionChange(PeerConnection.IceConnectionState iceConnectionState) {
    266.                 ShowLogUtil.debug("onIceConnectionChange--->" + iceConnectionState);
    267.                 if (iceConnectionState == PeerConnection.IceConnectionState.DISCONNECTED) {
    268.                     PeerConnection peerConnection = mPeerConnectionMap.get(fromUserId);
    269.                     ShowLogUtil.debug("peerConnection--->" + peerConnection);
    270.                     if (peerConnection != null) {
    271.                         peerConnection.close();
    272.                         mPeerConnectionMap.remove(fromUserId);
    273.                     }
    274.                     runOnUiThread(new Runnable() {
    275.                         @Override
    276.                         public void run() {
    277.                             SurfaceViewRenderer surfaceViewRenderer = mRemoteViewMap.get(fromUserId);
    278.                             if (surfaceViewRenderer != null) {
    279.                                 ((ViewGroup) surfaceViewRenderer.getParent()).removeView(surfaceViewRenderer);
    280.                                 mRemoteViewMap.remove(fromUserId);
    281.                             }
    282.                         }
    283.                     });
    284.                 }
    285.             }
    286.  
    287.             @Override
    288.             public void onIceConnectionReceivingChange(boolean b) {
    289.  
    290.             }
    291.  
    292.             @Override
    293.             public void onIceGatheringChange(PeerConnection.IceGatheringState iceGatheringState) {
    294.  
    295.             }
    296.  
    297.             @Override
    298.             public void onIceCandidate(IceCandidate iceCandidate) {
    299.                 ShowLogUtil.verbose("onIceCandidate--->" + iceCandidate);
    300.                 sendIceCandidate(iceCandidate, fromUserId);
    301.             }
    302.  
    303.             @Override
    304.             public void onIceCandidatesRemoved(IceCandidate[] iceCandidates) {
    305.  
    306.             }
    307.  
    308.             @Override
    309.             public void onAddStream(MediaStream mediaStream) {
    310.                 ShowLogUtil.verbose("onAddStream--->" + mediaStream);
    311.                 if (mediaStream == null || mediaStream.videoTracks == null || mediaStream.videoTracks.isEmpty()) {
    312.                     return;
    313.                 }
    314.                 runOnUiThread(new Runnable() {
    315.                     @Override
    316.                     public void run() {
    317.                         SurfaceViewRenderer surfaceViewRenderer = mRemoteViewMap.get(fromUserId);
    318.                         if (surfaceViewRenderer != null) {
    319.                             mediaStream.videoTracks.get(0).addSink(surfaceViewRenderer);
    320.                         }
    321.                     }
    322.                 });
    323.             }
    324.  
    325.             @Override
    326.             public void onRemoveStream(MediaStream mediaStream) {
    327.             }
    328.  
    329.             @Override
    330.             public void onDataChannel(DataChannel dataChannel) {
    331.  
    332.             }
    333.  
    334.             @Override
    335.             public void onRenegotiationNeeded() {
    336.  
    337.             }
    338.  
    339.             @Override
    340.             public void onAddTrack(RtpReceiver rtpReceiver, MediaStream[] mediaStreams) {
    341.  
    342.             }
    343.         });
    344.         return peerConnection;
    345.     }
    346.  
    347.     private void join() {
    348.         try {
    349.             JSONObject jsonObject = new JSONObject();
    350.             jsonObject.put("msgType", "join");
    351.             jsonObject.put("userId", mUserId);
    352.             mWebSocketClientHelper.send(jsonObject.toString());
    353.         } catch (JSONException e) {
    354.             e.printStackTrace();
    355.         }
    356.     }
    357.  
    358.     private void quit() {
    359.         try {
    360.             JSONObject jsonObject = new JSONObject();
    361.             jsonObject.put("msgType", "quit");
    362.             jsonObject.put("userId", mUserId);
    363.             mWebSocketClientHelper.send(jsonObject.toString());
    364.         } catch (JSONException e) {
    365.             e.printStackTrace();
    366.         }
    367.         new Thread(new Runnable() {
    368.             @Override
    369.             public void run() {
    370.                 for (PeerConnection peerConnection : mPeerConnectionMap.values()) {
    371.                     peerConnection.close();
    372.                 }
    373.                 mPeerConnectionMap.clear();
    374.             }
    375.         }).start();
    376.         for (SurfaceViewRenderer surfaceViewRenderer : mRemoteViewMap.values()) {
    377.             ((ViewGroup) surfaceViewRenderer.getParent()).removeView(surfaceViewRenderer);
    378.         }
    379.         mRemoteViewMap.clear();
    380.     }
    381.  
    382.     private void sendOffer(SessionDescription offer, String toUserId) {
    383.         try {
    384.             JSONObject jsonObject = new JSONObject();
    385.             jsonObject.put("msgType", "sdp");
    386.             jsonObject.put("fromUserId", mUserId);
    387.             jsonObject.put("toUserId", toUserId);
    388.             jsonObject.put("type", "offer");
    389.             jsonObject.put("sdp", offer.description);
    390.             mWebSocketClientHelper.send(jsonObject.toString());
    391.         } catch (JSONException e) {
    392.             e.printStackTrace();
    393.         }
    394.     }
    395.  
    396.     private void receivedOffer(JSONObject jsonObject) {
    397.         String fromUserId = jsonObject.optString("fromUserId");
    398.         PeerConnection peerConnection = mPeerConnectionMap.get(fromUserId);
    399.         if (peerConnection == null) {
    400.             // 创建 PeerConnection
    401.             peerConnection = createPeerConnection(mPeerConnectionFactory, fromUserId);
    402.             // 为 PeerConnection 添加音轨、视轨
    403.             peerConnection.addTrack(mAudioTrack, STREAM_IDS);
    404.             peerConnection.addTrack(mVideoTrack, STREAM_IDS);
    405.             mPeerConnectionMap.put(fromUserId, peerConnection);
    406.         }
    407.         runOnUiThread(new Runnable() {
    408.             @Override
    409.             public void run() {
    410.                 SurfaceViewRenderer surfaceViewRenderer = mRemoteViewMap.get(fromUserId);
    411.                 if (surfaceViewRenderer == null) {
    412.                     // 初始化 SurfaceViewRender ，这个方法非常重要，不初始化黑屏
    413.                     surfaceViewRenderer = new SurfaceViewRenderer(MultipleDemoActivity.this);
    414.                     surfaceViewRenderer.init(mEglBase.getEglBaseContext(), null);
    415.                     surfaceViewRenderer.setLayoutParams(new LinearLayout.LayoutParams(dp2px(MultipleDemoActivity.this, 90), dp2px(MultipleDemoActivity.this, 160)));
    416.                     LinearLayoutCompat llRemotes = findViewById(R.id.ll_remotes);
    417.                     llRemotes.addView(surfaceViewRenderer);
    418.                     mRemoteViewMap.put(fromUserId, surfaceViewRenderer);
    419.                 }
    420.             }
    421.         });
    422.         String type = jsonObject.optString("type");
    423.         String sdp = jsonObject.optString("sdp");
    424.         PeerConnection finalPeerConnection = peerConnection;
    425.         // 将 offer sdp 作为参数 setRemoteDescription
    426.         SessionDescription sessionDescription = new SessionDescription(SessionDescription.Type.fromCanonicalForm(type), sdp);
    427.         peerConnection.setRemoteDescription(new MySdpObserver() {
    428.             @Override
    429.             public void onCreateSuccess(SessionDescription sessionDescription) {
    430.             }
    431.  
    432.             @Override
    433.             public void onSetSuccess() {
    434.                 ShowLogUtil.debug(fromUserId + " set remote sdp success.");
    435.                 // 通过 PeerConnection 创建 answer，获取 sdp
    436.                 MediaConstraints mediaConstraints = new MediaConstraints();
    437.                 finalPeerConnection.createAnswer(new MySdpObserver() {
    438.                     @Override
    439.                     public void onCreateSuccess(SessionDescription sessionDescription) {
    440.                         ShowLogUtil.verbose(fromUserId + "create answer success.");
    441.                         // 将 answer sdp 作为参数 setLocalDescription
    442.                         finalPeerConnection.setLocalDescription(new MySdpObserver() {
    443.                             @Override
    444.                             public void onCreateSuccess(SessionDescription sessionDescription) {
    445.  
    446.                             }
    447.  
    448.                             @Override
    449.                             public void onSetSuccess() {
    450.                                 ShowLogUtil.verbose(fromUserId + " set local sdp success.");
    451.                                 // 发送 answer sdp
    452.                                 sendAnswer(sessionDescription, fromUserId);
    453.                             }
    454.                         }, sessionDescription);
    455.                     }
    456.  
    457.                     @Override
    458.                     public void onSetSuccess() {
    459.  
    460.                     }
    461.                 }, mediaConstraints);
    462.             }
    463.         }, sessionDescription);
    464.     }
    465.  
    466.     private void sendAnswer(SessionDescription answer, String toUserId) {
    467.         try {
    468.             JSONObject jsonObject = new JSONObject();
    469.             jsonObject.put("msgType", "sdp");
    470.             jsonObject.put("fromUserId", mUserId);
    471.             jsonObject.put("toUserId", toUserId);
    472.             jsonObject.put("type", "answer");
    473.             jsonObject.put("sdp", answer.description);
    474.             mWebSocketClientHelper.send(jsonObject.toString());
    475.         } catch (JSONException e) {
    476.             e.printStackTrace();
    477.         }
    478.     }
    479.  
    480.     private void receivedAnswer(JSONObject jsonObject) {
    481.         String fromUserId = jsonObject.optString("fromUserId");
    482.         PeerConnection peerConnection = mPeerConnectionMap.get(fromUserId);
    483.         if (peerConnection == null) {
    484.             peerConnection = createPeerConnection(mPeerConnectionFactory, fromUserId);
    485.             peerConnection.addTrack(mAudioTrack, STREAM_IDS);
    486.             peerConnection.addTrack(mVideoTrack, STREAM_IDS);
    487.             mPeerConnectionMap.put(fromUserId, peerConnection);
    488.         }
    489.         runOnUiThread(new Runnable() {
    490.             @Override
    491.             public void run() {
    492.                 SurfaceViewRenderer surfaceViewRenderer = mRemoteViewMap.get(fromUserId);
    493.                 if (surfaceViewRenderer == null) {
    494.                     // 初始化 SurfaceViewRender ，这个方法非常重要，不初始化黑屏
    495.                     surfaceViewRenderer = new SurfaceViewRenderer(MultipleDemoActivity.this);
    496.                     surfaceViewRenderer.init(mEglBase.getEglBaseContext(), null);
    497.                     surfaceViewRenderer.setLayoutParams(new LinearLayout.LayoutParams(dp2px(MultipleDemoActivity.this, 90), dp2px(MultipleDemoActivity.this, 160)));
    498.                     LinearLayoutCompat llRemotes = findViewById(R.id.ll_remotes);
    499.                     llRemotes.addView(surfaceViewRenderer);
    500.                     mRemoteViewMap.put(fromUserId, surfaceViewRenderer);
    501.                 }
    502.             }
    503.         });
    504.         String type = jsonObject.optString("type");
    505.         String sdp = jsonObject.optString("sdp");
    506.         // 收到 answer sdp，将 answer sdp 作为参数 setRemoteDescription
    507.         SessionDescription sessionDescription = new SessionDescription(SessionDescription.Type.fromCanonicalForm(type), sdp);
    508.         peerConnection.setRemoteDescription(new MySdpObserver() {
    509.             @Override
    510.             public void onCreateSuccess(SessionDescription sessionDescription) {
    511.             }
    512.  
    513.             @Override
    514.             public void onSetSuccess() {
    515.                 ShowLogUtil.debug(fromUserId + " set remote sdp success.");
    516.             }
    517.         }, sessionDescription);
    518.     }
    519.  
    520.     private void sendIceCandidate(IceCandidate iceCandidate, String toUserId) {
    521.         try {
    522.             JSONObject jsonObject = new JSONObject();
    523.             jsonObject.put("msgType", "iceCandidate");
    524.             jsonObject.put("fromUserId", mUserId);
    525.             jsonObject.put("toUserId", toUserId);
    526.             jsonObject.put("id", iceCandidate.sdpMid);
    527.             jsonObject.put("label", iceCandidate.sdpMLineIndex);
    528.             jsonObject.put("candidate", iceCandidate.sdp);
    529.             mWebSocketClientHelper.send(jsonObject.toString());
    530.         } catch (JSONException e) {
    531.             e.printStackTrace();
    532.         }
    533.     }
    534.  
    535.     private void receivedCandidate(JSONObject jsonObject) {
    536.         String fromUserId = jsonObject.optString("fromUserId");
    537.         PeerConnection peerConnection = mPeerConnectionMap.get(fromUserId);
    538.         if (peerConnection == null) {
    539.             return;
    540.         }
    541.         String id = jsonObject.optString("id");
    542.         int label = jsonObject.optInt("label");
    543.         String candidate = jsonObject.optString("candidate");
    544.         IceCandidate iceCandidate = new IceCandidate(id, label, candidate);
    545.         peerConnection.addIceCandidate(iceCandidate);
    546.     }
    547.  
    548.     private void receivedOtherJoin(JSONObject jsonObject) throws JSONException {
    549.         String userId = jsonObject.optString("userId");
    550.         PeerConnection peerConnection = mPeerConnectionMap.get(userId);
    551.         if (peerConnection == null) {
    552.             // 创建 PeerConnection
    553.             peerConnection = createPeerConnection(mPeerConnectionFactory, userId);
    554.             // 为 PeerConnection 添加音轨、视轨
    555.             peerConnection.addTrack(mAudioTrack, STREAM_IDS);
    556.             peerConnection.addTrack(mVideoTrack, STREAM_IDS);
    557.             mPeerConnectionMap.put(userId, peerConnection);
    558.         }
    559.         runOnUiThread(new Runnable() {
    560.             @Override
    561.             public void run() {
    562.                 SurfaceViewRenderer surfaceViewRenderer = mRemoteViewMap.get(userId);
    563.                 if (surfaceViewRenderer == null) {
    564.                     // 初始化 SurfaceViewRender ，这个方法非常重要，不初始化黑屏
    565.                     surfaceViewRenderer = new SurfaceViewRenderer(MultipleDemoActivity.this);
    566.                     surfaceViewRenderer.init(mEglBase.getEglBaseContext(), null);
    567.                     surfaceViewRenderer.setLayoutParams(new LinearLayout.LayoutParams(dp2px(MultipleDemoActivity.this, 90), dp2px(MultipleDemoActivity.this, 160)));
    568.                     LinearLayoutCompat llRemotes = findViewById(R.id.ll_remotes);
    569.                     llRemotes.addView(surfaceViewRenderer);
    570.                     mRemoteViewMap.put(userId, surfaceViewRenderer);
    571.                 }
    572.             }
    573.         });
    574.         PeerConnection finalPeerConnection = peerConnection;
    575.         // 通过 PeerConnection 创建 offer，获取 sdp
    576.         MediaConstraints mediaConstraints = new MediaConstraints();
    577.         peerConnection.createOffer(new MySdpObserver() {
    578.             @Override
    579.             public void onCreateSuccess(SessionDescription sessionDescription) {
    580.                 ShowLogUtil.verbose(userId + " create offer success.");
    581.                 // 将 offer sdp 作为参数 setLocalDescription
    582.                 finalPeerConnection.setLocalDescription(new MySdpObserver() {
    583.                     @Override
    584.                     public void onCreateSuccess(SessionDescription sessionDescription) {
    585.  
    586.                     }
    587.  
    588.                     @Override
    589.                     public void onSetSuccess() {
    590.                         ShowLogUtil.verbose(userId + " set local sdp success.");
    591.                         // 发送 offer sdp
    592.                         sendOffer(sessionDescription, userId);
    593.                     }
    594.                 }, sessionDescription);
    595.             }
    596.  
    597.             @Override
    598.             public void onSetSuccess() {
    599.  
    600.             }
    601.         }, mediaConstraints);
    602.     }
    603.  
    604.     private void receivedOtherQuit(JSONObject jsonObject) throws JSONException {
    605.         String userId = jsonObject.optString("userId");
    606.         PeerConnection peerConnection = mPeerConnectionMap.get(userId);
    607.         if (peerConnection != null) {
    608.             peerConnection.close();
    609.             mPeerConnectionMap.remove(userId);
    610.         }
    611.         runOnUiThread(new Runnable() {
    612.             @Override
    613.             public void run() {
    614.                 SurfaceViewRenderer surfaceViewRenderer = mRemoteViewMap.get(userId);
    615.                 if (surfaceViewRenderer != null) {
    616.                     ((ViewGroup) surfaceViewRenderer.getParent()).removeView(surfaceViewRenderer);
    617.                     mRemoteViewMap.remove(userId);
    618.                 }
    619.             }
    620.         });
    621.     }
    622.  
    623.     public static int dp2px(Context context, float dp) {
    624.         float density = context.getResources().getDisplayMetrics().density;
    625.         return (int) (dp * density + 0.5f);
    626.     }
    627. }

    其中 WebSocketClientHelper 跟之前一样的，其余逻辑跟 H5 是一样的。多人通话至少需要三个端，我们就等所有端都实现了再最后来看效果。

    六、iOS

    1.添加依赖

    这个跟前两篇的一样，不需要额外引入。

    2.MultipleDemoViewController.swift

    1. //
    2. //  LocalDemoViewController.swift
    3. //  WebRTCDemo-iOS
    4. //
    5. //  Created by 覃浩 on 2023/3/21.
    6. //
    7.  
    8. import UIKit
    9. import WebRTC
    10. import SnapKit
    11.  
    12. class MultipleDemoViewController: UIViewController {
    13.     private static let AUDIO_TRACK_ID = "ARDAMSa0"
    14.     private static let VIDEO_TRACK_ID = "ARDAMSv0"
    15.     private static let STREAM_IDS = ["ARDAMS"]
    16.     private static let WIDTH = 1280
    17.     private static let HEIGHT = 720
    18.     private static let FPS = 30
    19.     
    20.     private var localView: RTCEAGLVideoView!
    21.     private var remoteViews: UIScrollView!
    22.     private var peerConnectionFactory: RTCPeerConnectionFactory!
    23.     private var audioTrack: RTCAudioTrack?
    24.     private var videoTrack: RTCVideoTrack?
    25.     /**
    26.      iOS 需要将 Capturer 保存为全局变量，否则无法渲染本地画面
    27.      */
    28.     private var videoCapturer: RTCVideoCapturer?
    29.     /**
    30.      iOS 需要将远端流保存为全局变量，否则无法渲染远端画面
    31.      */
    32.     private var remoteStreamDict: [String : RTCMediaStream] = [:]
    33. //    private let userId = UUID().uuidString
    34.     private let userId = "iOS"
    35.     private var peerConnectionDict: [String : RTCPeerConnection] = [:]
    36.     private var remoteViewDict: [String : RTCEAGLVideoView] = [:]
    37.     private var lbWebSocketState: UILabel? = nil
    38.     private var tfServerUrl: UITextField? = nil
    39.     private let webSocketHelper = WebSocketClientHelper()
    40.     
    41.     override func viewDidLoad() {
    42.         super.viewDidLoad()
    43.         // 表明 View 不要扩展到整个屏幕，而是在 NavigationBar 下的区域
    44.         edgesForExtendedLayout = UIRectEdge()
    45.         self.view.backgroundColor = UIColor.black
    46.         // WebSocket 状态文本框
    47.         lbWebSocketState = UILabel()
    48.         lbWebSocketState!.textColor = UIColor.white
    49.         lbWebSocketState!.text = "WebSocket 已断开"
    50.         self.view.addSubview(lbWebSocketState!)
    51.         lbWebSocketState!.snp.makeConstraints({ make in
    52.             make.left.equalToSuperview().offset(30)
    53.             make.right.equalToSuperview().offset(-30)
    54.             make.height.equalTo(40)
    55.         })
    56.         // 服务器地址输入框
    57.         tfServerUrl = UITextField()
    58.         tfServerUrl!.textColor = UIColor.white
    59.         tfServerUrl!.text = "ws://192.168.1.104:8888"
    60.         tfServerUrl!.placeholder = "请输入服务器地址"
    61.         tfServerUrl!.delegate = self
    62.         self.view.addSubview(tfServerUrl!)
    63.         tfServerUrl!.snp.makeConstraints({ make in
    64.             make.left.equalToSuperview().offset(30)
    65.             make.right.equalToSuperview().offset(-30)
    66.             make.height.equalTo(20)
    67.             make.top.equalTo(lbWebSocketState!.snp.bottom).offset(10)
    68.         })
    69.         // 连接 WebSocket 按钮
    70.         let btnConnect = UIButton()
    71.         btnConnect.backgroundColor = UIColor.lightGray
    72.         btnConnect.setTitle("连接 WebSocket", for: .normal)
    73.         btnConnect.setTitleColor(UIColor.black, for: .normal)
    74.         btnConnect.addTarget(self, action: #selector(connect), for: .touchUpInside)
    75.         self.view.addSubview(btnConnect)
    76.         btnConnect.snp.makeConstraints({ make in
    77.             make.left.equalToSuperview().offset(30)
    78.             make.width.equalTo(140)
    79.             make.height.equalTo(40)
    80.             make.top.equalTo(tfServerUrl!.snp.bottom).offset(10)
    81.         })
    82.         // 断开 WebSocket 按钮
    83.         let btnDisconnect = UIButton()
    84.         btnDisconnect.backgroundColor = UIColor.lightGray
    85.         btnDisconnect.setTitle("断开 WebSocket", for: .normal)
    86.         btnDisconnect.setTitleColor(UIColor.black, for: .normal)
    87.         btnDisconnect.addTarget(self, action: #selector(disconnect), for: .touchUpInside)
    88.         self.view.addSubview(btnDisconnect)
    89.         btnDisconnect.snp.makeConstraints({ make in
    90.             make.left.equalToSuperview().offset(30)
    91.             make.width.equalTo(140)
    92.             make.height.equalTo(40)
    93.             make.top.equalTo(btnConnect.snp.bottom).offset(10)
    94.         })
    95.         // 呼叫按钮
    96.         let btnCall = UIButton()
    97.         btnCall.backgroundColor = UIColor.lightGray
    98.         btnCall.setTitle("加入房间", for: .normal)
    99.         btnCall.setTitleColor(UIColor.black, for: .normal)
    100.         btnCall.addTarget(self, action: #selector(join), for: .touchUpInside)
    101.         self.view.addSubview(btnCall)
    102.         btnCall.snp.makeConstraints({ make in
    103.             make.left.equalToSuperview().offset(30)
    104.             make.width.equalTo(160)
    105.             make.height.equalTo(40)
    106.             make.top.equalTo(btnDisconnect.snp.bottom).offset(10)
    107.         })
    108.         // 挂断按钮
    109.         let btnHangUp = UIButton()
    110.         btnHangUp.backgroundColor = UIColor.lightGray
    111.         btnHangUp.setTitle("退出房间", for: .normal)
    112.         btnHangUp.setTitleColor(UIColor.black, for: .normal)
    113.         btnHangUp.addTarget(self, action: #selector(quit), for: .touchUpInside)
    114.         self.view.addSubview(btnHangUp)
    115.         btnHangUp.snp.makeConstraints({ make in
    116.             make.left.equalToSuperview().offset(30)
    117.             make.width.equalTo(160)
    118.             make.height.equalTo(40)
    119.             make.top.equalTo(btnCall.snp.bottom).offset(10)
    120.         })
    121.         webSocketHelper.setDelegate(delegate: self)
    122.         // 初始化 PeerConnectionFactory
    123.         initPeerConnectionFactory()
    124.         // 创建 EglBase
    125.         // 创建 PeerConnectionFactory
    126.         peerConnectionFactory = createPeerConnectionFactory()
    127.         // 创建音轨
    128.         audioTrack = createAudioTrack(peerConnectionFactory: peerConnectionFactory)
    129.         // 创建视轨
    130.         videoTrack = createVideoTrack(peerConnectionFactory: peerConnectionFactory)
    131.         let tuple = createVideoCapturer(videoSource: videoTrack!.source)
    132.         let captureDevice = tuple.captureDevice
    133.         videoCapturer = tuple.videoCapture
    134.         // 初始化本地视频渲染控件
    135.         localView = RTCEAGLVideoView()
    136.         localView.delegate = self
    137.         self.view.insertSubview(localView,at: 0)
    138.         localView.snp.makeConstraints({ make in
    139.             make.width.equalToSuperview()
    140.             make.height.equalTo(localView.snp.width).multipliedBy(16.0/9.0)
    141.             make.centerY.equalToSuperview()
    142.         })
    143.         videoTrack?.add(localView!)
    144.         // 开始本地渲染
    145.         (videoCapturer as? RTCCameraVideoCapturer)?.startCapture(with: captureDevice!, format: captureDevice!.activeFormat, fps: MultipleDemoViewController.FPS)
    146.         // 初始化远端视频渲染控件容器
    147.         remoteViews = UIScrollView()
    148.         self.view.insertSubview(remoteViews, aboveSubview: localView)
    149.         remoteViews.snp.makeConstraints { maker in
    150.             maker.width.equalTo(90)
    151.             maker.top.equalToSuperview().offset(30)
    152.             maker.right.equalToSuperview().offset(-30)
    153.             maker.bottom.equalToSuperview().offset(-30)
    154.         }
    155.     }
    156.     
    157.     override func viewDidDisappear(_ animated: Bool) {
    158.         (videoCapturer as? RTCCameraVideoCapturer)?.stopCapture()
    159.         videoCapturer = nil
    160.         for peerConnection in peerConnectionDict.values {
    161.             peerConnection.close()
    162.         }
    163.         peerConnectionDict.removeAll(keepingCapacity: false)
    164.         remoteViewDict.removeAll(keepingCapacity: false)
    165.         remoteStreamDict.removeAll(keepingCapacity: false)
    166.         webSocketHelper.disconnect()
    167.     }
    168.     
    169.     private func initPeerConnectionFactory() {
    170.         RTCPeerConnectionFactory.initialize()
    171.     }
    172.     
    173.     private func createPeerConnectionFactory() -> RTCPeerConnectionFactory {
    174.         var videoEncoderFactory = RTCDefaultVideoEncoderFactory()
    175.         var videoDecoderFactory = RTCDefaultVideoDecoderFactory()
    176.         if TARGET_OS_SIMULATOR != 0 {
    177.             videoEncoderFactory = RTCSimluatorVideoEncoderFactory()
    178.             videoDecoderFactory = RTCSimulatorVideoDecoderFactory()
    179.         }
    180.         return RTCPeerConnectionFactory(encoderFactory: videoEncoderFactory, decoderFactory: videoDecoderFactory)
    181.     }
    182.     
    183.     private func createAudioTrack(peerConnectionFactory: RTCPeerConnectionFactory) -> RTCAudioTrack {
    184.         let mandatoryConstraints : [String : String] = [:]
    185.         let optionalConstraints : [String : String] = [:]
    186.         let audioSource = peerConnectionFactory.audioSource(with: RTCMediaConstraints(mandatoryConstraints: mandatoryConstraints, optionalConstraints: optionalConstraints))
    187.         let audioTrack = peerConnectionFactory.audioTrack(with: audioSource, trackId: MultipleDemoViewController.AUDIO_TRACK_ID)
    188.         audioTrack.isEnabled = true
    189.         return audioTrack
    190.     }
    191.     
    192.     private func createVideoTrack(peerConnectionFactory: RTCPeerConnectionFactory) -> RTCVideoTrack? {
    193.         let videoSource = peerConnectionFactory.videoSource()
    194.         let videoTrack = peerConnectionFactory.videoTrack(with: videoSource, trackId: MultipleDemoViewController.VIDEO_TRACK_ID)
    195.         videoTrack.isEnabled = true
    196.         return videoTrack
    197.     }
    198.     
    199.     private func createVideoCapturer(videoSource: RTCVideoSource) -> (captureDevice: AVCaptureDevice?, videoCapture: RTCVideoCapturer?) {
    200.         let videoCapturer = RTCCameraVideoCapturer(delegate: videoSource)
    201.         let captureDevices = RTCCameraVideoCapturer.captureDevices()
    202.         if (captureDevices.count == 0) {
    203.             return (nil, nil)
    204.         }
    205.         var captureDevice: AVCaptureDevice?
    206.         for c in captureDevices {
    207.             // 前摄像头
    208.              if (c.position == .front) {
    209.                 captureDevice = c
    210.                 break
    211.             }
    212.         }
    213.         if (captureDevice == nil) {
    214.             return (nil, nil)
    215.         }
    216.         return (captureDevice, videoCapturer)
    217.     }
    218.     
    219.     private func createPeerConnection(peerConnectionFactory: RTCPeerConnectionFactory, fromUserId: String) -> RTCPeerConnection {
    220.         let configuration = RTCConfiguration()
    221.         //        configuration.sdpSemantics = .unifiedPlan
    222.         //        configuration.continualGatheringPolicy = .gatherContinually
    223.         //        configuration.iceServers = [RTCIceServer(urlStrings: ["stun:stun.l.google.com:19302"])]
    224.         let mandatoryConstraints : [String : String] = [:]
    225.         //      let mandatoryConstraints = [kRTCMediaConstraintsOfferToReceiveAudio: kRTCMediaConstraintsValueTrue,
    226.         //                                  kRTCMediaConstraintsOfferToReceiveVideo: kRTCMediaConstraintsValueTrue]
    227.         let optionalConstraints : [String : String] = [:]
    228.         //        let optionalConstraints = ["DtlsSrtpKeyAgreement" : kRTCMediaConstraintsValueTrue]
    229.         let mediaConstraints = RTCMediaConstraints(mandatoryConstraints: mandatoryConstraints, optionalConstraints: optionalConstraints)
    230.         return peerConnectionFactory.peerConnection(with: configuration, constraints: mediaConstraints, delegate: self)
    231.     }
    232.     
    233.     @objc private func connect() {
    234.         webSocketHelper.connect(url: tfServerUrl!.text!.trimmingCharacters(in: .whitespacesAndNewlines))
    235.     }
    236.     @objc private func disconnect() {
    237.         webSocketHelper.disconnect()
    238.     }
    239.     
    240.     @objc private func join() {
    241.         var jsonObject = [String : String]()
    242.         jsonObject["msgType"] = "join"
    243.         jsonObject["userId"] = userId
    244.         do {
    245.             let data = try JSONSerialization.data(withJSONObject: jsonObject)
    246.             webSocketHelper.send(message: String(data: data, encoding: .utf8)!)
    247.         } catch {
    248.             ShowLogUtil.verbose("error--->\(error)")
    249.         }
    250.     }
    251.     
    252.     @objc private func quit() {
    253.         var jsonObject = [String : String]()
    254.         jsonObject["msgType"] = "quit"
    255.         jsonObject["userId"] = userId
    256.         do {
    257.             let data = try JSONSerialization.data(withJSONObject: jsonObject)
    258.             webSocketHelper.send(message: String(data: data, encoding: .utf8)!)
    259.         } catch {
    260.             ShowLogUtil.verbose("error--->\(error)")
    261.         }
    262.         for peerConnection in peerConnectionDict.values {
    263.             peerConnection.close()
    264.         }
    265.         peerConnectionDict.removeAll(keepingCapacity: false)
    266.         for (key, value) in remoteViewDict {
    267.             remoteViews.removeSubview(view: value)
    268.         }
    269.         remoteViewDict.removeAll(keepingCapacity: false)
    270.     }
    271.  
    272.     
    273.     private func sendOffer(offer: RTCSessionDescription, toUserId: String) {
    274.         var jsonObject = [String : String]()
    275.         jsonObject["msgType"] = "sdp"
    276.         jsonObject["fromUserId"] = userId
    277.         jsonObject["toUserId"] = toUserId
    278.         jsonObject["type"] = "offer"
    279.         jsonObject["sdp"] = offer.sdp
    280.         do {
    281.             let data = try JSONSerialization.data(withJSONObject: jsonObject)
    282.             webSocketHelper.send(message: String(data: data, encoding: .utf8)!)
    283.         } catch {
    284.             ShowLogUtil.verbose("error--->\(error)")
    285.         }
    286.     }
    287.     
    288.     private func receivedOffer(jsonObject: [String : Any]) {
    289.         let fromUserId = jsonObject["fromUserId"] as? String ?? ""
    290.         var peerConnection = peerConnectionDict[fromUserId]
    291.         if (peerConnection == nil) {
    292.             // 创建 PeerConnection
    293.             peerConnection = createPeerConnection(peerConnectionFactory: peerConnectionFactory, fromUserId: fromUserId)
    294.             // 为 PeerConnection 添加音轨、视轨
    295.             peerConnection!.add(audioTrack!, streamIds: MultipleDemoViewController.STREAM_IDS)
    296.             peerConnection!.add(videoTrack!, streamIds: MultipleDemoViewController.STREAM_IDS)
    297.             peerConnectionDict[fromUserId] = peerConnection
    298.         }
    299.         var remoteView = remoteViewDict[fromUserId]
    300.         if (remoteView == nil) {
    301.             let x = 0
    302.             var y = 0
    303.             if (remoteViews.subviews.count == 0) {
    304.                 y = 0
    305.             } else {
    306.                 for i in 0..<remoteViews.subviews.count {
    307.                     y += Int(remoteViews.subviews[i].frame.height)
    308.                 }
    309.             }
    310.             let width = 90
    311.             let height = width / 9 * 16
    312.             remoteView = RTCEAGLVideoView(frame: CGRect(x: x, y: y, width: width, height: height))
    313.             remoteViews.appendSubView(view: remoteView!)
    314.             remoteViewDict[fromUserId] = remoteView
    315.         }
    316.         // 将 offer sdp 作为参数 setRemoteDescription
    317.         let type = jsonObject["type"] as? String
    318.         let sdp = jsonObject["sdp"] as? String
    319.         let sessionDescription = RTCSessionDescription(type: .offer, sdp: sdp!)
    320.         peerConnection?.setRemoteDescription(sessionDescription, completionHandler: { _ in
    321.             ShowLogUtil.verbose("\(fromUserId) set remote sdp success.")
    322.             // 通过 PeerConnection 创建 answer，获取 sdp
    323.             let mandatoryConstraints : [String : String] = [:]
    324.             let optionalConstraints : [String : String] = [:]
    325.             let mediaConstraints = RTCMediaConstraints(mandatoryConstraints: mandatoryConstraints, optionalConstraints: optionalConstraints)
    326.             peerConnection?.answer(for: mediaConstraints, completionHandler: { sessionDescription, error in
    327.                 ShowLogUtil.verbose("\(fromUserId) create answer success.")
    328.                 // 将 answer sdp 作为参数 setLocalDescription
    329.                 peerConnection?.setLocalDescription(sessionDescription!, completionHandler: { _ in
    330.                     ShowLogUtil.verbose("\(fromUserId) set local sdp success.")
    331.                     // 发送 answer sdp
    332.                     self.sendAnswer(answer: sessionDescription!, toUserId: fromUserId)
    333.                 })
    334.             })
    335.         })
    336.     }
    337.     
    338.     private func sendAnswer(answer: RTCSessionDescription, toUserId: String) {
    339.         var jsonObject = [String : String]()
    340.         jsonObject["msgType"] = "sdp"
    341.         jsonObject["fromUserId"] = userId
    342.         jsonObject["toUserId"] = toUserId
    343.         jsonObject["type"] = "answer"
    344.         jsonObject["sdp"] = answer.sdp
    345.         do {
    346.             let data = try JSONSerialization.data(withJSONObject: jsonObject)
    347.             webSocketHelper.send(message: String(data: data, encoding: .utf8)!)
    348.         } catch {
    349.             ShowLogUtil.verbose("error--->\(error)")
    350.         }
    351.     }
    352.     
    353.     private func receivedAnswer(jsonObject: [String : Any]) {
    354.         let fromUserId = jsonObject["fromUserId"] as? String ?? ""
    355.         var peerConnection = peerConnectionDict[fromUserId]
    356.         if (peerConnection == nil) {
    357.             peerConnection = createPeerConnection(peerConnectionFactory: peerConnectionFactory, fromUserId: fromUserId)
    358.             peerConnection!.add(audioTrack!, streamIds: MultipleDemoViewController.STREAM_IDS)
    359.             peerConnection!.add(videoTrack!, streamIds: MultipleDemoViewController.STREAM_IDS)
    360.             peerConnectionDict[fromUserId] = peerConnection
    361.         }
    362.         DispatchQueue.main.async {
    363.             var remoteView = self.remoteViewDict[fromUserId]
    364.             if (remoteView == nil) {
    365.                 let x = 0
    366.                 var y = 0
    367.                 if (self.remoteViews.subviews.count == 0) {
    368.                     y = 0
    369.                 } else {
    370.                     for i in 0..<self.remoteViews.subviews.count {
    371.                         y += Int(self.remoteViews.subviews[i].frame.height)
    372.                     }
    373.                 }
    374.                 let width = 90
    375.                 let height = width / 9 * 16
    376.                 remoteView = RTCEAGLVideoView(frame: CGRect(x: x, y: y, width: width, height: height))
    377.                 self.remoteViews.appendSubView(view: remoteView!)
    378.                 self.remoteViewDict[fromUserId] = remoteView
    379.             }
    380.         }
    381.         // 收到 answer sdp，将 answer sdp 作为参数 setRemoteDescription
    382.         let type = jsonObject["type"] as? String
    383.         let sdp = jsonObject["sdp"] as? String
    384.         let sessionDescription = RTCSessionDescription(type: .answer, sdp: sdp!)
    385.         peerConnection!.setRemoteDescription(sessionDescription, completionHandler: { _ in
    386.             ShowLogUtil.verbose(fromUserId + " set remote sdp success.");
    387.         })
    388.     }
    389.     
    390.     private func sendIceCandidate(iceCandidate: RTCIceCandidate, toUserId: String)  {
    391.         var jsonObject = [String : Any]()
    392.         jsonObject["msgType"] = "iceCandidate"
    393.         jsonObject["fromUserId"] = userId
    394.         jsonObject["toUserId"] = toUserId
    395.         jsonObject["id"] = iceCandidate.sdpMid
    396.         jsonObject["label"] = iceCandidate.sdpMLineIndex
    397.         jsonObject["candidate"] = iceCandidate.sdp
    398.         do {
    399.             let data = try JSONSerialization.data(withJSONObject: jsonObject)
    400.             webSocketHelper.send(message: String(data: data, encoding: .utf8)!)
    401.         } catch {
    402.             ShowLogUtil.verbose("error--->\(error)")
    403.         }
    404.     }
    405.     
    406.     private func receivedCandidate(jsonObject: [String : Any]) {
    407.         let fromUserId = jsonObject["fromUserId"] as? String ?? ""
    408.         let peerConnection = peerConnectionDict[fromUserId]
    409.         if (peerConnection == nil) {
    410.             return
    411.         }
    412.         let id = jsonObject["id"] as? String
    413.         let label = jsonObject["label"] as? Int32
    414.         let candidate = jsonObject["candidate"] as? String
    415.         let iceCandidate = RTCIceCandidate(sdp: candidate!, sdpMLineIndex: label!, sdpMid: id)
    416.         peerConnection!.add(iceCandidate)
    417.     }
    418.     
    419.     private func receiveOtherJoin(jsonObject: [String : Any]) {
    420.         let userId = jsonObject["userId"] as? String ?? ""
    421.         var peerConnection = peerConnectionDict[userId]
    422.         if (peerConnection == nil) {
    423.             // 创建 PeerConnection
    424.             peerConnection = createPeerConnection(peerConnectionFactory: peerConnectionFactory, fromUserId: userId)
    425.             // 为 PeerConnection 添加音轨、视轨
    426.             peerConnection!.add(audioTrack!, streamIds: MultipleDemoViewController.STREAM_IDS)
    427.             peerConnection!.add(videoTrack!, streamIds: MultipleDemoViewController.STREAM_IDS)
    428.             peerConnectionDict[userId] = peerConnection
    429.         }
    430.         DispatchQueue.main.async {
    431.             var remoteView = self.remoteViewDict[userId]
    432.             if (remoteView == nil) {
    433.                 let x = 0
    434.                 var y = 0
    435.                 if (self.remoteViews.subviews.count == 0) {
    436.                     y = 0
    437.                 } else {
    438.                     for i in 0..<self.remoteViews.subviews.count {
    439.                         y += Int(self.remoteViews.subviews[i].frame.height)
    440.                     }
    441.                 }
    442.                 let width = 90
    443.                 let height = width / 9 * 16
    444.                 remoteView = RTCEAGLVideoView(frame: CGRect(x: x, y: y, width: width, height: height))
    445.                 self.remoteViews.appendSubView(view: remoteView!)
    446.                 self.remoteViewDict[userId] = remoteView
    447.             }
    448.         }
    449.         // 通过 PeerConnection 创建 offer，获取 sdp
    450.         let mandatoryConstraints : [String : String] = [:]
    451.         let optionalConstraints : [String : String] = [:]
    452.         let mediaConstraints = RTCMediaConstraints(mandatoryConstraints: mandatoryConstraints, optionalConstraints: optionalConstraints)
    453.         peerConnection?.offer(for: mediaConstraints, completionHandler: { sessionDescription, error in
    454.             ShowLogUtil.verbose("\(userId) create offer success.")
    455.             if (error != nil) {
    456.                 return
    457.             }
    458.             // 将 offer sdp 作为参数 setLocalDescription
    459.             peerConnection?.setLocalDescription(sessionDescription!, completionHandler: { _ in
    460.                 ShowLogUtil.verbose("\(userId) set local sdp success.")
    461.                 // 发送 offer sdp
    462.                 self.sendOffer(offer: sessionDescription!, toUserId: userId)
    463.             })
    464.         })
    465.     }
    466.     
    467.     private func receiveOtherQuit(jsonObject: [String : Any]) {
    468.         let userId = jsonObject["userId"] as? String ?? ""
    469.         Thread(block: {
    470.             let peerConnection = self.peerConnectionDict[userId]
    471.             if (peerConnection != nil) {
    472.                 peerConnection?.close()
    473.                 self.peerConnectionDict.removeValue(forKey: userId)
    474.             }
    475.         }).start()
    476.         let remoteView = remoteViewDict[userId]
    477.         if (remoteView != nil) {
    478.             remoteViews.removeSubview(view: remoteView!)
    479.             remoteViewDict.removeValue(forKey: userId)
    480.         }
    481.         remoteStreamDict.removeValue(forKey: userId)
    482.     }
    483. }
    484.  
    485. // MARK: - RTCVideoViewDelegate
    486. extension MultipleDemoViewController: RTCVideoViewDelegate {
    487.     func videoView(_ videoView: RTCVideoRenderer, didChangeVideoSize size: CGSize) {
    488.     }
    489. }
    490.  
    491. // MARK: - RTCPeerConnectionDelegate
    492. extension MultipleDemoViewController: RTCPeerConnectionDelegate {
    493.     func peerConnection(_ peerConnection: RTCPeerConnection, didChange stateChanged: RTCSignalingState) {
    494.     }
    495.     
    496.     func peerConnection(_ peerConnection: RTCPeerConnection, didAdd stream: RTCMediaStream) {
    497.         ShowLogUtil.verbose("peerConnection didAdd stream--->\(stream)")
    498.         var userId: String?
    499.         for (key, value) in peerConnectionDict {
    500.             if (value == peerConnection) {
    501.                 userId = key
    502.             }
    503.         }
    504.         if (userId == nil) {
    505.             return
    506.         }
    507.         remoteStreamDict[userId!] = stream
    508.         let remoteView = remoteViewDict[userId!]
    509.         if (remoteView == nil) {
    510.             return
    511.         }
    512.         if let videoTrack = stream.videoTracks.first {
    513.             ShowLogUtil.verbose("video track found.")
    514.             videoTrack.add(remoteView!)
    515.         }
    516.         if let audioTrack = stream.audioTracks.first{
    517.             ShowLogUtil.verbose("audio track found.")
    518.             audioTrack.source.volume = 8
    519.         }
    520.     }
    521.     
    522.     func peerConnection(_ peerConnection: RTCPeerConnection, didRemove stream: RTCMediaStream) {
    523.     }
    524.     
    525.     func peerConnectionShouldNegotiate(_ peerConnection: RTCPeerConnection) {
    526.     }
    527.     
    528.     func peerConnection(_ peerConnection: RTCPeerConnection, didChange newState: RTCIceConnectionState) {
    529.         if (newState == .disconnected) {
    530.             DispatchQueue.main.async {
    531.                 var userId: String?
    532.                 for (key, value) in self.peerConnectionDict {
    533.                     if (value == peerConnection) {
    534.                         userId = key
    535.                     }
    536.                 }
    537.                 if (userId == nil) {
    538.                     return
    539.                 }
    540.                 Thread(block: {
    541.                     let peerConnection = self.peerConnectionDict[userId!]
    542.                     if (peerConnection != nil) {
    543.                         peerConnection?.close()
    544.                         self.peerConnectionDict.removeValue(forKey: userId!)
    545.                     }
    546.                 }).start()
    547.                 let remoteView = self.remoteViewDict[userId!]
    548.                 if (remoteView != nil) {
    549.                     self.remoteViews.removeSubview(view: remoteView!)
    550.                     self.remoteViewDict.removeValue(forKey: userId!)
    551.                 }
    552.                 self.remoteStreamDict.removeValue(forKey: userId!)
    553.             }
    554.         }
    555.     }
    556.     
    557.     func peerConnection(_ peerConnection: RTCPeerConnection, didChange newState: RTCIceGatheringState) {
    558.     }
    559.     
    560.     func peerConnection(_ peerConnection: RTCPeerConnection, didGenerate candidate: RTCIceCandidate) {
    561. //        ShowLogUtil.verbose("didGenerate candidate--->\(candidate)")
    562.         var userId: String?
    563.         for (key, value) in self.peerConnectionDict {
    564.             if (value == peerConnection) {
    565.                 userId = key
    566.             }
    567.         }
    568.         if (userId == nil) {
    569.             return
    570.         }
    571.         self.sendIceCandidate(iceCandidate: candidate, toUserId: userId!)
    572.     }
    573.     
    574.     func peerConnection(_ peerConnection: RTCPeerConnection, didRemove candidates: [RTCIceCandidate]) {
    575.     }
    576.     
    577.     func peerConnection(_ peerConnection: RTCPeerConnection, didOpen dataChannel: RTCDataChannel) {
    578.     }
    579. }
    580.  
    581. // MARK: - UITextFieldDelegate
    582. extension MultipleDemoViewController: UITextFieldDelegate {
    583.     func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    584.         textField.resignFirstResponder()
    585.         return true
    586.     }
    587. }
    588.  
    589. // MARK: - WebSocketDelegate
    590. extension MultipleDemoViewController: WebSocketDelegate {
    591.     func onOpen() {
    592.         lbWebSocketState?.text = "WebSocket 已连接"
    593.     }
    594.     
    595.     func onClose() {
    596.         lbWebSocketState?.text = "WebSocket 已断开"
    597.     }
    598.     
    599.     func onMessage(message: String) {
    600.         do {
    601.             let data = message.data(using: .utf8)
    602.             let jsonObject: [String : Any] = try JSONSerialization.jsonObject(with: data!) as! [String : Any]
    603.             let msgType = jsonObject["msgType"] as? String
    604.             if ("sdp" == msgType) {
    605.                 let type = jsonObject["type"] as? String;
    606.                 if ("offer" == type) {
    607.                     receivedOffer(jsonObject: jsonObject);
    608.                 } else if ("answer" == type) {
    609.                     receivedAnswer(jsonObject: jsonObject);
    610.                 }
    611.             } else if ("iceCandidate" == msgType) {
    612.                 receivedCandidate(jsonObject: jsonObject);
    613.             } else if ("otherJoin" == msgType) {
    614.                 receiveOtherJoin(jsonObject: jsonObject)
    615.             } else if ("otherQuit" == msgType) {
    616.                 receiveOtherQuit(jsonObject: jsonObject)
    617.             }
    618.         } catch {
    619.         }
    620.     }
    621. }

    其中 UIScrollView 的 appendSubView 和 removeSubView 是我为 UIScrollView 添加的两个扩展方法，方便纵向添加和删除控件：

    1. import UIKit
    2.  
    3. extension UIScrollView {
    4.     func appendSubView(view: UIView) {
    5.         let oldShowsHorizontalScrollIndicator = showsHorizontalScrollIndicator
    6.         let oldShowsVerticalScrollIndicator = showsVerticalScrollIndicator
    7.         showsHorizontalScrollIndicator = false
    8.         showsVerticalScrollIndicator = false
    9.         var y = 0.0
    10.         if (subviews.count == 0) {
    11.             y = 0
    12.         } else {
    13.             for i in 0..<subviews.count {
    14.                 if ("_UIScrollViewScrollIndicator" == String(reflecting: type(of: subviews[i]))){
    15.                     continue
    16.                 }
    17.                 y += subviews[i].frame.height
    18.             }
    19.         }
    20.         view.frame.origin.y = y
    21.         addSubview(view)
    22.         let contentSizeWidth = contentSize.width
    23.         // 重新计算 UIScrollView 内容高度
    24.         var contentSizeHeight = 0.0
    25.         for i in 0..<subviews.count {
    26.             if ("_UIScrollViewScrollIndicator" == String(reflecting: type(of: subviews[i]))){
    27.                 continue
    28.             }
    29.             contentSizeHeight += subviews[i].frame.height
    30.         }
    31.         contentSize = CGSize(width: contentSizeWidth, height: contentSizeHeight)
    32.         showsHorizontalScrollIndicator = oldShowsHorizontalScrollIndicator
    33.         showsVerticalScrollIndicator = oldShowsVerticalScrollIndicator
    34.     }
    35.     
    36.     func removeSubview(view: UIView) {
    37.         let oldShowsHorizontalScrollIndicator = showsHorizontalScrollIndicator
    38.         let oldShowsVerticalScrollIndicator = showsVerticalScrollIndicator
    39.         showsHorizontalScrollIndicator = false
    40.         showsVerticalScrollIndicator = false
    41.         var index = -1
    42.         for i in 0..<subviews.count {
    43.             if (subviews[i] == view) {
    44.                 index = i
    45.                 break
    46.             }
    47.         }
    48.         if (index == -1) {
    49.             return
    50.         }
    51.         for i in index+1..<subviews.count {
    52.             subviews[i].frame.origin.y = subviews[i].frame.origin.y-view.frame.height
    53.         }
    54.         view.removeFromSuperview()
    55.         let contentSizeWidth = contentSize.width
    56.         // 重新计算 UIScrollView 内容高度
    57.         var contentSizeHeight = 0.0
    58.         for i in 0..<subviews.count {
    59.             if ("_UIScrollViewScrollIndicator" == String(reflecting: type(of: subviews[i]))){
    60.                 continue
    61.             }
    62.             contentSizeHeight += subviews[i].frame.height
    63.         }
    64.         contentSize = CGSize(width: contentSizeWidth, height: contentSizeHeight)
    65.         showsHorizontalScrollIndicator = oldShowsHorizontalScrollIndicator
    66.         showsVerticalScrollIndicator = oldShowsVerticalScrollIndicator
    67.     }
    68. }

    好了，现在三端都实现了，我们可以来看看效果了。

    七、效果展示

    运行 MultipleWebSocketServerHelper 的 main() 方法，我们可以看到服务端已经开启，然后我们依次将 H5、Android、iOS 连接 WebSocket，再依次加入房间：

    其中 iOS 在录屏的时候可能是系统限制，画面静止了，但其实跟另外两端是一样的，从另外两端的远端画面可以看到 iOS 是有在采集摄像头画面的。

    八、总结

    实现完成后可以感觉到多人呼叫其实也没有多难，跟点对点 Demo 的流程大致一样，只是我们需要重新定义创建 PeerConnection 的时机，但是流程仍然是不变的。以及信令有些许不同，信令这就是业务层面的，自己按需来设计，上面我定义的消息格式只是一个最简单的实现。

    至此，WebRTC 单人和多人通话的 Demo 全部完成，这就说明它能满足我们基本的视频通话、视频会议等需求，至于丢包处理、美颜滤镜就是网络优化、图像处理相关的了，后续还会记录网络穿透如何去做，以及使用 WebRTC 时的一些小功能，比如屏幕录制、图片投屏、白板等这些视频会议常用的功能。

    九、Demo

    Demo 传送门

  • 相关阅读:
    ctfshow web入门（21-28爆破）
    Codechef [June Long Two 2022] 题解
    MySQL进阶篇（五）- 锁
    批量修改/插入数据库的时候究竟该怎么选择?
    java桌面程序
    Java如何解决浮点数计算不精确问题
    leetCode 583.两个字符串的删除操作 动态规划 + 优化空间复杂度（二维dp、一维dp）
    kingbase SQL优化案例 (union+join层级查询优化 )
    Java声明式事务实战！工作中用这几种就够了！
    [附源码]计算机毕业设计JAVA课堂点名系统
  • 原文地址：https://blog.csdn.net/zgcqflqinhao/article/details/130459346