51CTO首页
AI.x社区
博客
学堂
精品班
直播训练营
企业培训
鸿蒙开发者社区
WOT技术大会
AIGC创新中国行
公众号矩阵
移动端
短视频免费课程课程排行直播课软考学堂
全部课程厂商认证IT技术2024年软考PMP项目管理软考资讯
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO题库小程序
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
账号设置 退出

我们一起做一个视频通话给自己用吧！！！

作者： 付金廷
开发 前端
WebRTC，名称源自网页即时通信(英语：Web Real-Time Communication)的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的 API。它于 2011 年 6 月 1 日开源并在 Google、Mozilla、Opera 支持下被纳入万维网联盟的 W3C 推荐标准。

[[442949]]

讲前须知

WebRTC，名称源自网页即时通信(英语：Web Real-Time Communication)的缩写，是一个支持网页浏览器进行实时语音对话或视频对话的 API。它于 2011 年 6 月 1 日开源并在 Google、Mozilla、Opera 支持下被纳入万维网联盟的 W3C 推荐标准。

首先，他即是 API 也是协议。

其次，他是浏览器进行音频与视频通话的 API，其实还有屏幕共享的功能。

最后，它现在已经处于 W3C 标准，各大浏览器厂商已经对他进行兼容了。

但是如果我们想使用好 webrtc，就得先了解 websocket。而对于 websocket，大家应该都比较熟悉了，比如社交聊天、多人游戏、协同编辑、视频会议、基于位置的应用(地图)、等等需要高实时的场景。我们比较常用的微信、QQ、某些直播软件等等也都是基于 websocket 实现消息与信令的转发。大家看到这里可能在信令这里迟疑了，接着看。

webrtc 是 P2P 的一种技术，什么是 P2P?其实就是 端对端，就说是你的音频、视频流不经过服务器中转，直接由一端发送到另一端。

不经过服务器中转，也就说时候，如果通过过程中服务器突然崩溃，是不是通话还能继续?

是的!但是发送音频视频流前，一定是需要建立 P2P 连接的，建立连接前一定需要服务器进行信令转发，这个信令就是通话两端的标识。

而如果想用 webrtc 实现通话，就得先中转信令、建立连接。而建立连接的话最好是要用 websocket 进行信令转发的。大家都知道，websocket 是个通道，在这个通道的所有端，都可以收到任意一端的消息流，包括发消息的本人。

为什么不经过服务器就可以直接获取到对方的视频音频流呢?是因为建立了 P2P 通道，这个 P2P 在中转信令的时候就已经通了，传输视频音频流的时候还要啥服务器啊。这个时候，肯定有小伙伴表示怀疑，音频视频流可以不通过服务器?是的，我骗了大家，确实要经过服务器，但是只是线上需要服务器转发，如果我们是本地两台或者多台同一局域网的端 进行 webrtc 音频视频流的转发，确实不需要中转服务器，但是线上有可能需要，也有可能不需要，这里又涉及到了一个打洞的概念。

我们平常可能会听到比较牛 x 的词汇，什么打洞、内网穿透、NAT 穿越，各种高大上的东西，其实也是蛮好理解的。大家都知道，两个不同网络下的两台主机不可以直接进行通信，而是需要走公网或者说各自的网关。打洞、内网穿透、NAT 穿越其实就是一个意思，就是使用 udp 让我们两台非同一网络的主机互联，不走公网，直接实现连接。有玩过花生壳的同学一定能理解内网穿透这个概念。

本地开发的话，两台主机连同一局域网，根本不需要内网穿透，就可以直接通信。

线上开发的话，如果能够 STUN 打洞成功，也不需要中转服务器。但是，有打洞不成功的概率，为什么呢，因为没有走公网，没有给运营商带来收益却带来通信成本，肯定要限制。国外打洞成功的概率在 70%，但是国内 50%都不到。

所以，为了防止打洞不成功的情况，我们使用 TURN 中转服务器 转发流媒体数据进行一个最后保障。此外还有一种方式为 逆向连接 ，也可以帮助我们实现 P2P 建立，他的原理是必须是一方走公网，也是有局限性的。

coturn 中继服务器由两部分组成 STUN 与 TURN，STUN 帮助我们打洞，TURN 帮助我们转发流媒体数据。

##连接过程

以下所有 API 截止到 2021.12.06 为最新

端到端连接的基本流程.png

媒体协商开始

  1. A 与 B 通过后端服务进行了 websocket 连接，进入了相同的管道，A 与 B 都可以收到自己与对方的消息与信令。 
  2.  
  3. A Create PeerConnect 创建了 RTCPeerConnection 实例(webrtc 连接实例)。 
  4.  
  5. A AddStream (getUserMedia 方法)获取本地的音频流, 在本地展示。(打开通话先显示自己的视频画面)。 
  6.  
  7. A 调用 webrtc 连接实例的 CreateOffer 方法,创建 offer(SDP 格式描述), 这个 offer 包含 A 自己的媒体信息和编解码信息。 
  8.  
  9. A 调用 webrtc 连接实例的 setLocalDescription 方法将 offer 设置为本地描述,并且向 sturn/turn 中继服务器发送 bind request 请求收集 candidate(候选者)。 
  10.  
  11. A 发送了 offer,信令服务器(后端服务)将其中转到 B。 
  12.  
  13. B 收到 offer, Create PeerConnect 创建了 RTCPeerConnection 实例(webrtc 连接实例)。 
  14.  
  15. B AddStream (getUserMedia 方法)获取本地的音频流, 在本地展示。(显示自己的视频画面)。 
  16.  
  17. B 调用 webrtc 连接实例的 setRemoteDescription 方法,将 offer 设置为自己的远端描述。 
  18.  
  19. B 调用 webrtc 连接实例的 CreateAnswer 方法,创建 answer(SDP 格式描述),这个 answer 包含 A 自己的媒体信息和编解码信息。 
  20.  
  21. B 调用 webrtc 连接实例的 setLocalDescription 方法将 answer 设置为本地描述,并且向 sturn/turn 中继服务器发送 bind request 请求收集 candidate(候选者)。 
  22.  
  23. B 发送了 answer,信令服务器(后端服务)将其中转到 A。 
  24.  
  25. A 收到 answer,调用 webrtc 连接实例的 setRemoteDescription 方法,将 answer 设置为自己的远端描述。 

媒体协商完成

  1. sturn/turn 服务器这时候不在接收到 bind request 请求了, 回应 A onIceCandidate(候选者), 这里面包含 A 的公网 IP 与端口。 
  2.  
  3. A 发送候选者给信令服务器(后端服务), 信令服务器中转到 B。 
  4.  
  5. B 调用 webrtc 连接实例的 addIceCandidate 方法将候选者 A(A 的公网 IP 与端口)添加到 B 的候选者列表。 
  6.  
  7. sturn/turn 服务器这时候不在接收到 bind request 请求了, 回应 B onIceCandidate(候选者), 这里面包含 B 的公网 IP 与端口。 
  8.  
  9. B 发送候选者给信令服务器(后端服务), 信令服务器中转到 A。 
  10.  
  11. A 调用 webrtc 连接实例的 addIceCandidate 方法将候选者 B(B 的公网 IP 与端口)添加到 A 的候选者列表。 
  12.  
  13. 这时候 A/B 都拿到了对方的通信候选者(公网 IP 与端口)。 
  14.  
  15. 进行 P2P 选出最优线路。 
  16.  
  17. B 调用 webrtc 连接实例 onAddStream 将 A 的视频音频流播放出来。 
  18.  
  19. A 调用 webrtc 连接实例 onAddStream 将 B 的视频音频流播放出来(通话开始，对方的视频有了)。 
  20.  
  21. 这时候如果内网穿透失败了。 
  22.  
  23. sturn/turn 服务器(其实是 turn 起作用)就会帮忙转发音频流，因为他已经有所有的候选者列表(所有的 IP 与端口)。 

加深理解

  1. 本地开发，同一局域网，P2P 连接建立不需要 coturn 中转服务器，因为不需要打洞，websocket 通道使主机能够在同一管道内，相互发送 offer 和 answer，可以建立 p2p。 
  2.  
  3. 线上环境，不同局域网，websocket 通道使主机在同一管道内，相互发送 offer 和 answer，想要建立 p2p(一定要使用 sturn 进行 nat 穿越)，但是运营商截断(建立 p2p 失败)，使用 turn 中转音频流。 

##我有疑问

P2P 连接是什么?

  1. P2P 流媒体技术，这个技术主要是解决服务器负载过大(传统的都是服务器转发音频流)，多端不经过服务器转发音频流，而是在网状的 P2P 通道内进行。下载资源、直播、音视频通话、共享桌面等很大一部分是基于此技术实现。 

offer 的本质是什么?SDP 又是什么?

  1. offer 就是个信令名字,创建 offer 本质上就是创建 sdp。 

给大家看看 sdp 的本质，就是自身的媒体信息和编解码信息

  1. sdp: { 
  2.     type: 'offer', 
  3.     sdp: 'v=0\r\n' + 
  4.       'o=- 890410854023526853 2 IN IP4 127.0.0.1\r\n' + 
  5.       's=-\r\n' + 
  6.       't=0 0\r\n' + 
  7.       'a=group:BUNDLE audio video\r\n' + 
  8.       'a=extmap-allow-mixed\r\n' + 
  9.       'a=msid-semantic: WMS EHsXxPKkpBfFwyGLbTIFHt4eXe6smVEHN9Yc\r\n' + 
  10.       'm=audio 9 UDP/TLS/RTP/SAVPF 111 63 103 104 9 0 8 106 105 13 110 112 113 126\r\n' + 
  11.       'c=IN IP4 0.0.0.0\r\n' + 
  12.       'a=rtcp:9 IN IP4 0.0.0.0\r\n' + 
  13.       'a=ice-ufrag:+b1T\r\n' + 
  14.       'a=ice-pwd:2MMQo86tKV27zgrrsMhvhGqK\r\n' + 
  15.       'a=ice-options:trickle\r\n' + 
  16.       'a=fingerprint:sha-256 A0:F2:F7:C0:BE:1B:8C:EF:6C:42:03:D7:6E:6B:B2:DC:AE:57:F1:F3:DD:67:86:F6:11:F5:5B:44:49:D5:44:9A\r\n' + 
  17.       'a=setup:actpass\r\n' + 
  18.       'a=mid:audio\r\n' + 
  19.       'a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level\r\n' + 
  20.       'a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time\r\n' + 
  21.       'a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01\r\n' + 
  22.       'a=sendrecv\r\n' + 
  23.       'a=rtcp-mux\r\n' + 
  24.       'a=rtpmap:111 opus/48000/2\r\n' + 
  25.       'a=rtcp-fb:111 transport-cc\r\n' + 
  26.       'a=fmtp:111 minptime=10;useinbandfec=1\r\n' + 
  27.       'a=rtpmap:63 red/48000/2\r\n' + 
  28.       'a=fmtp:63 111/111\r\n' + 
  29.       'a=rtpmap:103 ISAC/16000\r\n' + 
  30.       'a=rtpmap:104 ISAC/32000\r\n' + 
  31.       'a=rtpmap:9 G722/8000\r\n' + 
  32.       'a=rtpmap:0 PCMU/8000\r\n' + 
  33.       'a=rtpmap:8 PCMA/8000\r\n' + 
  34.       'a=rtpmap:106 CN/32000\r\n' + 
  35.       'a=rtpmap:105 CN/16000\r\n' + 
  36.       'a=rtpmap:13 CN/8000\r\n' + 
  37.       'a=rtpmap:110 telephone-event/48000\r\n' + 
  38.       'a=rtpmap:112 telephone-event/32000\r\n' + 
  39.       'a=rtpmap:113 telephone-event/16000\r\n' + 
  40.       'a=rtpmap:126 telephone-event/8000\r\n' + 
  41.       'a=ssrc:1511813723 cname:P0KGpA3OHyfIh1hw\r\n' + 
  42.       'a=ssrc:1511813723 msid:EHsXxPKkpBfFwyGLbTIFHt4eXe6smVEHN9Yc a3daa1c2-1f35-426f-a242-2a0286202c04\r\n' + 
  43.       'a=ssrc:1511813723 mslabel:EHsXxPKkpBfFwyGLbTIFHt4eXe6smVEHN9Yc\r\n' + 
  44.       'a=ssrc:1511813723 label:a3daa1c2-1f35-426f-a242-2a0286202c04\r\n' + 
  45.       'm=video 9 UDP/TLS/RTP/SAVPF 96 97 98 99 100 101 102 121 127 120 125 107 108 109 35 36 124 119 123 118 114 115 116\r\n' + 
  46.       'c=IN IP4 0.0.0.0\r\n' + 
  47.       'a=rtcp:9 IN IP4 0.0.0.0\r\n' + 
  48.       'a=ice-ufrag:+b1T\r\n' + 
  49.       'a=ice-pwd:2MMQo86tKV27zgrrsMhvhGqK\r\n' + 
  50.       'a=ice-options:trickle\r\n' + 
  51.       'a=fingerprint:sha-256 A0:F2:F7:C0:BE:1B:8C:EF:6C:42:03:D7:6E:6B:B2:DC:AE:57:F1:F3:DD:67:86:F6:11:F5:5B:44:49:D5:44:9A\r\n' + 
  52.       'a=setup:actpass\r\n' + 
  53.       'a=mid:video\r\n' + 
  54.       'a=extmap:14 urn:ietf:params:rtp-hdrext:toffset\r\n' + 
  55.       'a=extmap:2 http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time\r\n' + 
  56.       'a=extmap:13 urn:3gpp:video-orientation\r\n' + 
  57.       'a=extmap:3 http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01\r\n' + 
  58.       'a=extmap:5 http://www.webrtc.org/experiments/rtp-hdrext/playout-delay\r\n' + 
  59.       'a=extmap:6 http://www.webrtc.org/experiments/rtp-hdrext/video-content-type\r\n' + 
  60.       'a=extmap:7 http://www.webrtc.org/experiments/rtp-hdrext/video-timing\r\n' + 
  61.       'a=extmap:8 http://www.webrtc.org/experiments/rtp-hdrext/color-space\r\n' + 
  62.       'a=sendrecv\r\n' + 
  63.       'a=rtcp-mux\r\n' + 
  64.       'a=rtcp-rsize\r\n' + 
  65.       'a=rtpmap:96 VP8/90000\r\n' + 
  66.       'a=rtcp-fb:96 goog-remb\r\n' + 
  67.       'a=rtcp-fb:96 transport-cc\r\n' + 
  68.       'a=rtcp-fb:96 ccm fir\r\n' + 
  69.       'a=rtcp-fb:96 nack\r\n' + 
  70.       'a=rtcp-fb:96 nack pli\r\n' + 
  71.       'a=rtpmap:97 rtx/90000\r\n' + 
  72.       'a=fmtp:97 apt=96\r\n' + 
  73.       'a=rtpmap:98 VP9/90000\r\n' + 
  74.       'a=rtcp-fb:98 goog-remb\r\n' + 
  75.       'a=rtcp-fb:98 transport-cc\r\n' + 
  76.       'a=rtcp-fb:98 ccm fir\r\n' + 
  77.       'a=rtcp-fb:98 nack\r\n' + 
  78.       'a=rtcp-fb:98 nack pli\r\n' + 
  79.       'a=fmtp:98 profile-id=0\r\n' + 
  80.       'a=rtpmap:99 rtx/90000\r\n' + 
  81.       'a=fmtp:99 apt=98\r\n' + 
  82.       'a=rtpmap:100 VP9/90000\r\n' + 
  83.       'a=rtcp-fb:100 goog-remb\r\n' + 
  84.       'a=rtcp-fb:100 transport-cc\r\n' + 
  85.       'a=rtcp-fb:100 ccm fir\r\n' + 
  86.       'a=rtcp-fb:100 nack\r\n' + 
  87.       'a=rtcp-fb:100 nack pli\r\n' + 
  88.       'a=fmtp:100 profile-id=2\r\n' + 
  89.       'a=rtpmap:101 rtx/90000\r\n' + 
  90.       'a=fmtp:101 apt=100\r\n' + 
  91.       'a=rtpmap:102 H264/90000\r\n' + 
  92.       'a=rtcp-fb:102 goog-remb\r\n' + 
  93.       'a=rtcp-fb:102 transport-cc\r\n' + 
  94.       'a=rtcp-fb:102 ccm fir\r\n' + 
  95.       'a=rtcp-fb:102 nack\r\n' + 
  96.       'a=rtcp-fb:102 nack pli\r\n' + 
  97.       'a=fmtp:102 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42001f\r\n' + 
  98.       'a=rtpmap:121 rtx/90000\r\n' + 
  99.       'a=fmtp:121 apt=102\r\n' + 
  100.       'a=rtpmap:127 H264/90000\r\n' + 
  101.       'a=rtcp-fb:127 goog-remb\r\n' + 
  102.       'a=rtcp-fb:127 transport-cc\r\n' + 
  103.       'a=rtcp-fb:127 ccm fir\r\n' + 
  104.       'a=rtcp-fb:127 nack\r\n' + 
  105.       'a=rtcp-fb:127 nack pli\r\n' + 
  106.       'a=fmtp:127 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42001f\r\n' + 
  107.       'a=rtpmap:120 rtx/90000\r\n' + 
  108.       'a=fmtp:120 apt=127\r\n' + 
  109.       'a=rtpmap:125 H264/90000\r\n' + 
  110.       'a=rtcp-fb:125 goog-remb\r\n' + 
  111.       'a=rtcp-fb:125 transport-cc\r\n' + 
  112.       'a=rtcp-fb:125 ccm fir\r\n' + 
  113.       'a=rtcp-fb:125 nack\r\n' + 
  114.       'a=rtcp-fb:125 nack pli\r\n' + 
  115.       'a=fmtp:125 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=42e01f\r\n' + 
  116.       'a=rtpmap:107 rtx/90000\r\n' + 
  117.       'a=fmtp:107 apt=125\r\n' + 
  118.       'a=rtpmap:108 H264/90000\r\n' + 
  119.       'a=rtcp-fb:108 goog-remb\r\n' + 
  120.       'a=rtcp-fb:108 transport-cc\r\n' + 
  121.       'a=rtcp-fb:108 ccm fir\r\n' + 
  122.       'a=rtcp-fb:108 nack\r\n' + 
  123.       'a=rtcp-fb:108 nack pli\r\n' + 
  124.       'a=fmtp:108 level-asymmetry-allowed=1;packetization-mode=0;profile-level-id=42e01f\r\n' + 
  125.       'a=rtpmap:109 rtx/90000\r\n' + 
  126.       'a=fmtp:109 apt=108\r\n' + 
  127.       'a=rtpmap:35 AV1/90000\r\n' + 
  128.       'a=rtcp-fb:35 goog-remb\r\n' + 
  129.       'a=rtcp-fb:35 transport-cc\r\n' + 
  130.       'a=rtcp-fb:35 ccm fir\r\n' + 
  131.       'a=rtcp-fb:35 nack\r\n' + 
  132.       'a=rtcp-fb:35 nack pli\r\n' + 
  133.       'a=rtpmap:36 rtx/90000\r\n' + 
  134.       'a=fmtp:36 apt=35\r\n' + 
  135.       'a=rtpmap:124 H264/90000\r\n' + 
  136.       'a=rtcp-fb:124 goog-remb\r\n' + 
  137.       'a=rtcp-fb:124 transport-cc\r\n' + 
  138.       'a=rtcp-fb:124 ccm fir\r\n' + 
  139.       'a=rtcp-fb:124 nack\r\n' + 
  140.       'a=rtcp-fb:124 nack pli\r\n' + 
  141.       'a=fmtp:124 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=4d001f\r\n' + 
  142.       'a=rtpmap:119 rtx/90000\r\n' + 
  143.       'a=fmtp:119 apt=124\r\n' + 
  144.       'a=rtpmap:123 H264/90000\r\n' + 
  145.       'a=rtcp-fb:123 goog-remb\r\n' + 
  146.       'a=rtcp-fb:123 transport-cc\r\n' + 
  147.       'a=rtcp-fb:123 ccm fir\r\n' + 
  148.       'a=rtcp-fb:123 nack\r\n' + 
  149.       'a=rtcp-fb:123 nack pli\r\n' + 
  150.       'a=fmtp:123 level-asymmetry-allowed=1;packetization-mode=1;profile-level-id=64001f\r\n' + 
  151.       'a=rtpmap:118 rtx/90000\r\n' + 
  152.       'a=fmtp:118 apt=123\r\n' + 
  153.       'a=rtpmap:114 red/90000\r\n' + 
  154.       'a=rtpmap:115 rtx/90000\r\n' + 
  155.       'a=fmtp:115 apt=114\r\n' + 
  156.       'a=rtpmap:116 ulpfec/90000\r\n' + 
  157.       'a=ssrc-group:FID 1741155232 1898443615\r\n' + 
  158.       'a=ssrc:1741155232 cname:P0KGpA3OHyfIh1hw\r\n' + 
  159.       'a=ssrc:1741155232 msid:EHsXxPKkpBfFwyGLbTIFHt4eXe6smVEHN9Yc fb34f344-fbe3-45e9-969d-af4d9fb5bdc4\r\n' + 
  160.       'a=ssrc:1741155232 mslabel:EHsXxPKkpBfFwyGLbTIFHt4eXe6smVEHN9Yc\r\n' + 
  161.       'a=ssrc:1741155232 label:fb34f344-fbe3-45e9-969d-af4d9fb5bdc4\r\n' + 
  162.       'a=ssrc:1898443615 cname:P0KGpA3OHyfIh1hw\r\n' + 
  163.       'a=ssrc:1898443615 msid:EHsXxPKkpBfFwyGLbTIFHt4eXe6smVEHN9Yc fb34f344-fbe3-45e9-969d-af4d9fb5bdc4\r\n' + 
  164.       'a=ssrc:1898443615 mslabel:EHsXxPKkpBfFwyGLbTIFHt4eXe6smVEHN9Yc\r\n' + 
  165.       'a=ssrc:1898443615 label:fb34f344-fbe3-45e9-969d-af4d9fb5bdc4\r\n' 
  166.   } 

setLocalDescription 方法是干什么的?setRemoteDescription 又是干什么的?

  1. setLocalDescription 是让自己的 webrtc 实例清楚，自己的媒体信息和编解码信息。 
  2. setRemoteDescription 是让对方的 webrtc 实例清楚，我的媒体信息和编解码信息。 

一个 offer，一个 answer，我们彼此都知道对方的媒体信息与编解码信息，这样我们才能好好协商，我这边该用什么方式对你的视频音频流进行解码、渲染。

向 sturn/turn 中继服务器发送请求收集 candidate 是什么鬼?

turn工作流程.png

过程有些繁杂，具体流程小伙伴们可以看这篇文章 WebRTC TURN 协议初识及 turnserver 实践。

目的

了解 webrtc 的音视频采集、桌面采集;

了解 websocket 和 webrtc 的整个链路建立过程;

实现 1V1 文字传输、视频通话、语音通话、屏幕共享;

实现视频通话、语音通话、屏幕共享过程中的截图、录音、录屏及 截图、录音、录屏的在线播放与下载;

将以上功能部署上线;

流程构建

在这里，我们要对音视频建立过程画一个基本的流程图。

建立过程流程图.png

基本流程图

对于这些信令，我们使用 websocket 进行转发，这里大家会问，为什么不使用 http?

首先，我们的要实现的 demo 本来就含有发送普通文本消息的功能，就是使用 websocket。(长短轮询太老了，性能太差)

其次，第一点可以忽略，http 的请求会打回原路，A 向服务器请求，绝对不会传向 B。

但是如果我们要使用 websocket 转发信令，就要清楚的了解，在同一管道的所有端都会收到这条消息。所以，对于上面流程图来说，其实所有的小箭头都是双向的。

这时候，我们可以在 node 服务中来控制推送消息的方向，也可以在客户端来控制，这里我选择在 AB 端来控制。

其次，我们在本地开发，如果使用一台电脑，两个浏览器的形式，websocket 文字消息是可以的。但是音视频通话不行，因为不管是传输通道还是音视频设备(麦克、扬声器等)都是冲突的。所以，我们可以通过同一局域网，使用两台电脑解决这个问题。并且，因为 webrtc 的安全限制，必须使用 https(不管是线上还是本地)与域名，我们可以通过线上配置 https 与域名，本地设置浏览器忽略 https 与配置 host 文件映射来解决这个问题。

接下来，我们使用 vue 和 nodejs，可以最快最简单的实现 demo。

废话少说，我们开撕!

开撕

展示部分代码

socket-io

这里我使用 socket.io 这个第三方包，快速的首发消息，转发信令。(建议大家使用 vue-socket.io)可以在组件中收发消息与信令。

将 socket-io 的 websocket 建立连接与接收消息，接收信令放到 vuex 中。

  1. async connectSocket({ commit, state, dispatch }) { 
  2.    // 局域网 
  3.    let socket = io.connect("http://172.28.74.16:3004");   
  4.     
  5.    // 线上 
  6.    // let socket = io.connect("https://www.codeting.top:3004"); 
  7.  
  8.    socket.on("connect", () => { 
  9.      commit(types.SET_SOCKET, socket); 
  10.      dispatch("handleChatData", state.friends); 
  11.    }); 
  12.     
  13.    // 监听好友发过来的消息 
  14.    socket.on("friendMessage", (res) => { 
  15.      if (res) { 
  16.        commit(types.SET_MESSAGE, res); 
  17.      } else { 
  18.        console.log("有问题"); 
  19.      } 
  20.    }); 
  21.  
  22.    socket.on("apply", (res) => { 
  23.      if (!state.isCalling) { 
  24.        let text = ""; 
  25.        if (res.webRtcType === "video") { 
  26.          text = "视频通话"; 
  27.        } 
  28.        MessageBox( 
  29.          `您的好友${res.userName}请求与你进行${text}, 是否同意?`, 
  30.          "提示", 
  31.          { 
  32.            confirmButtonText: "同意", 
  33.            cancelButtonText: "拒绝", 
  34.            type: "warning", 
  35.          } 
  36.        ) 
  37.          .then(() => { 
  38.            const friendInfo = { 
  39.              account: res.userName, 
  40.              _id: res.Id, 
  41.            }; 
  42.            commit(types.SET_FRIENDINFO, friendInfo); 
  43.            commit(types.SET_ISCALLING, true); 
  44.            commit(types.SET_WEBRTCSTATE, "reply"); 
  45.          }) 
  46.          .catch(() => { 
  47.            console.log("9. 拒绝接听"); 
  48.          }); 
  49.      } else { 
  50.      } 
  51.    }); 
  52.  
  53.    
  54.    socket.on("reply", (res) => { 
  55.      if (res) { 
  56.        localStorage.setItem("nowRoomId", res.roomId); 
  57.        commit(types.SET_REPLYISAGREE, true); 
  58.      } 
  59.    }); 
  60.  
  61.    socket.on("1v1ICEA", (res) => { 
  62.      if (res && state.role === "receiver") { 
  63.        commit(types.SET_ECE, res); 
  64.      } 
  65.    }); 
  66.  
  67.    socket.on("1v1ICEB", (res) => { 
  68.      if (res && state.role === "caller") { 
  69.        commit(types.SET_ECE, res); 
  70.      } 
  71.    }); 
  72.  
  73.    socket.on("1v1OFFER", (res) => { 
  74.      if (res) { 
  75.        commit(types.SET_ISOFFER, true); 
  76.        commit(types.SET_OFFER, res); 
  77.      } 
  78.    }); 
  79.  
  80.    socket.on("1v1ANSWER", (res) => { 
  81.      if (res) { 
  82.        commit(types.SET_ISANSWER, true); 
  83.        commit(types.SET_ANSWER, res); 
  84.      } 
  85.    }); 
  86.  }, 

同样，我们在 node 服务中，也是使用 socket-io 这个包

  1. io.on("connect", function (socket) { 
  2.  
  3.   socket.on('friendMessage', async function (res) { 
  4.     const roomId = res.userId > res.friendId ? res.userId + res.friendId : res.friendId + res.userId 
  5.     io.to(roomId).emit('friendMessage', res) 
  6.   }); 
  7.  
  8.   socket.on('apply', async function (res) { 
  9.     io.to(res.roomId).emit('apply', res) 
  10.   }); 
  11.  
  12.   socket.on('reply', data => { 
  13.     io.to(data.roomId).emit('reply', data) 
  14.   }) 
  15.    
  16.   socket.on('1v1ICEA', data => { 
  17.     console.log('1v1ICEA', data) 
  18.     io.to(data.roomId).emit('1v1ICEA', data) 
  19.   }) 
  20.  
  21.   socket.on('1v1ICEB', data => { 
  22.     io.to(data.roomId).emit('1v1ICEB', data) 
  23.   }) 
  24.  
  25.   socket.on('1v1OFFER', data => { // 转发 Offer 
  26.     io.to(data.roomId).emit('1v1offer', data) 
  27.   }) 
  28.  
  29.   socket.on('1v1ANSWER', data => { // 转发 answer 
  30.     io.to(data.roomId).emit('1v1answer', data) 
  31.   }) 
  32.  
  33. }); 

音视频采集

对于视频、音频、及屏幕共享来说，代码都是类似的。所以，举例视频采集。

  1. const constraints = { 
  2.     audio: { 
  3.          noiseSuppression: true, 
  4.          echoCancellation: true, 
  5.        }, 
  6.     video: true, 
  7.  }; 
  8.         
  9.  this.localstream = navigator.mediaDevices.getUserMedia(constraints); 
  10.  let video = document.querySelector("#rtcA"); 
  11.  video.srcObject = this.localstream; 

通过使用 getUserMedia，我们可以采集到音视频双轨的媒体流，我们传入一个参数 constraints，这个参数可以配置(控制采集音频还是视频)

将采集到的动态媒体流赋值给 video 标签，我们自己的画面就显示在网页上了。

同样，如果是音频采集，只需要配置参数 constraints 中的 audio 为 false 即可。

电脑屏幕采集，只需要将 getUserMedia 这个 API 替换为 getDisplayMedia 即可。

传输过程

此时视频端发起端，采集到了媒体流后，需要发送 apply 信令给接收端。这个信令是询问接收端是否接起视频通话。

如果接起，接收端会采集自己的音视频双轨的媒体流，并且初始化 peerconnection，将媒体流放入此管道，监听 ICE 候选信息 如果收集到，就发送给对方，并将自己的同意信令 reply，回复给视频发起端。

如果拒绝接起，接收端会回复一个拒绝的信令给视频发起端。

接收端此时收到拒绝，会关闭视频音频流的采集。

接收端此时收到接起，会初始化 peerconnection，并将自己的媒体流放入此管道，监听 ICE 候选信息 如果收集到，就发送给对方。并且创建一个 offer(此 offer 包含 sdp)，将 offer 放到本地后，发送 offer 给视频接收端。

视频接收端接收到 offer，放到自己的远端，并且创建一个 answer，将 answer 放到本地后，发送给视频发起方。

视频发起方接收到 answer，将 answer 放到远端。

  1. props: { 
  2.    visible: Boolean, 
  3.    friendInfo: Object, 
  4.    webRtcType: String, 
  5.  }, 
  6. ata() { 
  7.    return { 
  8.      showDialog: false, 
  9.      localstream: {}, 
  10.      peer: null, 
  11.      isToPeer: false, 
  12.      iceServers: { 
  13.        iceServers: [ 
  14.          { 
  15.            url: "turn:www.codeting.top:3478", // xxxxx 为域名 
  16.            credential: "xxxxx", // 密码 
  17.            username: "xx", // 账号 
  18.          }, 
  19.        ], 
  20.        sdpSemantics: "plan-b", 
  21.      }, 
  22.      bufferFriend: [], 
  23.      bufferMy: [], 
  24.      mediaRecorder: {}, 
  25.      startRecordVideo: true, 
  26.    }; 
  27. }, 
  28. atch: { 
  29.    visible(val) { 
  30.      this.handleVisible(val); 
  31.      if (!val) { 
  32.        this.$store.commit("chat/SET_ISCALLING", false); 
  33.         
  34.      } 
  35.    }, 
  36.    "$store.state.chat.replyIsAgree"(v) { 
  37.      if (v && this.$store.state.chat.role === "caller") { 
  38.        let roomId = getLocalStorage("nowRoomId").nowRoomId; 
  39.        this.initPeer({ roomId, webRtcType: "video" });  
  40.        this.createOffer({ roomId, webRtcType: "video" });  
  41.      } 
  42.    }, 
  43.    "$store.state.chat.isEce"(v) { 
  44.      if (v && this.$store.state.chat.role === "receiver") { 
  45.        if (this.$store.state.chat.ece) { 
  46.          this.onIce(this.$store.state.chat.ece); 
  47.        } 
  48.      } 
  49.      if (v && this.$store.state.chat.role === "caller") { 
  50.        if (this.$store.state.chat.ece) { 
  51.          this.onIce(this.$store.state.chat.ece); 
  52.        } 
  53.      } 
  54.    }, 
  55.    "$store.state.chat.isOffer"(v) { 
  56.      if (v && this.$store.state.chat.role === "receiver") { 
  57.        if (this.$store.state.chat.offer) { 
  58.          this.onOffer(this.$store.state.chat.offer); 
  59.        } 
  60.      } 
  61.    }, 
  62.    "$store.state.chat.isAnswer"(v) { 
  63.      if (v && this.$store.state.chat.role === "caller") { 
  64.        if (this.$store.state.chat.answer) { 
  65.          this.onAnswer(this.$store.state.chat.answer); 
  66.        } 
  67.      } 
  68.    }, 
  69.  }, 
  70.  methods: { 
  71.    handleVisible(val) { 
  72.      this.showDialog = val; 
  73.      this.$emit("update:visible", val); 
  74.    }, 
  75.    async apply() { 
  76.      let constraints = null; 
  77.      if (this.webRtcType === "video") { 
  78.        constraints = { 
  79.          audio: { 
  80.            noiseSuppression: true, 
  81.            echoCancellation: true, 
  82.          }, 
  83.          video: true, 
  84.        }; 
  85.      } else { 
  86.        constraints = { 
  87.          audio: true, 
  88.          video: false, 
  89.        }; 
  90.      } 
  91.      this.localstream = await navigator.mediaDevices.getUserMedia(constraints); 
  92.  
  93.      let video = document.querySelector("#rtcA"); 
  94.      video.srcObject = this.localstream; 
  95.  
  96.      const userId = getCookie(); 
  97.      const friendId = this.friendInfo._id; 
  98.      let roomId = userId > friendId ? userId + friendId : friendId + userId; 
  99.      this.$store.state.chat.socket.emit("apply", { 
  100.        webRtcType: this.webRtcType, 
  101.        roomId: roomId, 
  102.        userName: getLocalStorage("account").account, 
  103.        id: userId, 
  104.      }); 
  105.    }, 
  106.    reply(roomId) { 
  107.      this.$store.state.chat.socket.emit("reply", { 
  108.        roomId, 
  109.        webRtcType: this.webRtcType, 
  110.      }); 
  111.    }, 
  112.  
  113.    async createP2P(data) { 
  114.      await this.createMedia(data); 
  115.    }, 
  116.    async createMedia(data) { 
  117.      try { 
  118.        let constraints = null; 
  119.        if (this.webRtcType === "video") { 
  120.          constraints = { 
  121.            audio: { 
  122.              noiseSuppression: true, 
  123.              echoCancellation: true, 
  124.            }, 
  125.            video: true, 
  126.          }; 
  127.        } else { 
  128.          constraints = { 
  129.            audio: true, 
  130.            video: false, 
  131.          }; 
  132.        } 
  133.        this.localstream = await navigator.mediaDevices.getUserMedia( 
  134.          constraints 
  135.        ); 
  136.        let video = document.querySelector("#rtcA"); 
  137.  
  138.        video.srcObject = this.localstream; 
  139.      } catch (e) { 
  140.        console.log("getUserMedia: ", e); 
  141.      } 
  142.      await this.initPeer(data);  
  143.    }, 
  144.    initPeer(data) { 
  145.      let PeerConnection = 
  146.        window.RTCPeerConnection || 
  147.        window.mozRTCPeerConnection || 
  148.        window.webkitRTCPeerConnection; 
  149.      this.peer = new PeerConnection(this.iceServers); 
  150.      this.peer.addStream(this.localstream);  
  151.      window.streamMy = this.localstream; 
  152.      this.peer.onicecandidate = (event) => { 
  153.        if (event.candidate && this.$store.state.chat.role === "caller") { 
  154.          this.$store.state.chat.socket.emit("1v1ICEA", { 
  155.            ...data, 
  156.            sdp: event.candidate, 
  157.          }); 
  158.        } 
  159.        if (event.candidate && this.$store.state.chat.role === "receiver") { 
  160.          this.$store.state.chat.socket.emit("1v1ICEB", { 
  161.            ...data, 
  162.            sdp: event.candidate, 
  163.          }); 
  164.        } 
  165.      }; 
  166.  
  167.      this.peer.onaddstream = (event) => { 
  168.        window.streamFriend = event.stream; 
  169.        this.isToPeer = true; 
  170.        let video = document.querySelector("#rtcB"); 
  171.        video.srcObject = event.stream; 
  172.      }; 
  173.    }, 
  174.  
  175.    async createOffer(data) { 
  176.      try { 
  177.        let offer = await this.peer.createOffer({ 
  178.          offerToReceiveAudio: 1, 
  179.          offerToReceiveVideo: 1, 
  180.        }); 
  181.        await this.peer.setLocalDescription(offer); 
  182.        this.$store.state.chat.socket.emit("1v1offer", { 
  183.          ...data, 
  184.          sdp: offer, 
  185.        }); 
  186.      } catch (e) { 
  187.        console.log("createOffer: ", e); 
  188.      } 
  189.    }, 
  190.    async onIce(data) { 
  191.      try { 
  192.        await this.peer.addIceCandidate(data.sdp); 
  193.      } catch (e) { 
  194.        console.log("onAnswer: ", e); 
  195.      } 
  196.    }, 
  197.    async onOffer(data) { 
  198.      try { 
  199.        await this.peer.setRemoteDescription(data.sdp); 
  200.        let answer = await this.peer.createAnswer(); 
  201.        await this.peer.setLocalDescription(answer); 
  202.        this.$store.state.chat.socket.emit("1v1answer", { 
  203.          ...data, 
  204.          sdp: answer, 
  205.        }); 
  206.      } catch (e) { 
  207.        console.log("onOffer: ", e); 
  208.      } 
  209.    }, 
  210.    async onAnswer(data) { 
  211.      try { 
  212.        await this.peer.setRemoteDescription(data.sdp); 
  213.      } catch (e) { 
  214.        console.log("onAnswer: ", e); 
  215.      } 
  216.    }, 
  217.     
  218. } 

播放对方画面

此时，接收和发起端都在监听 ICE 候选信息 如果收集到，就发送给对方。一但监听到了就将对方的动态媒体流赋值给 B，播放出来。

  1. if (event.candidate && this.$store.state.chat.role === "receiver") { 
  2.     this.$store.state.chat.socket.emit("1v1ICEB", { 
  3.        ...data, 
  4.        sdp: event.candidate, 
  5.      }); 
  6.  } 

截图与录音录像录屏

截图：我们可以使用 canvas 利用相关方法getContext("2d").drawImage， 实现 web 层面的图片截取。

  1. let picture = document.querySelector("#picture"); 
  2. let rtcA = document.querySelector("#rtcA"); 
  3.  
  4. picture.getContext("2d").drawImage(rtcA, 0, 0, 200, 120); 

录音/录像/录屏：使用 MediaRecorder 将我们的媒体流或者对方的媒体流保存到数组中。

  1. let that = this; 
  2. let options = { 
  3.    mineType: "video/webm;code=vp8", 
  4.  }; 
  5.  if (!MediaRecorder.isTypeSupported(options.mineType)) { 
  6.    console.error(`${options.mineType}is not supported`); 
  7.  } 
  8. try { 
  9.    this.mediaRecorder = new MediaRecorder(window.streamFriend, options); 
  10.  } catch (error) { 
  11.    console.error(error, "失败"); 
  12.    return; 
  13. } 
  14. // 当数据有效时触发的事件 
  15. this.mediaRecorder.ondataavailable = function(e) { 
  16.    if (e && e.data && e.data.size > 0) { 
  17.       that.bufferFriend.push(e.data); 
  18.     } 
  19. }; 
  20. this.mediaRecorder.start(10); 

播放录音录像录屏

只需要将保存的静态媒体流赋值给 video 标签

  1. let recplayer = document.querySelector("#recplayer"); 
  2. let blob = new Blob(this.bufferFriend, { type: "video/webm" }); 
  3. recplayer.src = window.URL.createObjectURL(blob); 
  4. recplayer.srcObject = null; 
  5. recplayer.controls = true; 
  6. recplayer.play(); 

本地效果

桌面分享

视频通话

上线

部署 webrtc 重要的两个条件：域名 与 https，我们需要配置这两块。

我们的 node 服务不仅是 https+域名，websocket 也需要更为安全的 wss 协议，我们需要给我们的 websocket 配置 wss。

在前面我们也提过，本地开发之所以能够成功，并且有效果，是因为内网是直接通信的，并没有走公网，也就没有实现内网穿透。

如果我们想要在线上实现这个功能，我们必须配置 coturn 中转服务器。centos 内核的配置文章可以参考 这篇，ubuntu 内核的配置参考 这篇。

缺陷

在开发和上线后能够发现以下几个问题。

环境、设备、信号溢出、算法不兼容产生的噪音、声学与线路产生的回音、网络拥塞及数据包传输速率不稳定产生的延迟。

我们可以通过接入一些算法及提高硬件设备质量，来减少噪音回音，降低延迟。

对于噪音，采集音频时可以设置 noiseSuppression: true，可以降低 一些环境及设备的噪音。

对于回声，采集音频时可以设置 echoCancellation: true，可以去除回声。

剩下的交给算法、设备和网络来处理了。

在这方面的探索，我就到此为止了，大家可以接着研究 WebRTC 传输是如何保证音视频服务质量，研究一下成熟应用是如何解决这三大难点的。

特效

大家在视频通话过程中，可以使用多种特效。美颜、贴纸等等。

然而在 webrtc 的 web 端领域，视频特效领域是非常潜的。造成这种情况的原因是 js 的性能问题。

比较简单的方法就是使用 canvas 画布，对我们的视频图象加一层滤镜，但是在本质上并没有改变媒体流。传输到远端仍然是没有特效的。当然，我们可以通过 websocket 控制远端的视频特效，但是由于视频流没有改变，对方如果下载视频流的话，播放出来仍然是没有特效的。

另一种方案如下，这里我就不做赘述，大家可以思考一下是如何实现的(以下为简单特效与贴纸)。

多人视频

需要创建 n-1 个 PeerConnection 连接，因为我们要与 n-1 个人进行视频共享，每个人都是这样。但是这里会涉及谁主动发 offer 的问题。我们可以让新加入的成员向其他 n-1 个成员发送 offer，也可以使 n-1 个成员向新加入的成员发送 offer。这里我们可以用遍历的方式生成 PeerConnection 和 offer。当然多人通话就看你服务器顶不顶的住了。

这里我们就不知情的使用了多端通信的知名通信方案——Mesh，Mesh 就是两两通信从而形成网状结构。除了 Mesh 这种通信方案，还有 MCU，MCU 方案主要是将同一房间的所有终端的音视频流进行混合然后发向各个终端，这样服务器的压力其实是非常巨大的。另外还有 SFU 通信方案，中转服务器收到某终端音视频流后，单一转发到其他终端。

总结

经过上面一系列的理解、思考、构建、开发、部署等等，我们对 webrtc 有了一些初步的了解及认识。对于这方面的研究与探索我们都要继续继续深入下去。因为满足我们的好奇心与求知欲，提升我们的这一领域的技术，丰富我们整体的知识体系，何乐而不为呢。

最后，以上所有的内容都来源于资料、个人实验及个人总结，文中有错的地方希望大家及时指正。

参考

https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/

https://zhuanlan.zhihu.com/p/7102543

https://zhuanlan.zhihu.com/p/71025431

https://zhuanlan.zhihu.com/p/26796476

付金廷，微医第四利润中心前端组。

 

责任编辑：武晓燕 来源： 微医大前端技术
视频通话网页
相关推荐
让我们一起给国产替代产品多点时间吧
作为数据库厂商，Oracle是一个标杆，而且是近些年我们的国产数据库很难逾越的标杆。但是现在既然已经决定走自主的路了，那么再好的产品都必须要扬弃掉，因此我们的国产替代产品就必须能够尽快把水平提高上来。

2023-07-13 08:17:13

国产Oracle数据库
让我们一起实现一个文件选择组件
childData​子文件数据（可选参数），值为array类型，如果type为"folder"，则传此参数，数组中的每一项类型就为fileData的类型。

2022-08-29 07:48:27

文件数据参数类型
我们一起手撸一个线程池
见AddThread()函数，默认会创建Core线程，也可以选择创建Cache线程，线程内部会有一个死循环，不停的等待任务，有任务到来时就会执行，同时内部会判断是否是Cache线程，如果是Cache线程，timeout时间内没有任务执行就会自动退出循环，线程结束。

2021-10-27 06:49:34

线程池Core函数
让我们一起编写一个接口压测工具
前段时间有个项目即将上线，需要对其中的核心接口进行压测；由于我们的接口是gRPC协议，找了一圈发现压测工具并不像HTTP那么多。

2021-11-15 11:03:09

接口压测工具
七个很实用的开源项目，我们一起学学吧!
New上周有一个拼接音频和画面的视频重制项目videoretalking，而这周则上榜了一个翻译视频的小工具pyvideotrans。如果你想制作多语言视频，也许可以试试它。pyvideotrans可以直接将某种语言的视频翻译为另外一种语言和配音的视频。

2023-11-06 08:28:43

让我们一起聊聊封装一个管理 Url 状态的 Hook
工具库中假如某个工具函数hook依赖于一个开发者可能并不会使用的包，而且这个包的体积还比较大的时候，可以将这个工具函数hook独立成一个npm包，开发者使用的时候才进行安装。

2022-06-27 08:00:49

hook工具库函数
国庆节就到，一起写一个Linux初版的Git吧
各位读者就算不了解git的原理，想必也会用三把斧gitadd;gitcommit;gitpush，下面就简单说一下git是怎么做的版本管理的：跟踪文件的变化，使用commit作为标记，与远程服务器同步。

2021-09-30 07:57:14

linuxGit
腾讯面试体验倍儿好，我们一起感受一下吧！
索引可以帮助我们快速搜索数据，innodb存储引擎用的是b+树索引，叶子节点存放的是索引+数据，非叶子节点只存放索引。

2023-06-05 14:14:21

腾讯索引面试
让我们一起聊聊IO
Java.io包基于流模型实现，提供File抽象、输入输出流等IO的功能。交互方式是同步、阻塞的方式，在读取输入流或者写入输出流时，在读、写动作完成之前，线程会一直阻塞。java.io包的好处是代码比较简单、直观，缺点则是IO效率和扩展性存在局限性，容易成为应用性能的瓶颈。

2021-08-27 07:06:10

IOJava抽象
让我们一起玩转 ByteBuffer
Buffer存在的目的是为了减少与设备（例如磁盘）的交互频率，在之前的博客中也提到过「磁盘的读写是很昂贵的操作」。

2021-12-29 08:27:05

ByteBuffer磁盘服务器
我们一起聊聊 Golang for 循环
Go中基于范围的“for”循环简化了迭代集合的过程，提供了清晰和简洁的语法。当迭代期间需要索引和值（或键和值）时，它特别有用。range关键字的灵活性使其成为各种场景的强大工具，从迭代数组和切片到遍历映射和字符串。

2024-02-20 21:34:16

循环GolangGo
我们一起Github Action 入门
GithubAction，是Github推出的一个持续集成服务。这个持续集成，有很多操作，例如：抓取代码、运行测试、登录远程服务器，发布到第三方服务等等。

2021-07-28 07:53:20

Github ActiDotnet 应用
我们一起玩转 Grep 指令
grep这个linux指令大家一定不陌生，其用于查找文件中符合条件的字符串，下面来看看这个高频的指令如何使用。

2022-01-17 06:59:40

Grep指令linux
让我们一起告别 TCP！
大家这时就奇怪了问：“UDP也是基于IP层的呀，那UDP的数据长度也可以通过这个公式计算呀？为何还要有「包长度」呢？”

2022-03-08 17:52:58

TCP格式IP
【17年 • 珍存】9.13让我们一起来直个播吧！
如果看过【17年&8226;珍存】系列视频，你们一定认为17年珍存君一定会将文艺情怀帖进行到底。没看过的也不要紧，以下为视频传送门↓↓↓↓↓↓↓↓↓

2016-09-12 15:35:38

新华三
一起学 WebGL：绘制一个点
WebGL是浏览器支持的一种绘制图形的API，是一个标准。我们可以通过Canvas元素在网页的特定区域绘制2D和3D图形。

2023-04-11 07:48:32

WebGLCanvas
姑娘，咱们一起去学编程吧
除了“女性回到编程领域来”的呼声，美国也在讲“TechDiversity”，希望改变编程领域只有白人男性的刻板印象（程序员不够用的情况）。Facebook雇用了资深记者MaxineWilliams负责“全球员工多样性”的事务，成立名为“Facebook大学”的实习项目吸引女性及有色人种学生。

2015-02-09 10:55:50

编程女程序员
姑娘，咱们一起去学编程吧
提到“程序员”这个词，马上进入我们脑海的是一个戴黑框眼镜，穿格子衬衫的......男生。其实无论是在国内还是国外，对程序员的印象都是如此，女程序员都是稀有物种。现在Facebook的COOSherylSandberg和她的Leanin（向前一步）项目希望改变这个现状，她们启动了CS&E（ComputerScienceandEngineering）分会，帮助在职的、在读的CS&E女性建立联系，互相提供咨询和帮助。

2015-02-09 09:26:26

程序员
我们一起跟着Dubbo起飞
Dubbo这个技术应该大家都听说过，有的公司可能项目用的也是Dubbo，这个技术面试应该也会属于一个好手，会了Dubbo，关于RPC的调用也就懂个八九不离十了，网络层面的很多知识点也就一并懂了不少了，总之，接下来呢，要开启的Dubbo系列绝对会让你受益匪浅，一起学习吧！

2021-08-27 07:06:09

DubboDocker技术
我们一起聊聊网络编程
把分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络系统，从而使众多的计算机可以方便地互相传递信息、共享硬件、软件、数据信息等资源。

2023-08-10 08:28:46

网络编程通信
点赞
收藏

51CTO技术栈公众号

业务
速览
在线客服