webscoket+webrtc实现语音通话

1.项目方案

前端采用webrtc创建音频上下文,后创建音频源输入音频处理器,连接音频输入与处理器,处理器再连接到音频输出(扬声器),再通过事件获取音频数据,把音频数据转换成字节数据通过webscoket发送给后端。

注意

1.前端使用的创建音频源api createScriptProcessor  onaudioprocess  已经开始废弃使用,但是浏览器依然适配。

2.因为前端使用websocket实时传输录音数据,后端开发需要多线程接受处理数据,给每个数据包提供index坐标,然后处理后保存,再通过单线程发送,可以降低延迟

2.前端代码

// AudioManager.js
export default class AudioManager {/*** 构造函数* @param {string} url - WebSocket服务器的地址* @param {function} onMessageCallback - 当WebSocket接收到消息时的回调函数*/constructor(url, onMessageCallback) {this.url = url; // WebSocket服务器的完整URLthis.websocket = null; // WebSocket连接实例this.audioContext = null; // 音频上下文this.audioStream = null; // 流媒体对象this.audioProcessor = null; // 音频处理器this.onMessageCallback = onMessageCallback; // WebSocket消息的回调函数}/*** 初始化WebSocket连接并设置消息监听器*/initWs() {console.log(this.url,';this.url');// 创建WebSocket实例this.websocket = new WebSocket(this.url);// 设置WebSocket接收消息时的回调函数this.websocket.onmessage = (e) => {if (this.onMessageCallback) {// 调用通过构造函数传入的回调函数处理接收到的消息this.onMessageCallback(e.data);}};// 请求用户的麦克风权限并开始处理音频流this.queryHttp();}/*** 停止录音并关闭所有资源*/stopRecording() {// 关闭所有音频轨道if (this.audioStream) {this.audioStream.getTracks().forEach((track) => track.stop());}// 断开音频处理器的连接if (this.audioProcessor) {this.audioProcessor.disconnect();}// 关闭音频上下文if (this.audioContext) {this.audioContext.close();}// 关闭WebSocket连接if (this.websocket) {this.websocket.close();}}/*** 请求麦克风资源,并在成功后处理音频流*/queryHttp() {navigator.mediaDevices.getUserMedia({audio: {echoCancellation: true, // 开启回声消除noiseSuppression: true, // 开启噪声抑制autoGainControl: true, // 开启自动增益控制},}).then((stream) => {// 处理成功获取的音频流this.handleStream(stream);}).catch((error) => {// 处理获取音频流失败的情况console.error("Error accessing microphone:", error);});}/*** 处理音频流,连接音频输入和处理器,并设置音频处理事件* @param {MediaStream} stream - 从麦克风获取的音频流*/handleStream(stream) {this.audioContext = new AudioContext({sampleRate: 16000, // 设置采样率latencyHint: "interactive", // 延迟模式为交互式channels: 1, // 单声道frameRate: 60, // 帧率sampleType: "int16", // 采样类型numberOfOutputs: 1, // 输出数量});// 创建音频源输入let audioInput = this.audioContext.createMediaStreamSource(stream);// 创建音频处理器this.audioProcessor = this.audioContext.createScriptProcessor(4096, 1, 1);// 设置音频处理事件this.audioProcessor.onaudioprocess = (event) => {// 获取音频数据const inputData = event.inputBuffer.getChannelData(0);// 转换音频数据为字节数据const byteData = this.convertToByteData(inputData);// 通过WebSocket发送字节数据this.websocket.send(byteData);};// 连接音频输入与处理器,处理器再连接到音频输出(扬声器)audioInput.connect(this.audioProcessor);this.audioProcessor.connect(this.audioContext.destination);// 保存音频流引用this.audioStream = stream;}/*** 将浮点数组的音频数据转换为字节数据* @param {Float32Array} inputData - 浮点数组格式的原始音频数据* @return {Uint8Array} 字节数据*/convertToByteData(inputData) {// 创建Int16Array,由于原始的音频数据是Float32Array类型,需要转换const intData = new Int16Array(inputData.map((item) => item * 32767));// 创建Uint8Array来保存字节数据const byteData = new Uint8Array(intData.length * 2);// 将Int16Array的数据转换为字节数据并填充到Uint8ArrayintData.forEach((value, index) => {byteData[index * 2] = value & 0xff; // 存储低位字节byteData[index * 2 + 1] = (value >> 8) & 0xff; // 存储高位字节});return byteData;}
}/*使用方法
<template><audio style="display: none" ref="audio" controls="controls" autoplay><source :src="audioUrl" type="audio/wav" /></audio>
</template><script>
import AudioManager from './AudioManager.js';export default {data() {return {audioManager: null,};},methods: {handleWsMessage(data) {let message = JSON.parse(data);this.$refs.audio.src = message.url; },startRecording() {this.audioManager = new AudioManager('your-server-url',this.handleWsMessage // 回调函数用于接受通话后获取的信息这里我用于播放接受的音频);this.audioManager.initWs();},},
};
</script> */

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/5903.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Docker学习】docker start深入研究

docker start也是很简单的命令。但因为有了几个选项&#xff0c;又变得复杂&#xff0c;而且... 命令&#xff1a; docker container start 描述&#xff1a; 启动一个或多个已停止的容器。 用法&#xff1a; docker container start [OPTIONS] CONTAINER [CONTAINER...] 别名&…

【网络编程】网络基础

TCP/IP五层模型 物理层&#xff1a;负责光/电信号的传递方式. 比如现在以太网通用的网线&#xff08;双绞线&#xff09;、早期以太网采用的的同轴电缆&#xff08;现在主要用于有线电视&#xff09;、光纤&#xff0c;现在的 WIFI无线网使用电磁波等都属于物理层的概念。物理层…

搭建AI大模型步骤

搭建AI大模型需要以下步骤&#xff1a; 数据收集和预处理&#xff1a;收集大量的训练数据&#xff0c;并进行清洗、标注和预处理&#xff0c;使其适合模型训练。 模型选择&#xff1a;根据具体的任务需求&#xff0c;选择适合的深度学习模型&#xff0c;如卷积神经网络&#x…

QtConcurrent::run操作界面ui的注意事项

先说结论&#xff1a;QtConcurrent::run启动的耗时处理函数&#xff0c;不允许处理ui界面对象&#xff0c;如控件&#xff0c;如进度条等等&#xff01; QtConcurrent::run非常好用&#xff0c;胜过QThead的两种方式&#xff08;run和moveToThread&#xff09;&#xff0c;例如…

使用 uni-app 开发 iOS 应用的操作步骤

哈喽呀&#xff0c;大家好呀&#xff0c;淼淼又来和大家见面啦&#xff0c;上一期和大家一起探讨了使用uniapp开发iOS应用的优势及劣势之后有许多小伙伴想要尝试使用uniapp开发iOS应用&#xff0c;但是却不懂如何使用uniapp开发iOS应用&#xff0c;所以这一期淼淼就来给你们分享…

数据结构复习指导之数组和特殊矩阵

文章目录 数组和特殊矩阵 考纲内容 复习提示 前言 1.数组的定义 2.数组的存储结构 3.特殊矩阵的压缩存储 3.1对称矩阵 3.2三角矩阵 3.3三对角矩阵 4.稀疏矩阵 5.知识回顾 数组和特殊矩阵 考纲内容 &#xff08;一&#xff09;栈和队列的基本概念 &#xff08;二&a…

【C++】:const成员,取地址及const取地址操作符重载

目录 一&#xff0c;const成员二&#xff0c;取地址及const取地址操作符重载 一&#xff0c;const成员 将const修饰的“成员函数”称之为const成员函数&#xff0c;const修饰类成员函数&#xff0c;实际修饰该成员函数隐含的this指针&#xff0c;表明在该成员函数中不能对类的…

百度竞价开户详解:步骤、优势与注意事项

随着互联网的普及&#xff0c;网络营销已成为企业不可或缺的一部分。其中&#xff0c;百度竞价作为一种高效的网络推广方式&#xff0c;受到了越来越多企业的青睐。本文将详细介绍百度竞价开户的流程、优势以及注意事项&#xff0c;帮助企业更好地利用这一工具提升品牌知名度和…

UnityWebGL获取话筒实时数据

看了木子李大佬的数字人https://digital.lkz.fit/之后&#xff0c;我也想搞一个&#xff0c;于是开始研究起来&#xff0c;先从WebGL录音开始&#xff0c;一共试了三个插件&#xff0c;个个都有问题…… 1、UnityWebGLMicrophone 用起来没啥问题&#xff0c;但是只能录音&#…

数据结构的队列(c语言版)

一.队列的概念 1.队列的定义 队列是一种常见的数据结构&#xff0c;它遵循先进先出的原则。类似于现实生活中排队的场景&#xff0c;最先进入队列的元素首先被处理&#xff0c;而最后进入队列的元素则要等到前面的元素都被处理完后才能被处理。 在队列中&#xff0c;元素只能…

《恶意不息》是一款什么样的游戏,苹果电脑怎么玩《恶意不息》恶意不息游戏内怎么存档 mac电脑玩游戏

近日steam游戏商城新上架了一款名叫《恶意不息》的游戏十分火爆&#xff0c;那么《恶意不息》是一款什么样的游戏&#xff0c;苹果电脑怎么玩《恶意不息》&#xff1f;一起来看看吧&#xff01; 一、《恶意不息》是一款什么样的游戏&#xff1f; Private Division&#xff0c;…

【蓝桥杯嵌入式】第七届省赛 - 模拟液位检测告警系统

代码开源&#xff0c;Gitee自取 代码开源&#xff0c;Gitee自取 代码开源&#xff0c;Gitee自取 目录 0 前言 1 展示 1.1 源码 1.2 演示视频 1.3 题目展示 2 工程配置 3 资源配置&代码实现 3.1 定时器 3.2 液位检测 3.3 液位阈值设定 3.4 液位阈值设定 3.5 串…

BST二叉搜索树

概念 二叉搜索树&#xff08;Binary Search Tree&#xff0c;简称BST&#xff09;&#xff0c;又称为二叉排序树或二叉查找树&#xff0c;是一种特殊的二叉树数据结构。它具有以下基本性质&#xff1a; 节点的值的有序性&#xff1a;对于BST中的任意一个节点&#xff0c;其左…

Angular基础-搭建Angular运行环境

这篇文章介绍了在Angular项目中进行开发环境搭建的关键步骤。包括node.js安装和配置、安装Angular CLI工具、安装angular-router、创建Angular项目等步骤。这篇文章为读者提供了清晰的指南&#xff0c;帮助他们快速搭建Angular开发环境&#xff0c;为后续的项目开发奠定基础。 …

【Debug】TensorRT报错汇总

搭建TensorRT过程参见&#xff1a;【通俗易懂】Windows系统安装TensorRT 下面是运行中的问题汇总及解决。 报错1. No module named ‘pycuda’ 解决&#xff1a; pip install pycuda报错2. AttributeError: ‘tensorrt.tensorrt.Builder’ object has no attribute ‘max_wor…

在ubuntu 24.04 上安装vmware workstation 17.5.1

ubuntu安装在新组装的i9 14900机器上&#xff0c;用来学习笨叔的ARM64体系结构编程&#xff0c;也熟悉Linux的用法。但有时候写文档总是不方便&#xff0c;还是需要window来用。因此想在ubuntu 24.04上安装Linux版本的vmware worksation 17.5.1以虚拟机的方式安装windows 11。其…

Scala 第三篇 OOP篇

Scala 第三篇 OOP篇 上接&#xff1a;Scala 第二篇 算子篇 前序一、类 1、修饰符2、创建类示例3、类的继承 二、抽象类三、单例对象四、特质 1、动态混入2、抽象类 VS 特质 五、内部类六、样例类七、枚举八、泛型九、隐式类十、包与包对象练习 前序 1、Scala 为纯粹OOP 1.1、…

信息技术内涵及意义

一、信息技术及其演进趋势 &#xff08;一&#xff09;信息技术概况概念 信息技术&#xff08;Information Technology&#xff0c;IT&#xff09;指“应用在信息加工和处理中的科学、技术与工程的训练方法与管理技巧&#xff1b;上述方法和技巧的应用&#xff1b;计算机及其…

C#面试题目含参考答案(二)

前言 面试是应聘一个工作岗位的环节&#xff0c;来考察一个人的工作能力与综合素质。在应聘C#程序员或与C#相关岗位时&#xff0c;我们都会被问到一些与.NET、C#、数据库、业务知识或编程思想等问题。 题目 31、值类型和引用类型的区别 参考答案&#xff1a; 1、值类型的数…

JavaScript+B/S版云LIS系统源码ASP.NET CORE 3.1 MVC云LIS系统如何实现样本追踪的预警功能?医院云LIS检验系统源码

JavaScriptB/S版云LIS系统源码ASP.NET CORE 3.1 MVC云LIS系统如何实现样本追踪的预警功能&#xff1f;医院云LIS检验系统源码 实验室信息管理系统&#xff08;Trasen Laboratory Information Management System&#xff09;是一套专业的医疗实验室信息管理软件&#xff0c;包含…