webrtc音视频通话（三）整合websocket

webrtc音视频通话（三）整合websocket

全球定位：
webrtc音视频通话（一）搭建turn服务器
webrtc音视频通话（二）简单音视频通话
webrtc音视频通话（三）整合websocket

---

git地址

https://gitee.com/chr_demo/web-rtc.git

---

这里只写script部分，html和webrtc-util.js在上一篇有

一、引入js

<script src="./js/webrtc-util.js" type="text/javascript"></script>

二、整合websocket

需要注意的是，我这里用的是手机热点，所以wss地址是我本地的IP地址。之所以这样，是因为要两台设备访问，来测试音视频通话是否成功。

特别提醒

1、创建SDP对象之前，必须先打开本地音视频流
2、打开音视频流之前，必须先绑定事件（bindOnIceCandidate、bindOnTrack）
3、创建用于 answer 的 SDP 对象 之前，必须先保存用于 offer 的 SDP 对象。

<script>
    let webSocket;
    let url = 'wss://192.168.43.94:8080/webrtc';
    // let url = 'wss://192.168.12.113:8080/webrtc';
    
    $(function () {
      webSocket = new WebSocket(url);
      webSocket.onopen = function () {
        console.log('webSocket连接创建。。。');
      }
      webSocket.onclose = function () {
      }
      webSocket.onmessage = function (event) {
        let data = {
          operation: '',
          msg: ''
        };
        
        data = JSON.parse(event.data);
        // console.log(data);
        switch (data.operation) {
          case "into":
            //加入成功
            if (data.msg == 'offer' ||
                data.msg == 'answer') {
              // 1、创建端点
              createPeerConnection();
              // 2、绑定 收集 candidate 的回调
              bindOnIceCandidate(candidate => sendMsg('send-candidate', candidate));
              // 3、绑定 获得 远程视频流 的回调
              bindOnTrack(stream => {
                console.log('获得远程视频流');
                //显示 远程视频流
                let remoteVideo = document.getElementById("remoteVideo");
                remoteVideo.srcObject = stream;
                remoteVideo.play();
              });
              console.log(data.msg + '进入成功');
              
              // 如果是 answer, 说明 offer 和 answer 都已就绪, 触发开始消息
              if (data.msg == 'answer') {
                sendMsg('start', '')
              }
            } else if (data.msg == 'none') {
              alert('房间已满');
            }
            break;
          case "start":
            // 先打开视频流, 在创建用于 offer 的 SDP 对象
            openLocalMedia(stream => {
              // 显示本地视频流
              let localVideo = document.getElementById("localVideo");
              localVideo.srcObject = stream;
              localVideo.play();
              
              createOffer(sdp => {
                console.log('创建并发送 offer')
                sendMsg('send-offer', sdp);
              });
            });
            
            break;
          case "send-offer":
            //先保存收到的 offer
            saveSdp(data.msg, () => {
              console.log('offer 保存成功');
  
  			  //再打开音视频流
              openLocalMedia(stream => {
                let localVideo = document.getElementById("localVideo");
                localVideo.srcObject = stream;
                localVideo.play();
  
            	//最后创建用于 answer 的 SDP 对象
                createAnswer(sdp => {
                  console.log('创建并发送 answer')
                  sendMsg('send-answer', sdp);
                });
              });
            });
            break;
          case "send-answer":   
            // 保存收到的 answer
            saveSdp(data.msg, () => console.log('answer 保存成功'));
            break;
          case "send-candidate":
            //用于交换 candidate
            saveIceCandidate(data.msg);
            break;
        }
      }
      webSocket.onerror = function (event) {
        console.log(event)
        console.log('webSocket连接异常。。。');
      }
    });
    
    //发送消息
    function sendMsg(operation, msg) {
      let data = {
        operation: operation,
        msg: msg
      };
      webSocket.send(JSON.stringify(data));
    }
    
    //加入房间
    $('#addRoom').click(function () {
      sendMsg('into', '');
    });
  </script>

三、填坑

运行后可能会遇到如下报错：

这一点是因为这个导致的，只要将下图中框起来的部分，将true改为false即可，不过这会导致没有声音。总的来说，这不是bug。

最后看下效果。（隔了很久才截的图，页面布局有点不一样哈，不过核心还是一样滴）

End

---

全球定位：
webrtc音视频通话（一）搭建turn服务器
webrtc音视频通话（二）简单音视频通话
webrtc音视频通话（三）整合websocket