【webrtc】ice链接代码梳理

前言

• 这玩意我看了也是蒙B的，所幸找到了些资料，再基于官网进行理解。

RTCPeerConnection

• mdn：https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection

• 一个基本的RTCPeerConnection使用需要协调本地机器以及远端机器的连接，它可以通过在两台机器间生成Session Description的数据交换协议来实现。呼叫方发送一个offer(请求)，被呼叫方发出一个answer（应答）来回答请求。双方-呼叫方以及被呼叫方，最开始的时候都要建立他们各自的RTCPeerConnection对象。

• 这句解释写的比较清楚，应答方和呼叫方都需要使用RTCPeerConnection来完成链接。

• 着重注意的是RTCPeerConnection.addStream()的实例上的方法，它可以添加一个媒体流 MediaStream作为本地音频或视频源。 一般我们使用MediaStream类型的媒体流即可添加进来。

• setRemoteDescription用来获取offer：https://developer.mozilla.org/zh-CN/docs/Web/API/RTCPeerConnection/setRemoteDescription，这个offer是连接端进行创建的：

const pc = new window.RTCPeerConnection({});
async function createOffer() {
	const offer = await pc.createOffer({
		offerToReceiveAudio: false,
		offerToReceiveVideo: true,
	});
	await pc.setLocalDescription(offer);
	console.log("pc offer", JSON.stringify(offer));
	return pc.localDescription;
}
createOffer();

• 诡异的是createOffer官网说offerTo那2个api已经被废弃，但是不填它的话，是无法触发onicecandidate获取候选地址的。
• setRemoteDescription 以mdn的意思翻译就是远端连接相关的描述，这个创建的offer一大串，反正具体里面字段什么意思，我也不是很懂，拿来用就可以了，以后如果翻到可以补充下。
• 拿到了RTCPeerConnection实例创建的offer后，同时生成候选地址，另一端使用createAnswer获取offer:

async function createAnswer(offer) {
	let screenStream = await getScreenStream();  
	pc.addStream(screenStream); 
	await pc.setRemoteDescription(offer);
	await pc.setLocalDescription(await pc.createAnswer());
	console.log("answer", JSON.stringify(pc.localDescription));
	return pc.localDescription;
}

• 上面的getScreenStream模拟获取视频流，再通过另一个rtc实例添加流，接收远端offer，创建自己的answer。
• 同样也会产生候选地址：

pc.onicecandidate = function (e) {
	//触发此事件函数
	console.log("candidate", JSON.stringify(e.candidate));
};

• 而answer需要交给远端setRemote：

async function setRemote(answer) {
	//设置远程SDP
	await pc.setRemoteDescription(answer);
}

• 当设置完后，会触发onaddStream，也就是前面的createAnswer里设置的addstream收到了。
• 最后需要把候选地址添加进去：

async function addIceCandidate(candidate) {
	if (candidate) {
		candidates.push(candidate);
	}
	if (pc.remoteDescription && pc.remoteDescription.type) {
		for (var i = 0; i < candidates.length; i++) {
			await pc.addIceCandidate(new RTCIceCandidate(candidates[i]));
		}
		candidates = [];  
	}
}

• 这样链接就完成了。

function play(stream) {
	video.srcObject = stream;
	video.onloadedmetadata = () => video.play();
}
peer.on("add-stream", (stream) => {
	play(stream);
});

• 视频流即可在video标签中进行播放