记录uniapp开发安卓使用webRTC实现语音推送

最近遇到一个需求,需要使用webRTC向监控摄像头发送语音。这个功能很常见,市面上的监控摄像头(比如我家的小米监控)都有这个互相通话的功能。

但是对于要开发这个功能可以说是毫无头绪,网上找了好多也基本上是使用第三方实时通话方案。但是对于监控来说它不适用啊。于是自己慢慢踩坑记录一下从摸索到实现的过程。

首先说结论,如果你是编译APP,是无法传递音频流的。只能获取一段音频文件然后提交给后端。

app向设备发送音频

javascript 复制代码
const recorderManager = uni.getRecorderManager()
// 监听录音开始
recorderManager.onStart(() => {
  console.log('recorder start');
});
recorderManager.onStop((res) => {
  const { tempFilePath } = res;
  console.log('recorder stop', tempFilePath);
  // 处理录音文件 传给后端
});
recorderManager.start({
  format: 'mp3' // 音频格式,有效值 aac/mp3/wav/PCM。App默认值为mp3,小程序默认值aac
});
// 实际需要绑定停止事件,这里模拟结束
setTimeout(() => {
  recorderManager.stop()
}, 1000)

web应用发送音频

如果是web应用则可通过webRTC直接向rtc地址推送一段流实现实时对讲:

  1. 获取用户音频流:
javascript 复制代码
async function start() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
}

这一步用于获取音频流,获取到的stream可以直接用于audio标签播放。

  1. 创建RTCPeerConnection:
javascript 复制代码
const pc = new RTCPeerConnection();
pc.addTrack(stream.getAudioTracks()[0], stream);

创建RTCPeerConnection实例并添加音频流。

  1. 创建Offer并发送到服务端:
javascript 复制代码
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);

// 发送Offer到服务器
const response = await axios.post(rtcUrl, offer.sdp, {
  timeout: 10000, // 设置合理的超时时间
})

//传参形式看实际场景
//const response = await axios.post(rtcUrl, {sdp:offer.sdp}, {
//  timeout: 10000, // 设置合理的超时时间
//})

此处rtcUrl就是的音频推送地址,这里由于后端定是这样定义的,所以直接将获取到的offer.sdp作为参数传递给过去(别忘了引入axios)。

4.处理返回结果

javascript 复制代码
// 处理服务器的Answer
const answer = await response.data;
await pc.setRemoteDescription(new RTCSessionDescription(answer));

//上一步的返回结果
{
  code: 0
  id: "CgAAjB9BH0E=_54"
  sdp:'xxx'
  type: "answer"
}

第三步成功以后接口会返回这样的结果,获取到type:answer和具体的sdp以后音频就成功推送到服务器了。

相关推荐
WYiQIU21 小时前
11月面了7.8家前端岗,兄弟们12月我先躺为敬...
前端·vue.js·react.js·面试·前端框架·飞书
娃哈哈哈哈呀1 天前
formData 传参 如何传数组
前端·javascript·vue.js
513495921 天前
Vite环境变量配置
vue.js
2503_928411561 天前
11.24 Vue-组件2
前端·javascript·vue.js
weixin79893765432...1 天前
Vue + Express + DeepSeek 实现一个简单的对话式 AI 应用
vue.js·人工智能·express
高级程序源1 天前
springboot社区医疗中心预约挂号平台app-计算机毕业设计源码16750
java·vue.js·spring boot·mysql·spring·maven·mybatis
cypking1 天前
Vue 3 + Vite + Router + Pinia + Element Plus + Monorepo + qiankun 构建企业级中后台前端框架
前端·javascript·vue.js
雨雨雨雨雨别下啦1 天前
【从0开始学前端】vue3简介、核心代码、生命周期
前端·vue.js·vue
Dorcas_FE1 天前
【tips】动态el-form-item中校验的注意点
前端·javascript·vue.js
四岁爱上了她1 天前
input输入框焦点的获取和隐藏div,一个自定义的下拉选择
前端·javascript·vue.js