【webrtc0419 点对点视频聊天功能】

通过WebRtc搭建了自己的网站，实现了点对点视频聊天功能。
点对点视频聊天界面videoRoom.js源码

"use strict"

var url = location.href;
var uname = decodeURI(url.split("?")[1].split("=")[1]);
alert(uname);
var welcomeH1 = document.querySelector("h1#welcome");
welcomeH1.textContent = "欢迎来到1v1视频聊天界面:" + uname;
var roomIpt = document.querySelector("input#room");
var enterRoomBtn = document.querySelector("button#enterRoom");
var leaveRoomBtn = document.querySelector("button#leaveRoom");
var localVideo = document.querySelector("video#localVideo");
var remoteVideo = document.querySelector("video#remoteVideo");

var socket = null;
var localStream = null;
var room = null;
var state = "init";
var pc = null;
var remotestream = null;
function start(){
    if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
        alert("rtc not supported");
        return;
    }
    var constraints = {
        video:true,
        audio:false
    };
    navigator.mediaDevices.getUserMedia(constraints)
        .then(getStream)
        .catch(handleErr)
    conn();
}
function getOffer(desc) {
    pc.setLocalDescription(desc);
    sendMessage(desc);
}
function negociate(){
    if (state === "joined_conn") {
        if (pc) {
            var options = {
                offerToReceiveVideo:true,
                offerToReceiveAudio:true
            };
            pc.createOffer(options)
                .then(getOffer)
                .catch(handleErr);
        }
    }
}
function conn(){
    socket = io.connect();
    //监听各种消息
    socket.on("vjoined", (room)=>{
        alert("成功加入房间:" + room);
        state = "joined";
        createPeerConnection();
        console.log("vjoined:", state);
    });
    socket.on("votherjoined", (room, uname)=>{
        console.log("别人也进来了:" +uname);
        if (state === "joined_unbind") {
            createPeerConnection();
        }
        state = "joined_conn";
        //媒体协商
        negociate();
        console.log("votherjoined state =", state);
    });
    socket.on("vfull", (room)=>{
        console.log("房间满员:" + room);
        state = "leaved";
        alert("房间已满:" + room);
        console.log("vfull:", state);
    });
    socket.on("vleaved", (room)=>{
        console.log("离开房间:" + room);
        state = "leaved";
        console.log("vleaved:", state);
    });
    socket.on("votherleaved", (room, uname)=>{
        console.log("别人离开了房间:" + uname);
        state = "joined_unbind";
        closePeerConnection();
        console.log("votherleaved:", state);
    });
    socket.on("vgetdata", (room, data)=>{
        console.log(data);
        if (!data) {
            return;
        }
        if (data.type === "candidate") {
            console.log("get candidata");
            var cddt = new RTCIceCandidate({
                sdpMLineIndex:data.label,
                candidate:data.candidate,
            })
            pc.addIceCandidate(cddt);
        } else if (data.type === "offer") {
            console.log("other offer");
            pc.setRemoteDescription(new RTCSessionDescription(data));
            pc.createAnswer()
                .then(getAnswer)
                .catch(handleErr);
        } else if (data.type === "answer") {
            console.log("other answer");
            pc.setRemoteDescription(new RTCSessionDescription(data));
        } else {
            console.log("error message");
        }

    });
}
function getAnswer(desc){
    pc.setLocalDescription(desc);
    sendMessage(desc);
}
function closePeerConnection(){
    console.log("close peerconnection");
    if (pc) {
        pc.close();
        pc = null;
    }
}
function createPeerConnection(){
    if (!pc) {
        var pcConfig = {
            "iceServers":[{
                "urls":"turn:101.200.147.94",
                "username":"demo",
                "credential":"demo123"
            }]
        };
        pc = new RTCPeerConnection(pcConfig);
        pc.onicecandidate = (e)=> {
            if (e.candidate) {
                console.log("Candidate:", e.candidate);
                sendMessage({
                    type:"candidate",
                    label:e.candidate.sdpMLineIndex,
                    id:e.candidate.sdpMid,
                    candidate:e.candidate.candidate
                });
            }
        };
        pc.ontrack = (e)=>{
            remotestream = e.streams[0];
            remoteVideo.srcObject = remotestream;
        };
    }
    if (localStream) {
        localStream.getTracks().forEach((track)=>{
            pc.addTrack(track, localStream);
        });
    }
}
function sendMessage(data){
    if(socket) {
        socket.emit("vdata", room, data);
    }
}
start();
function getStream(stream){
    localStream = stream;
    localVideo.srcObject = stream;
}
function handleErr(err){
    console.log(err);
}
function enterRoom(){
    var room = roomIpt.value.trim();
    if (room === "") {
        alert("请输入房间号");
        return;
    }
    socket.emit("vjoin", room, uname);
}
function leaveRoom(){
    socket.emit("vleave", room, uname);
    closePeerConnection();
}
enterRoomBtn.onclick = enterRoom;
leaveRoomBtn.onclick = leaveRoom;

点对点视频聊天界面videoRoom.html源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRtc.roomChat</title>
</head>
<body>
    <div align = "center">
        <h1 id = "welcome">欢迎来到1v1视频聊天界面:</h1>
        <table>
            <tr><td colspan="2">
                <input id = "room">
                <button id = "enterRoom">进入房间</button>
                <button id = "leaveRoom">离开房间</button>
            </td></tr>
            <tr>
                <td><label>本地视频</label></td>
                <td><label>远端视频</label></td>
            </tr>
            <tr>
                <td><video id = "localVideo" autoplay playsinline></video></td>
                <td><video id = "remoteVideo" autoplay playsinline></video></td>
            </tr>
        </table>
    </div>
    <script src = "js/socket.io.js"></script>
    <script src = "js/videoRoom.js"></script>
</body>
</html>