这是我参与「第五届青训营」伴学笔记创作活动的第 9 天

书接上文：PeerJs（一）PeerJs的准备 - 掘金 (juejin.cn)

在上文，我们知道了怎么搞SSL，为Peer做了一个准备，今天我们就来直接看Peer吧！

首先我们知道，PeerJs封装的是底层WebRTC，也就是Web Real-Time Communication，网页即时通讯。这是一个非常复杂而底层的技术，而peerjs开源项目简化了webrtc的开发过程，把原始数据交换等进行了封装，我们只用管业务实现就好了。

安装

npm i peer

或

<script src="https://unpkg.com/peerjs@1.4.7/dist/peerjs.min.js"></script>

创建对象

var peer = new Peer();

peerjs的核心对象Peer，它有几个常用方法：

peer.connect 创建点对点的连接

peer.call 向另1个peer端发起音视频实时通信

peer.on 对各种事件的监控回调

peer.disconnect 断开连接

peer.reconnect 重新连接

peer.destroy 销毁对象

这个我们以后会用到

建立链接

var conn = peer.connect('another-id');
conn.on('open', function(){
  conn.send('hi!');
});

在这里，我们用connect方法连接另一个PeerJs，并监听open对应的连接时刻

只要加一个参数就好了：

conn.on('open', function(id){
  conn.send('The id is',id);
});

那被别人连接则是connection事件：

peer.on('connection', function(conn) {
  conn.on('data', function(data){
    console.log(data);
  });
});

连接之后，我们就可以建立媒体连接了，毕竟我们主要还是想用它进行媒体传输嘛

媒体传输

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
getUserMedia({video: true, audio: true}, function(stream) {
  var call = peer.call('another-peers-id', stream);
  call.on('stream', function(remoteStream) {
  });
}, function(err) {
  console.log('Failed to get local stream' ,err);
});

这是一个来自官网的例子：

我们先获取媒体流（getUserMedia），然后把流（stream）通过peer.call推送给id的用户

既然推送过去了，我们就要在对面接受这个流

var getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
peer.on('call', function(call) {
  getUserMedia({video: true, audio: true}, function(stream) {
    call.answer(stream); // Answer the call with an A/V stream.
    call.on('stream', function(remoteStream) {
      //对流进行操作
    });
  }, function(err) {
    console.log('Failed to get local stream' ,err);
  });
});

我们对call进行监听，当监听到时，流以参数的形式(remoteStream)拿到，就可以放到video或者canvas什么的地方了

PeerJs（二）PeerJs的常用API

安装

创建对象

建立链接

媒体传输