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

在现代移动应用开发中，WebRTC（Web实时通信）作为一种强大的技术，越来越多地被应用于实时音视频通信的场景中。UniApp作为一款跨平台的开发框架，支持将代码一次编写，编译后运行于Android、iOS和H5等多个平台。本文将分享如何使用UniApp开发一个支持语音直播间的应用，记录在开发过程中遇到的坑和解决方案，同时给出相应的代码示例。

环境准备

首先，你需要确保你的开发环境搭建完毕，包括安装HBuilderX和Node.js等工具。此外，我们将使用一些库来简化WebRTC的使用，例如Socket.io来实现信令通道。

创建项目

在HBuilderX中创建一个新的UniApp项目，并安装Socket.io客户端库。使用以下命令安装Socket.io：

npm install socket.io-client

关键代码示例

以下是一个简单的语音直播间的实现过程。

1. 初始化WebRTC

在script部分，我们需要初始化WebRTC和Socket.io，并处理相关的信令：

import io from 'socket.io-client';

const socket = io('http://yourserver.com'); // 替换成你的服务器地址

let localStream;
let peerConnection;
const servers = {
  iceServers: [{
    urls: 'stun:stun.l.google.com:19302'
  }]
};

// 获取音频流
async function getUserMedia() {
  try {
    localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    // 将音频流添加到peerConnection
    peerConnection.addTrack(localStream.getTracks()[0], localStream);
  } catch (error) {
    console.error('获取用户媒体失败', error);
  }
}

// 处理信令消息
socket.on('offer', (offer) => {
  peerConnection.setRemoteDescription(new RTCSessionDescription(offer))
    .then(() => peerConnection.createAnswer())
    .then(answer => {
      peerConnection.setLocalDescription(answer);
      socket.emit('answer', answer);
    })
    .catch(e => console.log(e));
});

// 注意：这里省略了ICE候选的处理逻辑

2. 连接与断开逻辑

我们可以在页面的onShow和onUnload生命周期中处理连接与断开逻辑：

export default {
  onShow() {
    getUserMedia();
    createPeerConnection();
  },
  onUnload() {
    if (peerConnection) {
      peerConnection.close();
      peerConnection = null;
    }
    if (localStream) {
      localStream.getTracks().forEach(track => track.stop());
      localStream = null;
    }
  },
};

3. 处理ICE候选者

对于WebRTC来说，ICE候选者非常重要，用于帮助建立连接。你可以添加如下代码来处理ICE候选者的交换：

peerConnection.onicecandidate = (event) => {
  if (event.candidate) {
    socket.emit('ice-candidate', event.candidate);
  }
};

socket.on('ice-candidate', (candidate) => {
  peerConnection.addIceCandidate(new RTCIceCandidate(candidate))
    .catch(e => console.error('添加ICE候选失败', e));
});

遇到的坑

1. 跨域问题：在H5中使用WebRTC时，可能会遇到跨域问题。确保你的信令服务器和WebRTC STUN/TURN服务器相应设置了CORS。

2. 音频质量：在不同设备上，音频质量可能会有所不同。建议进行一些调优工作，比如使用WebRTC的音频编码参数，以及在服务器上设置合适的音频流传输策略。

3. 连接稳定性：网络的波动可能导致连接断开。在开发中，务必实现重连机制，以提高用户体验。

4. 权限问题：需要在移动端请求获取音频权限。在实际应用中，尤其是在iOS和Android上，需要确保用户已经允许使用麦克风。

总结

通过上述步骤和代码示例，我们简单实现了一个基于UniApp的WebRTC语音直播间。在开发过程中，注意各个平台的特殊性，处理好音频流和信令的交换，将大大提高应用的稳定性。希望本文对大家在WebRTC开发中有所帮助！