webrtc实践 - 建立点对点视屏连接背景近段时间对webrtc来了兴趣，刷了不少相关文章，做了不少练习，来这记录、

背景

近段时间对webrtc来了兴趣，刷了不少相关文章，做了不少练习，来这记录、分享一下学习过程。

前置

练习前，首先去了解一下webrtc相关理论知识是非常有必要的；网上一搜，都是各路大佬整理的资料，我这主要以实践为主，就不再做太多理论知识分享。
如果没有web视屏基础，也不知道什么叫webrtc，可以看走过的路是一阵魔术大佬的相关文章，对零基础同学非常友好，可以很快了解并上手。

实践

功能

实现一个点对点视屏连接

仓库

gitee.com/jun96/webrt…

分支：001-init

实现

index1.html页面，代表用户A

initWs();
document.getElementById("button").addEventListener("click", () => {
    createPeer();
});

function initWs() {
    // 初始化ws
    // 监听用户B的信令应答消息，并调用answerOffer方法做相应处理
}

async function createPeer(type) {
    // 初始化peer
    // 获取视屏流，添加进peer管道中
    // 获取offer、candidate信息
    // 发送给用户B，以获取answerOffer
}

async function answerOffer(data) {
    // 处理用户B应答的answerOffer和candidate信息，信令通道建立完成
    // 监听用户B的视屏流，添加到video dom中
}

async function getStream() {
   //  通过getUserMedia方法，获取视屏流，并返回
}

index2.html页面，代表用户B

initWs();
function initWs() {
    // 初始化ws
    // 监听用户A发送过来的offer、candidate信令信息，调用createAnswer
}

async function createAnswer(data) {
    // 初始化peer
    // 处理用户A发送过来的信令信息
    // 获取用户B的视屏流，添加到peer
    // 生成用户B的应答信令信息，并应答给用户A
    // peer.ontrack监听P2P建立完成，将用户A的视屏流添加到video标签中
}


async function getStream() {
    // 通过getUserMedia方法，获取视屏流，并返回
}

交互过程

前置步骤

运行server服务端npm run start:debug，启动websocket信令交换服务
用户A，打开index1页面，自动连接websocket
用户B，打开Index2页面，自动连接websocket

P2P建立过程

在用户A页面点击开启视屏按钮
- 初始化peer
- 通过getUserMedia方法，获取摄像头的stream，并添加到peer通道中
- 生成offer、candidate；并peer.setLocalDescription(offer)
- 发送给用户B，以获取answerOffer应答建立P2P连接
用户B收到用户A发送过来的offer、candidate
- 初始化peer
- 通过getUserMedia方法，获取摄像头的stream，并添加到peer通道中
- setRemoteDescription用户A发送过来的offer；addIceCandidate用户A发送过来的candidate
- 生成answerOffer，peer.setLocalDescription(answerOffer)；以及获取用户B本人的candidate
- 将answerOffer及新生成的candidate发送给用户A
用户A收到用户B发送过来的answerOffer，以及用户B的candidadte信息
- setRemoteDescription、addIceCandidate；完成信令交换过程
- peer.ontrack，监听P2P通道建立成功，将用户B的流添加到用户A页面的video标签
用户B监听，peer.ontrack
- 信令交换完成后，会触发，获取到用户A的stream，将用户A的stream添加到video标签
用户A和用户B成功建立起视屏连接