【从头到脚】撸一个多人视频聊天 — 前端 WebRTC 实战（一）

navigator.mediaDevices.getUserMedia({ audio: true, video: true }) 
    // 参数表示需要同时获取到音频和视频
        .then(stream => {
          // 获取到优化后的媒体流
          let video = document.querySelector('#rtc');
          video.srcObject = stream;
        })
        .catch(err => {
          // 捕获错误
        });

* id [String]: 对当前的 MS 进行唯一标识。所以每次刷新浏览器或是重新获取 MS，id 都会变动。
* active [boolean]: 表示当前 MS 是否是活跃状态（就是是否可以播放）。
* onactive: 当 active 为 true 时，触发该事件。

* kind: 是当前获取的媒体流类型（Audio/Video）。
* label: 是媒体设备，我这里用的是虚拟摄像头。
* muted: 表示媒体轨道是否静音。

// 判断是否有 navigator.mediaDevices，没有赋成空对象
    if (navigator.mediaDevices === undefined) {
        navigator.mediaDevices = {};
    }

    // 继续判断是否有 navigator.mediaDevices.getUserMedia，没有就采用 navigator.getUserMedia
    if (navigator.mediaDevices.getUserMedia) {
        navigator.mediaDevices.getUserMedia = function(prams) {
            let getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
            // 兼容获取
            if (!getUserMedia) {
                return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
            }
            return new Promise(function(resolve, reject) {
                getUserMedia.call(navigator, prams, resolve, reject);
            });
        };
    }
    navigator.mediaDevices.getUserMedia(constraints)
        .then(stream => {
            let video = document.querySelector('#Rtc');
            if ('srcObject' in video) { // 判断是否支持 srcObject 属性
                video.srcObject = stream;
            } else {
                video.src = window.URL.createObjectURL(stream);
            }
            video.onloadedmetadata = function(e) {
                video.play();
            };
        })
        .catch((err) => { // 捕获错误
            console.error(err.name + ': ' + err.message);
        });

navigator.mediaDevices.getUserMedia({ audio: false, video: true });
    // 只需要视频流，不要音频

// 获取指定宽高，这里需要注意：在改变视频流的宽高时，
    // 如果宽高比和采集到的不一样，会直接截掉某部分
    { audio: false, 
      video: { width: 1280, height: 720 } 
    }
    // 设定理想值、最大值、最小值
    {
      audio: true,
      video: {
        width: { min: 1024, ideal: 1280, max: 1920 },
        height: { min: 776, ideal: 720, max: 1080 }
      }
    }

{ audio: true, video: { facingMode: "user" } } // 前置
    { audio: true, video: { facingMode: { exact: "environment" } } } // 后置
    // 也可以指定设备 id，
    // 通过 navigator.mediaDevices.enumerateDevices() 可以获取到支持的设备
    { video: { deviceId: myCameraDeviceId } }

{ audio: true, video: {mediaSource: 'screen'} }

let PeerConnection = window.RTCPeerConnection ||
                         window.mozRTCPeerConnection ||
                         window.webkitRTCPeerConnection;
    let peer = new PeerConnection(iceServers);

{
      iceServers: [
        { url: "stun:stun.l.google.com:19302"}, // 谷歌的公共服务
        {
          url: "turn:***",
          username: ***, // 用户名
          credential: *** // 密码
        }
      ]
    }

v=0
    o=- 1837933589686018726 2 IN IP4 127.0.0.1
    s=-
    t=0 0
    a=group:BUNDLE audio video
    a=msid-semantic: WMS yvKeJMUSZzvJlAJHn4unfj6q9DMqmb6CrCOT
    m=audio 9 UDP/TLS/RTP/SAVPF 111 103 104 9 0 8 106 105 13 110 112 113 126
    ...
    ...

* **呼叫端** 创建 offer 信息后，先调用 setLocalDescription 存储本地 offer 描述，再将其发送给 **接收端**。
 * **接收端** 收到 offer 后，先调用 setRemoteDescription 存储远端 offer 描述；然后又创建 answer 信息，同样需要调用 setLocalDescription 存储本地 answer 描述，再返回给 **接收端**
 * **呼叫端** 拿到 answer 后，再次调用 setRemoteDescription 设置远端 answer 描述。

async createMedia() {
    // 保存本地流到全局
    this.localstream = await navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    let video = document.querySelector('#rtcA');
    video.srcObject = this.localstream;
    this.initPeer(); // 获取到媒体流后，调用函数初始化 RTCPeerConnection
}

initPeer() {
    ...
    this.peerA.addStream(this.localstream); // 添加本地流
    this.peerA.onicecandidate = (event) => {
    // 监听 A 的ICE候选信息 如果收集到，就添加给 B 连接状态
        if (event.candidate) {
            this.peerB.addIceCandidate(event.candidate);
        }
    };
    ...
    // 监听是否有媒体流接入，如果有就赋值给 rtcB 的 src
    this.peerB.onaddstream = (event) => {
        let video = document.querySelector('#rtcB');
        video.srcObject = event.stream;
    };
    this.peerB.onicecandidate = (event) => { 连接状态
    // 监听 B 的ICE候选信息 如果收集到，就添加给 A
        if (event.candidate) {
            this.peerA.addIceCandidate(event.candidate);
        }
    };
}

peer.oniceconnectionstatechange = (evt) => {
    console.log('ICE connection state change: ' + evt.target.iceConnectionState);
};

new        ICE代理正在收集候选人或等待提供远程候选人。
checking   ICE代理已经在至少一个组件上接收了远程候选者，并且正在检查候选但尚未找到连接。除了检查，它可能还在收集。
connected  ICE代理已找到所有组件的可用连接，但仍在检查其他候选对以查看是否存在更好的连接。它可能还在收集。
completed  ICE代理已完成收集和检查，并找到所有组件的连接。
failed     ICE代理已完成检查所有候选对，但未能找到至少一个组件的连接。可能已找到某些组件的连接。
disconnected ICE 连接断开
closed      ICE代理已关闭，不再响应STUN请求。

async call() {
    if (!this.peerA || !this.peerB) { // 判断是否有对应实例，没有就重新创建
        this.initPeer();
    }
    try {
        let offer = await this.peerA.createOffer(this.offerOption); // 创建 offer
        await this.onCreateOffer(offer);
    } catch (e) {
        console.log('createOffer: ', e);
    }
}

async onCreateOffer(desc) {
    try {
        await this.peerB.setLocalDescription(desc); // 呼叫端设置本地 offer 描述
    } catch (e) {
        console.log('Offer-setLocalDescription: ', e);
    }
    try {
        await this.peerA.setRemoteDescription(desc); // 接收端设置远程 offer 描述
    } catch (e) {
        console.log('Offer-setRemoteDescription: ', e);
    }
    try {
        let answer = await this.peerA.createAnswer(); // 接收端创建 answer
        await this.onCreateAnswer(answer);
    } catch (e) {
        console.log('createAnswer: ', e);
    }
},
async onCreateAnswer(desc) {
    try {
        await this.peerA.setLocalDescription(desc); // 接收端设置本地 answer 描述
    } catch (e) {
        console.log('answer-setLocalDescription: ', e);
    }
    try {
        await this.peerB.setRemoteDescription(desc); // 呼叫端端设置远程 answer 描述
    } catch (e) {
        console.log('answer-setRemoteDescription: ', e);
    }
}

// 前端
join() {
    if (!this.account) return;
    this.isJoin = true; // 输入框弹层逻辑
    window.sessionStorage.account = this.account; // 刷新判断是否登录过
    socket.emit('join', {roomid: this.roomid, account: this.account}); // 发送加入房间请求
}

// 后端
const sockS = {}; // 不同客户端对应的 sock 实例
const users = {}; // 成员列表
sock.on('join', data=>{
    sock.join(data.roomid, () => {
        if (!users[data.roomid]) {
            users[data.roomid] = [];
        }
        let obj = {
            account: data.account,
            id: sock.id
        };
        let arr = users[data.roomid].filter(v => v.account === data.account);
        if (!arr.length) {
            users[data.roomid].push(obj);
        }
        sockS[data.account] = sock; // 保存不同客户端对应的 sock 实例
         // 将房间内成员列表发给房间内所有人
        app._io.in(data.roomid).emit('joined', users[data.roomid], data.account, sock.id);
    });
});

// 前端
apply(account) { // 发送请求
    // account 对方account  self 是自己的account
    this.loading = true;
    this.loadingText = '呼叫中'; // 呼叫中 loading
    socket.emit('apply', {account: account, self: this.account});
},
reply(account, type) { // 处理回复
    socket.emit('reply', {account: account, self: this.account, type: type});
}
// 收到请求
socket.on('apply', data => {
    if (this.isCall) { // 判断是否在通话中
        this.reply(data.self, '3');
        return;
    }
    this.$confirm(data.self + ' 向你请求视频通话, 是否同意?', '提示', {
        confirmButtonText: '同意',
        cancelButtonText: '拒绝',
        type: 'warning'
    }).then(async () => {
        this.isCall = data.self;
        this.reply(data.self, '1');
    }).catch(() => {
        this.reply(data.self, '2');
    });
});

// 后端
sock.on('apply', data=>{ // 转发申请
    sockS[data.account].emit('apply', data);
});

// 前端 
socket.on('reply', async data =>{ // 收到回复
    this.loading = false;
    switch (data.type) {
        case '1': // 同意
            this.isCall = data.self; // 存储通话对象
            break;
        case '2': //拒绝
            this.$message({
                message: '对方拒绝了你的请求！',
                type: 'warning'
            });
            break;
        case '3': // 正在通话中
            this.$message({
                message: '对方正在通话中！',
                type: 'warning'
            });
            break;
    }
});

socket.on('apply', data => { // 你点同意的地方
    ...
    this.$confirm(data.self + ' 向你请求视频通话, 是否同意?', '提示', {
        confirmButtonText: '同意',
        cancelButtonText: '拒绝',
        type: 'warning'
    }).then(async () => {
        await this.createP2P(data); // 同意之后创建自己的 peer 等待对方的 offer
        ... // 这里不发 offer
    })
    ...
});
socket.on('reply', async data =>{ // 对方知道你点了同意的地方
    switch (data.type) {
        case '1': // 只有这里发 offer
            await this.createP2P(data); // 对方同意之后创建自己的 peer
            this.createOffer(data); // 并给对方发送 offer
            break;
        ...
    }
});

async createP2P(data) {
    this.loading = true; // loading动画
    this.loadingText = '正在建立通话连接';
    await this.createMedia(data);
},
async createMedia(data) {
    ... // 获取并将本地流赋值给 video  同之前
    this.initPeer(data); // 获取到媒体流后，调用函数初始化 RTCPeerConnection
},
initPeer(data) {
    // 创建输出端 PeerConnection
    ...
    this.peer.addStream(this.localstream); // 都需要添加本地流
    this.peer.onicecandidate = (event) => {
    // 监听ICE候选信息 如果收集到，就发送给对方
        if (event.candidate) { // 发送 ICE 候选
            socket.emit('1v1ICE',
            {account: data.self, self: this.account, sdp: event.candidate});
        }
    };
    this.peer.onaddstream = (event) => {
    // 监听是否有媒体流接入，如果有就赋值给 rtcB 的 src，改变相应loading状态，赋值省略
        this.isToPeer = true;
        this.loading = false;
        ...
    };
}

socket.on('1v1answer', (data) =>{ // 接收到 answer
    this.onAnswer(data);
});
socket.on('1v1ICE', (data) =>{ // 接收到 ICE
    this.onIce(data);
});
socket.on('1v1offer', (data) =>{ // 接收到 offer
    this.onOffer(data);
});

// 这里只贴一个 createOffer 的代码，因为和之前的思路都一样，只是写法有些区别
// 建议大家都自己敲一遍，有问题可以交流，也可以去源码查看。
async createOffer(data) { // 创建并发送 offer
    try {
        // 创建offer
        let offer = await this.peer.createOffer(this.offerOption);
        // 呼叫端设置本地 offer 描述
        await this.peer.setLocalDescription(offer);
        // 给对方发送 offer
        socket.emit('1v1offer', {account: data.self, self: this.account, sdp: offer});
    } catch (e) {
        console.log('createOffer: ', e);
    }
}

hangup() { // 挂断通话 并做相应处理 对方收到消息后一样需要关闭连接
    socket.emit('1v1hangup', {account: this.isCall, self: this.account});
    this.peer.close();
    this.peer = null;
    this.isToPeer = false;
    this.isCall = false;
}