WebRTC多人会议室

一、项目描述

基于WebRTC技术的多人会议室项目

完成功能：1.完成Web服务器与信令服务器开发；

                  2.完成STUN/TURN服务器的搭建；

二、具体实现

1.客户端

'use strict'

var inMyPeerId = document.querySelector("input#in_my_peer_id");
var btLogin = document.querySelector("button#bt_login");
var localVideo = document.querySelector("video#local_video");
var remoteVideo = document.querySelector("video#remote_video");
var ulPeerList = document.querySelector("ul#peer_list");

var wsConn = null;
var rtcPeerConn = null;
var localStream = null;
var remoteStream = null;
var remoteRtcPeerId = null;
var candidates = [];

var ICE_CFG = {
     iceServers: [{
     //   urls: 'stun:stun.l.google.com:19302'
         urls: 'turn:222.90.86.128:3478',       
         username: 'username1',
         credential: 'password1'
     }]
};

function CreateRtcPeerConnection() {
	if (rtcPeerConn) {
        console.log('peer connection has already been created.');
		return;
    }
    rtcPeerConn = new RTCPeerConnection(ICE_CFG);
	
	rtcPeerConn.onicecandidate = (event) => {
		if (event.candidate) {
			var proxyCandidateMessage = {
				messageId: 'PROXY',
                type: 'candidate',
                fromPeerId: inMyPeerId.value,
                toPeerId: remoteRtcPeerId,
                messageData: {
                    candidate: event.candidate
                }
			};
			wsConn.send(JSON.stringify(proxyCandidateMessage));
		}
	}
    rtcPeerConn.oniceconnectionstatechange = (event) => {
        console.log('oniceconnectionstatechange', rtcPeerConn.iceConnectionState);
    }
	rtcPeerConn.ontrack = (event) => {
        if (remoteStream === null) {
            remoteStream = new MediaStream();
            remoteVideo.srcObject = remoteStream;
            remoteVideo.style.display = 'inline-block';
        }
        remoteStream.addTrack(event.track);
	}
}

function CloseRtcPeerConnection() {
    if (rtcPeerConn) {
        rtcPeerConn.close();
        rtcPeerConn = null;
    }
}

async function GetLocalMediaStream() {
	if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
	    console.log('getUserMedia is not supported!');
	    return null;
    } else if (localStream) {
        console.log('localStream already exist.');
        return localStream;
	} else {
		var constraints = {
			video: true,
			audio: true
		};
		return navigator.mediaDevice