全球定位: webrtc音视频通话(一)搭建turn服务器 webrtc音视频通话(二)简单音视频通话 webrtc音视频通话(三)整合websocket
git地址
https://gitee.com/chr_demo/web-rtc.git
这里只写script部分,html和webrtc-util.js
在上一篇有
1、引入js
<script src="./js/webrtc-util.js" type="text/javascript"></script>
2、整合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>
3、填坑
运行后可能会遇到如下报错:
这一点是因为这个导致的,只要将下图中框起来的部分,将true改为false即可,不过这会导致没有声音。总的来说,这不是bug。
最后看下效果。(隔了很久才截的图,页面布局有点不一样哈,不过核心还是一样滴)
End
原文链接:webrtc音视频通话(三)整合websocket_websocket 通话_QQ两个人的博客-CSDN博客
★文末名片可以免费领取音视频开发学习资料,内容包括(FFmpeg ,webRTC ,rtmp ,hls ,rtsp ,ffplay ,srs)以及音视频学习路线图等等。
见下方!↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓