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

相关推荐
~牧马~9 小时前
【记录63】electron打包vue项目之踩坑
vue.js·electron·electron与node兼容
计算机学姐10 小时前
基于SpringBoot的电影点评交流平台【协同过滤推荐算法+数据可视化统计】
java·vue.js·spring boot·spring·信息可视化·echarts·推荐算法
心柠11 小时前
vue3相关知识总结
前端·javascript·vue.js
a11177612 小时前
图书借阅管理系统(FastAPI + Vue)
前端·vue.js·fastapi
极致♀雨12 小时前
vue2+elementUI table表格勾选行冻结/置顶
前端·javascript·vue.js·elementui
林shir12 小时前
3-15-前端Web实战(Vue工程化+ElementPlus)
前端·javascript·vue.js
Hi_kenyon15 小时前
Ref和Reactive都是什么时候使用?
前端·javascript·vue.js
zhougl99617 小时前
Vue 中使用 WebSocket
前端·vue.js·websocket
半梅芒果干17 小时前
vue3 实现无缝循环滚动
前端·javascript·vue.js
雯0609~18 小时前
hiprint-官网vue完整版本+实现客户端配置+可实现直接打印(在html版本增加了条形码、二维码拖拽等)
前端·javascript·vue.js