WebRTC 建立点对点连接（日志分析）

对于初次接触 WebRTC 的小白来说，想要理解如何建立一个点对点连接还是有一定的难度的，虽然网上的点对点连接 demo 一大堆，但是从代码角度去理解还是有一定的难度，还好 “Basic peer connection” demo 不仅提供了源代码，而且还添加了详细的日志信息，因此打算从运行的日志角度，再结合网上比较好的文章来理解分析，希望这个思路对您也有帮助！

先拜读一下“天镶” 的WebRTC 入门文章，我感觉是WebRTC 中文文章中比较 OK 的。

《使用WebRTC搭建前端视频聊天室——入门篇》
《使用WebRTC搭建前端视频聊天室——信令篇》
《使用WebRTC搭建前端视频聊天室——点对点通信篇》
《使用WebRTC搭建前端视频聊天室——数据通道篇》

一、获取点对点日志

1、使用Google 浏览器访问：https://github.com/webrtc/samples，提供的“Basic peer connection” demo

2、鼠标右键，点击“审查元素”，打开 "Console" 控制台

3、点击“Basic peer connection” demo 页面的“Start”、“Call”按钮，建立一个点对点连接（基于同一个Web 页面，模拟点对点连接）

4、在Consle 控制台，鼠标右键，点击“Save as”保存运行日志

 

二、日志信息与分析：

This appears to be Chrome
12.722: Requesting local stream（请求本地音视频流，即调用本地的摄像头与麦克风）
spec:   {"audio":true,"video":true}
chrome: {"audio":true,"video":true}
chrome: {"audio":true,"video":true}
14.022: Received local stream（调用本地的摄像头与麦克风成功，获得音视频流 stream 对象）
15.321: Local video videoWidth: 640px,  videoHeight: 480px
98.136: Starting call（呼叫远程 peer）
98.137: Using video device: Lenovo EasyCamera (174f:14ee)
98.137: Using audio device: 麦克风 (Realtek High Definition Audio)
98.137: Created local peer connection object pc1（创建本地的 PeerConnection 对象 pc1）
98.141: Created remote peer connection object pc2（创建远程的 PeerConnection 对象 pc1）
98.143: Added local stream to pc1（本地音视频流添加到PeerConnection 对象 pc1 对象）
98.144: pc1 createOffer start（pc1 开始创建 Offer 信令成功）
98.146: Offer from pc1 （pc1 创建 Offer 信令成功，如下所示）
v=0

o=- 1942065961337070347 2 IN IP4 127.0.0.1

s=-

t=0 0

a=group:BUNDLE audio video

a=msid-semantic: WMS rICA7eip7IWV3m6Yp08Hz5cA1AvhLrfQT23p

m=audio 9 RTP/SAVPF 111 103 104 9 0 8 106 105 13 126

c=IN IP4 0.0.0.0

a=rtcp:9 IN IP4 0.0.0.0

a=ice-ufrag:33zghkUynpdQ7JDG

a=ice-pwd:gA6+vMk0K/TpuJoHN7QNTWSw

a=fingerprint:sha-256 65:84:AE:4D:4C:75:21:15

B:3E:57:62:A4:17:EB:C8:22:E1:FA:5B:6A:38:FB:A6:9E:E01:EA:B2:E1:34:49

a=setup:actpass