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

这里只写script部分，html和webrtc-util.js在上一篇有https://blog.csdn.net/m0_60259116/article/details/127230338

一、引入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>

本文福利， 免费领取C++音视频学习资料包、技术视频，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，srs）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓

三、填坑

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

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

 

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

 

 如果你对音视频开发感兴趣，觉得文章对您有帮助，别忘了点赞、收藏哦！或者对本文的一些阐述有自己的看法，有任何问题，欢迎在下方评论区讨论！

本文福利， 免费领取C++音视频学习资料包、技术视频，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，srs）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓