Webrtc初涉（一） 要入坑喽

   前几天领导安排任务以webrtc为基础来实现android端的点对点视频通话，刚开始一脸蒙，虽然最后以官网DEMO实现，但是果然感觉自己还是一阵蒙圈，以此博客来记录一下我的webrtc之行。

这是webrtc的官网:https://webrtc.org/

首先我的任务目标只是要提供音视频通话的DEMO，所以去官网遍历一圈

一、用Google自带的翻译查看它所支持的平台，谷歌浏览器的中文就不深究了，反正有图标

如果要在电脑上自己搭建服务器，以下几个浏览器会是最好的选择。

 

 

 

二、 这是WebRTC的源代码  反正也看不懂 先放弃了 主要看Sample

https://github.com/webrtc/samples/

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

三、先看看人家的主要功能点介绍

一、介绍

WebRTC是一个开源项目，可以在Web和本机应用程序中实现音频，视频和数据的实时通信。

有几个主要的JS api 先了解一下

1、

• getUserMedia()：捕获音频和视频。

   getUserMedia()在视频元素中显示视频流。

   传递给回调的在全局范围内的MediaStream对象，因此您可以从控制台进行检查。streamgetUserMedia()

 这个方法可以开启WEB端的视频设备并获得视频流数据

 

2、

• MediaRecorder：录制音频和视频。

3、

• RTCPeerConnection：在用户之间传输音频和视频。
• 也就是P2P对等连接呗
• P1,P2  两个人 通过 MediaStream对象localStream

MediaStream是什么？应用通过代码得到的视频流，也就是getUserMedia方法中得到的本端的视频流

let localStream;
let pc1;
let pc2;
const offerOptions = {
  offerToReceiveAudio: 1,
  offerToReceiveVideo: 1
};

function getName(pc) {
  return (pc === pc1) ? 'pc1' : 'pc2';
}

function getOtherPc(pc) {
  return (pc === pc1) ? pc2 : pc1;
}

function gotStream(stream) {
  console.log('Received local stream');
  localVideo.srcObject = stream;
  localStream = stream;
  callButton.disabled = false;
}

function start() {
  console.log('Requesting local stream');
  startButton.disabled = true;
  navigator.mediaDevices
    .getUserMedia({
      audio: true,
      video: true
    })
    .then(gotStream)
    .catch(e => alert(`getUserMedia() error: ${e.name}`));
}

4、

 

 

 

 

• RTCDataChannel：用户之间的流数据。

 

  它主要是new 出了三个类

localConnection  = localConnection =  new  RTCPeerConnection（servers）;
 创建本地对等连接对象localConnection 

 这么说吧 传输视频就是RPC了

sendChannel =  localConnection。createDataChannel（' sendDataChannel '）;
'创建发送数据通道'

 传输文字信息啥的 就得是RTCDataChannel 了

 remoteConnection =  new  RTCPeerConnection（servers）;
 创建的远程对等连接对象remoteConnection 

 

 

二、信号

 WebRTC使用RTCPeerConnection在浏览器之间传递流数据，但也需要一种协调通信和发送控制消息的机制，这一过程称为信令。

三、端也端之间有各自的网络环境，想要互传数据就要打破环境的限制，也就是网关和防火墙

 

所以WebRTC API使用STUN服务器获取计算机的IP地址，并使用TURN服务器作为中继服务器来

保证两端对等可以成功。

 

四、需要的工具及环境

• Chrome 47或以上
• 适用于Chrome的Web Server，或使用您自己选择的Web服务器。
• 示例代码
• 文本编辑器 
• HTML，CSS和JavaScript的基础知识 这些我只知道一丢丢 还能对付一下