express+vue在线im实现【四】

2024-06-21 16:28

本文主要是介绍express+vue在线im实现【四】,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

往期内容

express+vue在线im实现【一】
express+vue在线im实现【二】
express+vue在线im实现【三】

本期示例

在这里插入图片描述
在这里插入图片描述

本期总结

  • 支持了音频的录制和发送,如果觉得对你有用,还请点个免费的收藏与关注

下期安排

  • 在线语音

具体实现

<template><kl-dialog width="300px" center :header="false" :footer="false" :dialogVisible.sync="visable"><div class="flex-column-wrap p-20 flex-center-wrap pr p-t-40" @click.stop="() => {}"><iclass="f-20 f-600 c-555 cu el-icon-close p-a el-icon-close-1"@click.stop="close"></i><e-image:height="80":lazy="false"src="http://139.9.210.43:5000/netdist/kl1718850348458vjab00h8x4d-1718850348280~1~.png"></e-image><!-- 录制时长 --><div class="m-t-20">录制时长{{ getAudioTime() }}</div><div class="flex-wrap m-t-20"><el-button size="small" type="info" @click.stop="reload">重新录制</el-button><el-button size="small" type="warning" @click.stop="stop">停止</el-button><el-button size="small" type="success" @click.stop="play">播放</el-button><el-button :disabled="audioTime == 0" size="small" type="danger" @click.stop="send">发送</el-button></div></div><!-- 语音播放 --><audioPlayv-model="isShowAudio":url="parseResourceUrl(filePath)"@ended="isShowAudio = false"></audioPlay></kl-dialog>
</template><script>
export default {components: {audioPlay: () => import('@/components/audioPlay/index.vue'),},props: {value: {type: Boolean,default: false,},},data() {return {isShowAudio: false,filePath: '',file: null,mediaRecorder: null,isStart: false,audioTime: 0,timer: null,}},computed: {visable: {get() {return this.value},set() {return this.$emit('input', !this.value)},},},watch: {value(val) {if (val) {// 进入直接开始录音this.init()return}},},beforeDestroy() {this.clearTimer()this.audioTime = 0},methods: {close() {this.filePath = ''this.mediaRecorder = nullthis.file = nullthis.visable = falsethis.clearTimer()this.audioTime = 0},getAudioTime() {return (this.audioTime / 1000).toFixed(2) + 's'},reload() {this.filePath = ''this.mediaRecorder = nullthis.file = nullthis.init()},stop() {this.clearTimer()this.mediaRecorder.stop()},play() {if (!this.filePath) {this.stop()}this.isShowAudio = true},async send() {if (!this.filePath) {this.stop()await this.sleep()}this.commonUploadFile(this.file, 'im', 500).then(({ url = '' }) => {this.$emit('pushInfo', {msg_type: '5',content: url,time: this.audioTime,})this.close()}).catch(() => {})},clearTimer() {clearInterval(this.timer)this.timer = null},init() {if (this.mediaRecorder) returnthis.clearTimer()this.audioTime = 0// 请求麦克风权限navigator.mediaDevices.getUserMedia({ audio: true }).then((stream) => {// 创建MediaRecorder实例const mediaRecorder = new MediaRecorder(stream)// 处理录音数据const recordedChunks = []mediaRecorder.ondataavailable = (event) => {if (event.data.size > 0) {recordedChunks.push(event.data)}}// 停止录音时的处理mediaRecorder.onstop = () => {// 将数据块转换为Blob对象const blob = new Blob(recordedChunks, { type: 'audio/ogg; codecs=opus' })const fileName = 'recordedAudio.ogg'this.file = new File([blob], fileName, {type: 'audio/ogg', // 这里不需要指定codecs,因为Blob已经包含了它})// TODO:还没做this.filePath = this.getObjectURL(this.file)}// 开始录音mediaRecorder.start()this.mediaRecorder = mediaRecorder// 计时器this.timer = setInterval(() => {// 最大60sif (this.audioTime >= 60 * 1000) {this.clearTimer()return}this.audioTime += 50}, 50)}).catch((err) => {console.error('Error accessing the microphone:', err)})},// 获取视频的本地地址getObjectURL(file) {var url = null// 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已if (window.createObjectURL !== undefined) {// basicurl = window.createObjectURL(file)} else if (window.URL !== undefined) {// mozilla(firefox)url = window.URL.createObjectURL(file)} else if (window.webkitURL !== undefined) {// webkit or chromeurl = window.webkitURL.createObjectURL(file)}return url},},
}
</script><style lang="scss" scoped>
.el-icon-close-1 {top: 5px;right: 5px;
}
</style>

这篇关于express+vue在线im实现【四】的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1081724

相关文章

SpringBoot中SM2公钥加密、私钥解密的实现示例详解

《SpringBoot中SM2公钥加密、私钥解密的实现示例详解》本文介绍了如何在SpringBoot项目中实现SM2公钥加密和私钥解密的功能,通过使用Hutool库和BouncyCastle依赖,简化... 目录一、前言1、加密信息(示例)2、加密结果(示例)二、实现代码1、yml文件配置2、创建SM2工具

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

MySQL 定时新增分区的实现示例

《MySQL定时新增分区的实现示例》本文主要介绍了通过存储过程和定时任务实现MySQL分区的自动创建,解决大数据量下手动维护的繁琐问题,具有一定的参考价值,感兴趣的可以了解一下... mysql创建好分区之后,有时候会需要自动创建分区。比如,一些表数据量非常大,有些数据是热点数据,按照日期分区MululbU

MySQL中查找重复值的实现

《MySQL中查找重复值的实现》查找重复值是一项常见需求,比如在数据清理、数据分析、数据质量检查等场景下,我们常常需要找出表中某列或多列的重复值,具有一定的参考价值,感兴趣的可以了解一下... 目录技术背景实现步骤方法一:使用GROUP BY和HAVING子句方法二:仅返回重复值方法三:返回完整记录方法四:

IDEA中新建/切换Git分支的实现步骤

《IDEA中新建/切换Git分支的实现步骤》本文主要介绍了IDEA中新建/切换Git分支的实现步骤,通过菜单创建新分支并选择是否切换,创建后在Git详情或右键Checkout中切换分支,感兴趣的可以了... 前提:项目已被Git托管1、点击上方栏Git->NewBrancjsh...2、输入新的分支的

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》:本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方

使用Python实现可恢复式多线程下载器

《使用Python实现可恢复式多线程下载器》在数字时代,大文件下载已成为日常操作,本文将手把手教你用Python打造专业级下载器,实现断点续传,多线程加速,速度限制等功能,感兴趣的小伙伴可以了解下... 目录一、智能续传:从崩溃边缘抢救进度二、多线程加速:榨干网络带宽三、速度控制:做网络的好邻居四、终端交互

java实现docker镜像上传到harbor仓库的方式

《java实现docker镜像上传到harbor仓库的方式》:本文主要介绍java实现docker镜像上传到harbor仓库的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 前 言2. 编写工具类2.1 引入依赖包2.2 使用当前服务器的docker环境推送镜像2.2

C++20管道运算符的实现示例

《C++20管道运算符的实现示例》本文简要介绍C++20管道运算符的使用与实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录标准库的管道运算符使用自己实现类似的管道运算符我们不打算介绍太多,因为它实际属于c++20最为重要的