uniapp开发WebRTC语音直播间支持app（android+IOS）和H5，并记录了全部踩得 ...

一、效果图

二、主要功能

1. 创建自己的语音直播间
2. 查询全部直播间列表
3.加入房间
4.申请上位
5.麦克风控制
6.声音控制
7.赠送礼品（特效 + 批量移动动画）
8.退出房间
三、原理

1.uniapp 实现客户端H5、安卓、苹果
2.webRTC实现语音直播间（具体原理网上有很多文章我就不讲了，贴个图）

3.使用node.js搭建信令服务器（我用的是socket）
4.礼品及特效使用svga
四、踩坑及解决方案

1. 客户端（这里重点在于app端）一定要在视图层创建webRTC！！！不要在逻辑层创建！！！因为会要求使用安全毗连，也就是说要用到SSL证书，这个很多人都没有，有的话当我没说。怎样在视图层创建RTC呢？在uniapp中使用renderjs！

1. <script module="webRTC" lang="renderjs">
2. new RTCPeerConnection(iceServers)
3. </script>

复制代码

2. （这里重点也在于app）客户端创建和信令服务器进行通讯的socket时app端在页面跳转后socket状态消失无法响应信令服务器消息。解决方案是：一定不要在客户端视图层创建socket！！！也就是说socket不要创建在renderjs里，要在逻辑层用uniapp提供的api进行创建，然后使用uniapp文档中说明的逻辑层和视图层的通讯方式进行通讯，这样虽然在开发中有些繁琐，但是能解决问题。

1. onShow(){
2. // socketTask是使用uniapp提供的uni.connectSocket创建出来的socket实例
3. // watchSocketMessage代理了socket实例的onMessage方法
4. socketTask.watchSocketMessage = (data) => {
5.                                 this.watchSocketMessage(data)
6.                         }
7.    
8. }
10. methed:{
11.     watchSocketMessage(){
12.         // 这里是收到信令服务器socket后的逻辑
13.     }
14. }

复制代码

1. // 这里是逻辑层和renderjs通信的方式，通过监听状态的改变从而触发renderjs的对应的方法
2. // 注意在页面刚加载完成后这些方法会被默认触发一边，所以要在这些放方法做好判断return出去
4. <view :rid="rid" :change:rid="webRTC.initRid" :userId="userId" :change:userId="webRTC.initUserId"
5.                         :giftnum="giftnum" :change:giftnum="webRTC.initgiftnum" :micPosition="micPosition"
6.                         :change:micPosition="webRTC.initMicPositions" :giftPosition="giftPosition"
7.                         :change:giftPosition="webRTC.initGiftPosition" :RTCJoin="RTCJoin" :change:RTCJoin="webRTC.changeRTCjoin"
8.                         :RTCOffier="RTCOffier" :change:RTCOffier="webRTC.changeRTCoffier" :RTCAnswer="RTCAnswer" :isAudio="isAudio"
9.                         :change:isAudio="webRTC.changeIsAudio" :change:RTCAnswer="webRTC.changeRTCAnswer"
10.                         :RTCCandidate="RTCCandidate" :change:RTCCandidate="webRTC.changeRTCCandidate" :isTrue="isTrue"
11.                         :change:isTrue="webRTC.changeIsTrue" :newMess="newMess" :change:newMess="webRTC.changeNewMessage"
12.                         :isMedia="isMedia" :name="name" :change:name="webRTC.changeName" :change:isMedia="webRTC.changeIsMedia"
13.                         :animos="animos" :change:animos="changeAnimos" class="chat">
14. </view>

复制代码

3.毗连顺序的问题，一定是：新进入的用户通过信令服务器给房间已有用户发送Offer，用户接收到Offer回应Answer，记着这个逻辑！
4.因为webRTC是运行在视图层的（也就是欣赏器），而苹果默认欣赏器是Safari，Safari欣赏器默认机制是在用户主动和页面进行交互后，自动播放声音才会生效（也就是才有声音），所以在IOS端全部用户进入直播房间后默认都是静音的，用户主动开启音频才会受到直播间的声音（这是目前我发现的最好的解决办法）
五、核心代码（只有关键步调）

1. 客户端socket

1. const socketTask = {
2.         socket: null,
3.         connect: () => {
5.                 getApp().globalData.socket = uni.connectSocket({
6.                         url:'ws://180.76.158.110:9000/socket/websocketv',
7.                         // url: 'ws://192.168.3.254:9000/socket/websocketv',
8.                         complete: (e) => {
9.                                 console.log(e);
10.                         },
11.                 });
13.                 getApp().globalData.socket.onOpen((data) => {
14.                         console.log("111111111");
15.                         getApp().globalData.socket.send({
16.                                 data: JSON.stringify({
17.                                         type: "newConnect",
18.                                         userId: uni.getStorageSync('user').id,
19.                                 })
20.                         })
21.                 })
23.                 getApp().globalData.socket.onClose((res) => {
24.                         console.log("连接关闭", res);
25.                         getApp().globalData.socket = null;
26.                         setTimeout(() => {
27.                                 socketTask.connect()
28.                         }, 3000)
29.                 })
31.                 getApp().globalData.socket.onError((err) => {
32.                         console.log("连接异常", err);
33.                         getApp().globalData.socket = null;
34.                         setTimeout(() => {
35.                                 socketTask.connect()
36.                         }, 1)
37.                 })
39.                 getApp().globalData.socket.onMessage((data) => {
40.                         socketTask.watchSocketMessage(data)
41.                 })
43.         },
44.         start: function() {
45.                 this.connect()
46.         },
47.         watchSocketMessage: function() {
48.                 // 这里实现自己的业务逻辑
49.         }
50. }
52. export default socketTask

复制代码

2.客户端房间列表页

1. async onShow() {
2.                         if (!getApp().globalData.socket) {
3.                                 await socketTask.start();
4.                         }
5.                         socketTask.watchSocketMessage = (data) => {
6.                                 console.log("===========收到新消息==========",data);
7.                                 this.watchSocketMessages(data)
8.                         }
9.                 },
10. methed:{
11. // 监听socket消息
12.                         watchSocketMessages(res) {
13.                                 try {
14.                                         const socket_msg = JSON.parse(res.data);
15.                                         console.log("收到新消息", socket_msg);
16.                                         switch (socket_msg.type) {
17.                                                 case "homeList":
18.                                                         if (socket_msg.data.length == 0) {
19.                                                                 this.homeList = [];
20.                                                                 uni.showToast({
21.                                                                         title: "暂无房间，快去创建一个吧",
22.                                                                         icon: "none"
23.                                                                 })
24.                                                         } else {
25.                                                                 this.homeList = socket_msg.data;
26.                                                         }
27.                                                         break
28.                                                 case "leave":
29.                                                         getApp().globalData.socket.send({
30.                                                                 data: JSON.stringify({
31.                                                                         type: "homeList",
32.                                                                         userId: this.userInfo.userId,
33.                                                                 })
34.                                                         })
35.                                                         break
36.                                                 case "createSuccess":
37.                                                         uni.redirectTo({
38.                                                                 url: `broadRoom?rid=${socket_msg.data.groupId}&&userId=${this.userInfo.id}&&groupInfo=${JSON.stringify(socket_msg.data)}`
39.                                                         })
40.                                                         break
41.                                         }
42.                                 } catch (e) {
44.                                 }
45.                         },
46. }

复制代码

3.客户端直播间
逻辑层：

1. async onShow() {
2.                         const that = this;
3.                         if (!getApp().globalData.socket) {
4.                                 console.log("socket不存在，重新连接");
5.                                 await socketTask.start();
6.                         }
7.                         socketTask.watchSocketMessage = (data) => {
8.                                 this.watchSocketMessage(data)
9.                         }
10.                         // 编译平台信息
11.                         uni.getSystemInfo({
12.                                 success(res) {
13.                                         console.log("当前平台是", res);
14.                                         if (res.osName == 'ios') {
15.                                                 console.log("我是ios", res)
16.                                                 that.isMedia = 'ios';
17.                                         } else {
18.                                                 console.log("我是安卓", res)
19.                                                 that.isMedia = 'android';
20.                                         }
22.                                 }
23.                         })
25.                 }
27. methed：{
28. async watchSocketMessage(date) {
29.                                 const data = JSON.parse(date.data);
30.                                 switch (data.type) {
31.                                         case "join":
32.                                                 console.log("join成功", data);
33.                                                 this.newMessaGes(data);
34.                                                 this.setUserList(data.admin);
35.                                                 this.updataNewMic(data)
36.                                                 // 找出自己以外的其他用户
37.                                                 const arr = this.userList.filter((item, index) => {
38.                                                         return item.userId !== this.userId
39.                                                 })
40.                                                 console.log("找出自己以外的其他用户", arr)
41.                                                 // 通知renderjs层创建RTC
42.                                                 this.RTCJoin = arr;
43.                                                 this.updataIsShow()
44.                                                 break
46.                                         case "newjoin":
47.                                                 this.newMessaGes(data);
48.                                                 this.setUserList(data.admin);
49.                                                 break
51.                                         case "offer":
52.                                                 //通知renderjs层有新人进入创建answer
53.                                                 console.log("收到offer", data)
54.                                                 this.RTCOffier = data;
55.                                                 break
56.                                         case "answer":
57.                                                 // 找到对应peer,设置answer
58.                                                 console.log("收到offer", data)
59.                                                 this.RTCAnswer = data;
60.                                                 break
61.                                         case "candidate":
62.                                                 // 找到对应的peer,将candidate添加进去
63.                                                 this.RTCCandidate = data;
64.                                                 break
65.                                         case "leave":
66.                                                 if (data.data == "房主已解散房间") {
67.                                                         this.closesAdmin()
68.                                                 } else {
69.                                                         const datas = {
70.                                                                 data,
71.                                                         }
72.                                                         this.newMessaGes(datas)
73.                                                         this.setUserList(data.admin);
74.                                                         this.updataNewMic(data);
75.                                                 }
76.                                                 break
77.                                         case "apply-admin":
78.                                                 this.updataIsApply(data.data)
79.                                                 break
80.                                         case "newMic":
81.                                                 this.updataNewMic(data)
82.                                                 break
83.                                         case "uplMicro":
84.                                                 this.updataNewMic(data)
85.                                                 break
86.                                         case "newMessage":
87.                                                 this.newMess = data;
88.                                                 break
89.                                 }
90.                         },
91. }

复制代码

视图层：

1. <script module="webRTC" lang="renderjs">
3. // 以下方法都在methed：{}中
7. // 监听changeRTCCandidate
8.                         async changeRTCCandidate(data) {
9.                                 if (!data) {
10.                                         return
11.                                 }
12.                                 console.log("this.otherPeerConnections", this.otherPeerConnections);
13.                                 let arrs = this.otherPeerConnections.concat(this.myPeerConnections);
16.                                 if (arrs.length == 0) {
17.                                         return
18.                                 }
20.                                 let peerr = arrs.filter(item => {
21.                                         return item.otherId == data.userId
22.                                 })
23.                                
24.                                 if (peerr[0].peer == {}) {
25.                                         return
26.                                 } else {
27.                                         console.log("candidatecandidate", data.candidate)
28.                                         await peerr[0].peer.addIceCandidate(new RTCIceCandidate(data.candidate))
29.                                 }
30.                         },
31.                         // 监听answer,找到对应peer设置answer
32.                         async changeRTCAnswer(data) {
33.                                 if (!data) {
34.                                         return
35.                                 }
36.                                 let peers = this.myPeerConnections.filter(item => {
37.                                         return item.otherId == data.userId
38.                                 })
39.                                 console.log("peers[0]", peers[0])
40.                                 await peers[0].peer.setRemoteDescription(new RTCSessionDescription(data.answer))
41.                         },
42.                         // 监听offier,RTCAnswer的创建
43.                         async changeRTCoffier(data) {
44.                                 if (!data) {
45.                                         return
46.                                 }
47.                                 let pear = null;
48.                                 try {
49.                                         pear = new RTCPeerConnection(iceServers);
50.                                 } catch (e) {
51.                                         console.log("实例化RTC-pear失败", e);
52.                                 }
54.                                 // 将音频流加入到Peer中
55.                                 this.localStream.getAudioTracks()[0].enabled = this.isTrue;
56.                                 this.localStream.getTracks().forEach(
57.                                         (track) => pear.addTrack(track, this.localStream)
58.                                 );
59.                                 this.otherPeerConnections.push({
60.                                         peer: pear,
61.                                         otherId: data.userId
62.                                 })
63.                                 //当远程用户向对等连接添加流时，我们将显示它
64.                                 pear.ontrack = (event) => {
65.                                         // 为该用户创建audio
66.                                         const track = event.track || event.streams[0]?.getTracks()[0];
67.                                         if (track && track.kind === 'audio') {
68.                                                 console.log("存在音轨", event.streams[0]);
69.                                                 this.renderAudio(data.userId, event.streams[0]);
70.                                         } else {
71.                                                 console.warn("No audio track found in the received stream.");
72.                                         }
73.                                 };
75.                                 // 通过监听onicecandidate事件获取candidate信息
76.                                 pear.onicecandidate = async (event) => {
77.                                         if (event.candidate) {
78.                                                 // 通过信令服务器发送candidate信息给用户B
79.                                                 await this.$ownerInstance.callMethod("sendCandidate", {
80.                                                         type: "candidate",
81.                                                         userId: this.userId,
82.                                                         rid: this.rid,
83.                                                         msg: event.candidate,
84.                                                         formUserId: data.userId,
85.                                                 })
86.                                         }
87.                                 }
89.                                 pear.setRemoteDescription(new RTCSessionDescription(data.offer))
91.                                 // 接收端创建answer并发送给发起端
92.                                 pear.createAnswer().then(answer => {
93.                                         pear.setLocalDescription(answer);
94.                                         // 通知serve层给房间用户发送answer
95.                                         this.$ownerInstance.callMethod("sendAnswer", {
96.                                                 type: "answer",
97.                                                 userId: this.userId,
98.                                                 rid: this.rid,
99.                                                 msg: answer,
100.                                                 formUserId: data.userId,
101.                                         })
102.                                 })
103.                         },
104.                         // 发起连接申请,offier的创建
105.                         changeRTCjoin(RTCjoin) {
106.                                 if (!RTCjoin) {
107.                                         return
108.                                 }
109.                                 RTCjoin.forEach((item, index) => {
110.                                         let peer = null;
111.                                         try {
112.                                                 peer = new RTCPeerConnection(iceServers);
113.                                         } catch (e) {
114.                                                 console.log("实例化RTC失败", e);
115.                                         }
117.                                         this.localStream.getAudioTracks()[0].enabled = this.isTrue;
118.                                         this.localStream.getTracks().forEach(
119.                                                 (track) => peer.addTrack(track, this.localStream)
120.                                         );
122.                                         peer.ontrack = (event) => {
123.                                                 console.log("发起连接申请,offier的创建:peer.ontrack");
124.                                                 const track = event.track || event.streams[0]?.getTracks()[0];
125.                                                 if (track && track.kind === 'audio') {
126.                                                         console.log("存在音轨2", event.streams[0]);
127.                                                         this.renderAudio(item.userId, event.streams[0]);
128.                                                 } else {
129.                                                         console.warn("No audio track found in the received stream.");
130.                                                 }
131.                                         };
133.                                         // 通过监听onicecandidate事件获取candidate信息
134.                                         peer.onicecandidate = (event) => {
135.                                                 if (event.candidate) {
136.                                                         // 通过信令服务器发送candidate信息给用户B
137.                                                         this.$ownerInstance.callMethod("sendCandidate", {
138.                                                                 type: "candidate",
139.                                                                 userId: this.userId,
140.                                                                 rid: this.rid,
141.                                                                 msg: event.candidate,
142.                                                                 formUserId: item.userId,
143.                                                         })
144.                                                 }
145.                                         }
146.                                         this.myPeerConnections.push({
147.                                                 peer: peer,
148.                                                 otherId: item.userId
149.                                         })
151.                                         peer.createOffer(this.offerOptions).then(offer => {
152.                                                 peer.setLocalDescription(offer);
153.                                                 // 通知serve层给房间用户发送offier
154.                                                 this.$ownerInstance.callMethod("sendOffier", {
155.                                                         type: "offer",
156.                                                         userId: this.userId,
157.                                                         rid: this.rid,
158.                                                         msg: offer,
159.                                                         formUserId: item.userId,
160.                                                 })
161.                                         })
162.                                 })
163.                         },
165.                         renderAudio(uid, stream) {
166.                                 let audio2 = document.getElementById(`audio_${uid}`);
167.                                 console.log("audio_name", `audio_${uid}`);
168.                                 if (!audio2) {
169.                                         audio2 = document.createElement('audio');
170.                                         audio2.id = `audio_${uid}`;
171.                                         audio2.setAttribute("webkit-playsinline", "");
172.                                         audio2.setAttribute("autoplay", true);
173.                                         audio2.setAttribute("playsinline", "");
174.                                         audio2.onloadedmetadata = () => {
175.                                                 if (this.isAudio == 1) {
176.                                                         console.log("不自动播放");
177.                                                         audio2.pause();
178.                                                 } else {
179.                                                         audio2.play();
180.                                                 }
181.                                         };
183.                                         this.audioList.push(audio2)
184.                                 }
185.                                 if ("srcObject" in audio2) {
186.                                         console.log("使用了srcObject赋值");
187.                                         audio2.srcObject = stream;
188.                                 } else {
189.                                         console.log("找不到srcObject赋值");
190.                                         audio2.src = window.URL.createObjectURL(stream);
191.                                 }
192.                         },
193. async initMedia() {
194.                                 const that = this;
196.                                 console.log("##########", this.isMedia);
197.                                 // #ifdef APP-PLUS
198.                                 if (this.isMedia == 'android') {
199.                                         console.log("androidandroidandroidandroid");
200.                                         await plus.android.requestPermissions(
201.                                                 ['android.permission.RECORD_AUDIO'],
202.                                                 async (resultObj) => {
203.                                                                 var result = 0;
204.                                                                 for (var i = 0; i < resultObj.granted.length; i++) {
205.                                                                         var grantedPermission = resultObj.granted[i];
206.                                                                         result = 1
207.                                                                 }
208.                                                                 for (var i = 0; i < resultObj.deniedPresent.length; i++) {
209.                                                                         var deniedPresentPermission = resultObj.deniedPresent[i];
210.                                                                         result = 0
211.                                                                 }
212.                                                                 for (var i = 0; i < resultObj.deniedAlways.length; i++) {
213.                                                                         var deniedAlwaysPermission = resultObj.deniedAlways[i];
214.                                                                         result = -1
215.                                                                 }
216.                                                                 that.localStream = await that.getUserMedia();
217.                                                                 that.$ownerInstance.callMethod("sendJoin", {
218.                                                                         type: "join",
219.                                                                         userId: that.userId,
220.                                                                         rid: that.rid,
221.                                                                         name: that.name
222.                                                                 })
223.                                                         },
224.                                                         function(error) {
225.                                                                 console.log("导入android出现错误", error);
226.                                                         }
227.                                         );
228.                                 } else {
229.                                         console.log("iosiosiosiosiosios");
230.                                         that.localStream = await that.getUserMedia().catch(err => {
231.                                                 console.log("出错了", err);
232.                                         })
233.                                         that.$ownerInstance.callMethod("sendJoin", {
234.                                                 type: "join",
235.                                                 userId: that.userId,
236.                                                 rid: that.rid,
237.                                                 name: that.name
238.                                         })
239.                                 }
241.                                 // #endif
242.                                 // #ifdef H5
243.                                 that.localStream = await that.getUserMedia();
244.                                 // 通知serve层加入成功
245.                                 this.$ownerInstance.callMethod("sendJoin", {
246.                                         type: "join",
247.                                         userId: this.userId,
248.                                         rid: this.rid,
249.                                         name: this.name
250.                                 })
251.                                 // #endif
252.                         },
253.                         getUserMedia(then) {
254.                                 return new Promise((resolve, reject) => {
255.                                         navigator.mediaDevices.getUserMedia(this.mediaConstraints).then((stream) => {
256.                                                 return resolve(stream);
257.                                         }).catch(err => {
258.                                                 if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError') {
259.                                                         // 用户拒绝了授权
260.                                                         reject(new Error('用户拒绝了访问摄像头和麦克风的请求'));
261.                                                 } else if (err.name === 'NotFoundError' || err.name === 'DevicesNotFoundError') {
262.                                                         // 没有找到摄像头或麦克风
263.                                                         reject(new Error('没有找到摄像头或麦克风'));
264.                                                 } else if (err.name === 'NotReadableError' || err.name === 'TrackStartError') {
265.                                                         // 摄像头或麦克风不可读
266.                                                         reject(new Error('摄像头或麦克风不可读'));
267.                                                 } else if (err.name === 'OverconstrainedError' || err.name ===
268.                                                         'ConstraintNotSatisfiedError') {
269.                                                         // 由于媒体流的约束条件无法满足，请求被拒绝
270.                                                         reject(new Error('请求被拒绝，由于媒体流的约束条件无法满足'));
271.                                                 } else if (err.name === 'TypeError' || err.name === 'TypeError') {
272.                                                         // 发生了类型错误
273.                                                         reject(new Error('发生了类型错误'));
274.                                                 } else {
275.                                                         // 其他未知错误
276.                                                         reject(new Error('发生了未知错误'));
277.                                                 }
278.                                         })
279.                                 });
280.                         },
281. </script>

复制代码

4.信令服务器
略（就是socket，内里写swich，不会私信，小额收费）

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。