[TOC] > [参考](https://juejin.im/post/5cb81e7e6fb9a068985fb24e) > [官方教程](https://codelabs.developers.google.com/codelabs/webrtc-web/#2) > [node demo](https://github.com/wxiaoshuang/webrtc) ## 概述 webRTC 来实现视频聊天 WebRTC 有三个主要的API * getUserMedia - 采集本地音频和视频流 * RTCPeerConnection - 用来创建对端连接并传输音视频的API * RTCDataChannel - 用于传输二进制数据。 ### WebRTC 与直播差别 直播软件 ![UTOOLS1588835698311.png](http://yanxuan.nosdn.127.net/9ce8f7c4556c401dedfe09457269862a.png) 是在客户端采集和编码主播的音频和视频,传输给流媒体服务器,流媒体服务器将媒体数据转发出去,客户端收到视频流进行解码和播放 WebRTC ![UTOOLS1588835732490.png](http://yanxuan.nosdn.127.net/a8673346a783955775ebcde55f6a285a.png) 其中每个相互连接的客户端叫做对等端 WebRTC采集和传输音视频数据的过程可以分为三步进行 1. 实时捕获本地的音视频流 2. 实时编码音视频并在网络中向对等端传输多媒体数据 3. 对等端接受发送者的音视频,实时解码播放 ## WebRTC 使用流程 1. 通过`navigator.getUserMedia`摄像头 或`navigator.mediaDevices.getDisplayMedia()`软件窗口,获取流媒体 2. 建立信令,客户端需要交换一下信息(交换信令需要信令服务器) ``` 1. A创建一个RTCPeerConnection对象。 2. A使用RTCPeerConnection .createOffer()方法产生一个offer(一个SDP会话描述)。 3. A用生成的offer调用setLocalDescription(),设置成自己的本地会话描述。 4. A将offer通过信令机制发送给B。 5. B用A的offer调用setRemoteDescription(),设置成自己的远端会话描述,以便他的RTCPeerConnection知道A的设置。 6. B调用createAnswer()生成answer 7. B通过调用setLocalDescription()将其answer设置为本地会话描述。 8. B然后使用信令机制将他的answer发回给A。 9. A使用setRemoteDescription()将B的应答设置为远端会话描述。 ``` ## 实例 ### 捕获窗口 <details> <summary>index.html</summary> ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <button id="start">开始录制</button> <button id="stop">停止录制</button> </div> <div> <video autoplay controls id="stream"></video> </div> <script> let startBtn = document.getElementById('start') let stopBtn = document.getElementById('stop') let video = document.getElementById('stream') startBtn.onclick = function() { navigator.mediaDevices.getDisplayMedia().then(stream => { video.srcObject=stream console.log(stream); }) } stopBtn.onclick = function() { video.pause(); } </script> </body> </html> ``` </details> <br/> ### 捕获摄像头 <details> <summary>index.html</summary> ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div> <button id="start">开始录制</button> <button id="stop">停止录制</button> </div> <div> <video autoplay controls id="stream"></video> </div> <script> // 只获取视频 let constraints = {audio: false, video: true}; let startBtn = document.getElementById('start') let stopBtn = document.getElementById('stop') let video = document.getElementById('stream') startBtn.onclick = function() { navigator.getUserMedia(constraints, function(stream) { video.srcObject = stream; window.stream = stream; }, function(err) { console.log(err) }) } stopBtn.onclick = function() { video.pause(); } </script> </body> </html> ``` </details> <br/>