记录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以后音频就成功推送到服务器了。

相关推荐
达子6668 小时前
第26章_HarmonyOs开发图解之 设备管理
vue.js
自然 醒9 小时前
v-tooltip自定义指令封装
前端·javascript·vue.js
万敏12 小时前
Vue3 全栈实战第四周:watch、nextTick、性能优化与 keep-alive 实战记录
vue.js·node.js·全栈
布兰妮甜13 小时前
Vue 大型页面性能优化:四个核心策略
vue.js·性能优化·虚拟滚动·组件缓存·按需加载
di24k24k13 小时前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui
执子念的飞鱼15 小时前
Vue 3 文件预览落地:鉴权 Blob、Worker/WASM 与内网子路径部署
vue.js·webassembly
无人生还15 小时前
从 Vue3 到 React · 快速上手系列第 11 篇:状态管理
前端·vue.js·react.js
其美杰布-富贵-李16 小时前
Vue 3 模块导入教程:import、export 与文件组织
前端·javascript·vue.js
布兰妮甜17 小时前
Vue 路由进阶:路由守卫权限控制、动态路由、懒加载、路由缓存
vue.js·懒加载·动态路由·路由守卫权限控制·路由缓存
Cobyte17 小时前
Vite & Rollup 插件开发实践
前端·javascript·vue.js