uniapp simple-peer

### 如何在 UniApp 中使用 Simple-Peer 实现 WebRTC 通信 #### 安装依赖库 为了能够在 UniApp 应用程序中利用 Simple-Peer 进行 WebRTC 的开发工作，首先需要安装 simple-peer NPM 包。simple-peer 是一个简化了 WebRTC API 使用体验的 JavaScript 类库[^1]。 ```bash npm install simple-peer ``` #### 初始化 Peer 对象并建立连接 当完成 simple-peer 的安装之后，在页面组件内通过 `import` 导入该模块，并初始化一个新的 peer 实例来准备发起或接受呼叫请求： ```javascript // 在 script 标签内部导入 simple-peer import Peer from 'simple-peer'; export default { data() { return { peer: null, stream: null } }, methods: { initPeer(isInitiator) { this.peer = new Peer({ initiator: isInitiator, trickle: false }); // 处理数据通道打开事件 this.peer.on('signal', (data) => { console.log('Signal:', JSON.stringify(data)); // 发送信号给对方用于建立连接... }); // 当接收到媒体流时触发此回调函数 this.peer.on('stream', function(remoteStream){ let videoElement = document.getElementById('remoteVideo'); if ("srcObject" in videoElement) { videoElement.srcObject = remoteStream; } else { videoElement.src = URL.createObjectURL(remoteStream); } videoElement.play(); }) }, handleCall(signalData) { this.peer.signal(JSON.parse(signalData)); } } } ``` 上述代码片段展示了如何创建一个简单的 peer 并监听其上的重要事件，比如 signal 和 stream。其中 `trickle: false` 参数表示不采用 ICE 转发候选的方式加速连接过程；而是在交换完整的 SDP 描述之前等待所有的网络接口信息收集完毕后再一次性发送出去。 #### 获取本地摄像头权限与访问视频设备 为了让用户能够看到自己的画面以及共享给其他参与者，还需要获取用户的多媒体资源许可并将捕获到的内容附加至 HTML5 `<video>` 元素上显示出来： ```javascript methods: { async getLocalMedia() { try { const constraints = { audio: true, video: true }; this.stream = await navigator.mediaDevices.getUserMedia(constraints); var localVideoElm = document.querySelector('#local-video'); if ('srcObject' in localVideoElm) { localVideoElm.srcObject = this.stream; } else { localVideoElm.src = window.URL.createObjectURL(this.stream); } localVideoElm.play(); // 将获得的 MediaStream 添加到 peer 上作为传输的数据源之一 this.initPeer(true).addStream(this.stream); } catch(err) { alert(`Failed to obtain media device permissions: ${err.message}`); } } } ``` 这段脚本实现了向浏览器申请麦克风和摄像机使用权的功能，并把得到的结果赋值给了实例属性 `this.stream`，随后调用了前面提到过的 `initPeer()` 方法传入当前会话中的音视频轨道对象以便于稍后与其他客户端之间互相传递这些资料。 请注意以上示例仅提供了一个基础框架供开发者参考学习之用，在实际项目里可能还需考虑更多细节方面的问题，例如错误处理机制的设计、跨平台兼容性的优化等。