webrtc入门

下面给大家讲解一下这张图，同时附上一些代码实现：

1.首先介绍四个角色：

    a.Client A，该客户端用于提供视频流。

    b.Stun Server，网络穿透服务器，用于查询Client A和Client B的网络信息，如果Client A和Client B处于同一内网环境下，一般来讲，是不用这个的。

    c.Signal Server，信令服务器，用于交换两个客户端之间的信令（sdp和ice）

    d.Client B，该客户端用于获取Client A推送过来的视频流，并进行展示。

2.第一步必定是启动信令服务器，因为两个客户端之间建立连接依赖于该服务器，信令服务器一般只需创建两个websocket，等待两个客户端连接自己。而信令服务器的功能也很简单，用两个变量streamer和player分别记录两个客户端的websocket连接，当Client A的服务（即streamer）触发message事件时，streamer会把answer(另一种格式的sdp，其本质也是sdp)和ice通过player的send方法，发送给Client B；当Client B的服务（即player）触发message事件时，player会把offer（也是sdp）和ice通过streamer的send方法，发送给推流端。当然服务器还需监听一些error，close事件，做容错处理，下面的代码有一半是在做这件事的。

    Signal Server：

var clientConfig = { type: 'config', peerConnectionOptions: {} };	//webrtc对象的配置信息
let player;		//拉流端websocket对象
let streamer; // 推流端websocket对象

//创建推流端websocket服务
let WebSocket = require('ws');
let streamerServer = new WebSocket.Server({ port: 5501, backlog: 1 });
streamerServer.on('connection', function (ws, req) {
	ws.on('message', function onStreamerMessage(msg) {
		try {
			msg = JSON.parse(msg);
		} catch(err) {
			streamer.close(1008, 'Cannot parse');
			return;
		}
		try {
      //streamer通过player的send方法进行信息交换
			if (msg.type == 'answer') {
				player.send(JSON.stringify(msg));
			} else if (msg.type == 'iceCandidate') {
				player.send(JSON.stringify(msg));
			} else if (msg.type == 'disconnectPlayer') {
				player.close(1011 /* internal error */, msg.reason);
			} else {
				console.error(`unsupported Streamer message type: ${msg.type}`);
				streamer.close(1008, 'Unsupported message type');
			}
		} catch(err) {
			console.error(`ERROR: ws.on message error: ${err.message}`);
		}
	});
	ws.on('close', function(code, reason) {
		try {
			console.error(`streamer disconnected: ${code} - ${reason}`);
		} catch(err) {
			console.error(`ERROR: ws.on close error: ${err.message}`);
		}
	});
	ws.on('error', function(error) {
		try {
			console.error(`streamer connection error: ${error}`);
			ws.close(1006 /* abnormal closure */, error);
		} catch(err) {
			console.error(`ERROR: ws.on error: ${err.message}`);
		}
	});
	streamer = ws;
	streamer.send(JSON.stringify(clientConfig));
});

//创建拉流端
let playerServer = new WebSocket.Server({ port: 5502, backlog: 1 });

playerServer.on('connection', function (ws, req) {
	if (!streamer || streamer.readyState != 1 /* OPEN */) {
		ws.close(1013 /* Try again later */, 'Streamer is not connected');
		return;
	}
	ws.on('message', function (msg) {
		try {
			msg = JSON.parse(msg);
		} catch (err) {
			console.error(`Cannot parse player message: ${err}`);
			ws.close(1008, 'Cannot parse');
			return;
		}
  	//player通过streamer的send方法进行信息交换
		if (msg.type == 'offer') {
			streamer.send(JSON.stringify(msg));
		} else if (msg.type == 'iceCandidate') {
			streamer.send(JSON.stringify(msg));
		} else {
			console.error(`unsupported message type: ${msg.type}`);
			ws.close(1008, 'Unsupported message type');
			return;
		}
	});
	ws.on('close', function(code, reason) {
		console.log(`player connection closed: ${code} - ${reason}`);
	});
	ws.on('error', function(error) {
		console.error(`player ${playerId} connection error: ${error}`);
		ws.close(1006 /* abnormal closure */, error);
	});
  player = ws;
	ws.send(JSON.stringify(clientConfig));
});

//音视频配置信息，video属性可以是一个对象，用于设置视频的分辨率，比如：
// video:{ width:1280, height:720 }
const CONSTRAINTS={
    audio:false,
    video:true
}
//websocket服务连接成功后调用该函数，传入的peerConnectionOptions是信令服务器发过来的webrtc配置项
async function initMedia(peerConnectionOptions){
    try{
      let stream = await navigator.mediaDevices.getDisplayMedia(CONSTRAINTS);
      //playerRef.current指向一个video元素，用于预览获取到的画面
      playerRef.current.srcObject = stream;		
      //该函数根据peerConnectionOptions创建一个webrtc实例，具体实现见后续步骤
      setupWebRtcPlayer(peerConnectionOptions);		
      stream.getTracks().forEach(track=>{
        // webrtc.current指向webrtc实例，这一步是把获取到的媒体流加入webrtc的媒体流轨道中，
      	// 当两个客户端连接成功后，拉流端可以从轨道中获取到推流端的媒体流。
        webrtc.current.addTrack(track, stream);		
      });
    }catch(e){
      console.log("组件"+id+"出错：",e);
    }
  }

async function setupWebRtcPlayer(peerConnectionOptions){
  try{
  	let pc1 = new RTCPeerConnection(peerConnectionOptions);		//Create PeerConnection
    let offer = await pc1.createOffer();			//Create Offer
    await pc1.setLocalDescription(offer);		//这里把创建的offer存储为本地描述
    ws.current.send(JSON.stringify(offer));	//通过websocket服务发送offer，ws.current指向一个webscocket实例
    return pc1;
  }catch(e){
    console.log("setupWebRtcPlayer fail:",e);
  }
  return;
}

async function setupWebRtcPlayer(peerConnectionOptions,offer){
  try{
  	let pc2 = new RTCPeerConnection(peerConnectionOptions);		//Create PeerConnection
    await pc2.setRemoteDescription(offer);		//将Client A的offer设置为远程描述
    let answer = await pc2.createAnswer();		//创建answer
    await pc2.setLocalDescription(answer);		//这里把创建的answer存储为本地描述
    ......		//通过信令服务器发送answer的代码就省略了
    return pc2;
  }catch(e){
    console.log("setupWebRtcPlayer fail:",e);
  }
  return;
}

//这里监听icecandidate事件，然后发送对应的ice信息
pc1.onicecandidate = e=>{
	ws.current.send(JSON.stringify({ type: "iceCandidate", candidate: e.candidate }));
}
//在两个客户端都需要对type = iceCandidate的消息进行监听，先复原收到的ice对象，然后执行addIceCandidate方法
ws.current.onmessage=e=>{
  const msg = JSON.parse(e.data);
  const { type } = msg;
  switch(type){
  	......
    case 'offer':
      //sdp在接受到之后也需要进行复原，然后再执行相关操作
      let offerDesc = new RTCSessionDescription(msg);
      ......
      break;
    case 'answer':
      let answerDesc = new RTCSessionDescription(msg);    ......
      break;
    case 'iceCandidate':
      let candidate = new RTCIceCandidate(msg.candidate);
      webrtc.current.addIceCandidate(candidate);
      break;
    ......
  }
}

pc2.ontrack=e=>{
  //video.current指向的是一个video标签，e.streams[0]是指第一个媒体流。
	video.current.srcObject = e.streams[0];
}