uni-app 116发送语音功能

最新推荐文章于 2024-10-09 11:16:25 发布
最新推荐文章于 2024-10-09 11:16:25 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： uni-app 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ab15176142633/article/details/121231418
版权
uni-app 同时被 3 个专栏收录
162 篇文章 16 订阅
订阅专栏
node.js
142 篇文章 4 订阅
订阅专栏
vue
139 篇文章 1 订阅
订阅专栏

/common/free-lib/util.js

import $C from './config.js'
export default {
    // 获取存储列表数据
    getStorage(key){
        let data = null;
		// #ifdef H5
		if($C.env === 'dev'){
		    data = window.sessionStorage.getItem(key)
		} else {
		    data = uni.getStorageSync(key)
		}
		// #endif
        // #ifndef H5
        data = uni.getStorageSync(key)
        // #endif
        return data
    },
    // 设置存储
    setStorage(key,data){
        // #ifdef H5
        if($C.env === 'dev'){
            return window.sessionStorage.setItem(key,data)
        } else {
            return uni.setStorageSync(key,data)
        }
        // #endif
		// #ifndef H5
		return uni.setStorageSync(key,data)
		// #endif
    },
    // 删除存储
    removeStorage(key){
        // #ifdef H5
        if($C.env === 'dev'){
            return window.sessionStorage.removeItem(key);
        } else {
            return uni.removeStorageSync(key)
        }
        // #endif
		// #ifndef H5
		return uni.removeStorageSync(key)
		// #endif
    }
}

/pages/chat/chat/chat.vue

<template>
	<view>

		<!-- 导航栏 -->
		<free-nav-bar :title="detail.name" :noreadnum="totalNoreadnum" showBack>
			<free-icon-button slot="right" 
			:icon="'\ue6fd'"
			@click="openChatSet"></free-icon-button>
		</free-nav-bar>
		
		<!-- 聊天内容区域 -->
		<scroll-view scroll-y class="bg-light position-fixed left-0 right-0 px-3" style="bottom: 105rpx;box-sizing: border-box;" :style="chatBodyBottom" :show-scrollbar="false" :scroll-into-view="scrollIntoView" :scroll-with-animation="true"
		@click="clickPage">
			
			<!-- 聊天信息列表组件 -->
			<view v-for="(item,index) in list" :key="index" 
			:id="'chatItem_'+index">
				<free-chat-item :item="item" :index="index" ref="chatItem"
				:pretime=" index > 0 ? list[index-1].create_time : 0"
				@long="long" @preview="previewImage" 
				:shownickname="currentChatItem.shownickname"
				></free-chat-item>
			</view>
			
		</scroll-view>
		
		<!-- #ifdef APP-PLUS-NVUE -->
		<div v-if="mode === 'action' || mode === 'emoticon'"
		class="position-fixed top-0 right-0 left-0"
		:style="'bottom:'+maskBottom+'px;'"
		@click="clickPage"></div>
		<!-- #endif -->
		
		<!-- 底部输入框 -->
		<view class="position-fixed left-0 right-0 border-top flex align-center" style="background-color: #F7F7F6;height: 105rpx;" 
		:style="'bottom:'+KeyboardHeight+'px;'">
			<free-icon-button v-if="mode === 'audio'"  @click="changeVoiceOrText"><text class="iconfont font-lg">&#xe607;</text></free-icon-button>
			<free-icon-button v-else @click="changeVoiceOrText"><text class="iconfont font-lg">&#xe606;</text></free-icon-button>
			<view class="flex-1">
				<view v-if="mode === 'audio'" class="rounded flex align-center justify-center" style="height: 80rpx;" :class="isRecording?'bg-hover-light':'bg-white'" @touchstart="voiceTouchStart" @touchend="voiceTouchEnd" @touchcancel="voiceTouchCancel" @touchmove="voiceTouchMove">
					<text class="font">{{isRecording ? '松开 结束':'按住 说话'}}</text>
				</view>
				
				<textarea v-else fixed class="bg-white rounded p-2 font-md" style="height: 50rpx;max-width: 450rpx;" :adjust-position="false" v-model="text" @focus="mode = 'text'"/>
			</view>
			<!-- 表情 -->
			<free-icon-button
			@click="openActionOrEmoticon('emoticon')"><text class="iconfont font-lg"
						>&#xe605;</text></free-icon-button>
			<template v-if="text.length === 0">
				<!-- 扩展菜单 -->
				<free-icon-button 
				@click="openActionOrEmoticon('action')"><text class="iconfont font-lg"
						>&#xe603;</text></free-icon-button>
			</template>
			<view v-else class="flex-shrink">
				<!-- 发送按钮 -->
				<free-main-button name="发送" 
				@click="send('text')"></free-main-button>
			</view>
			
		</view>
	
	<!-- 扩展菜单 -->
	<free-popup ref="action" bottom transformOrigin="center bottom" @hide="KeyboardHeight = 0" :mask="false">
		<view style="height: 580rpx;" class="border-top border-light-secondary bg-light">
			<swiper :indicator-dots="emoticonOrActionList.length > 1" style="height: 510rpx;">
				<swiper-item class="row" 
				v-for="(item,index) in emoticonOrActionList"
				:key="index">
					<view class="col-3 flex flex-column align-center justify-center" style="height: 255rpx;" v-for="(item2,index2) in item" :key="index2" @click="actionEvent(item2)">
						<image :src="item2.icon" mode="widthFix"
						style="width: 100rpx;height: 100rpx;"></image>
						<text class="font-sm text-muted mt-2"
						>{{item2.name}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</free-popup>
	
	
	<!-- 弹出层 -->
	<free-popup ref="extend" :bodyWidth="240" :bodyHeight="450" :tabbarHeight="105">
		<view class="flex flex-column" 
		style="width: 240rpx;"
		:style="getMenusStyle">
			<view class="flex-1 flex align-center" 
			hover-class="bg-light"
			v-for="(item,index) in menusList"
			:key="index"
			@click="clickEvent(item.event)">
				<text class="font-md pl-3">{{item.name}}</text>
			</view>
		</view>
	</free-popup>
	
	
	<!-- 录音提示 -->
	<view v-if="isRecording" class="position-fixed top-0 left-0 right-0 flex align-center justify-center" style="bottom: 105rpx;">
		<view style="width: 360rpx;height: 360rpx;background-color: rgba(0,0,0,0.5);" class="rounded flex flex-column align-center justify-center">
			<image src="/static/images/audio/audio/recording.gif" style="width: 150rpx;height: 150rpx;"></image>
			<text class="font text-white mt-3">{{unRecord ? '松开手指，取消发送':'手指上滑，取消发送'}}</text>
		</view>
	</view>
	
	</view>
</template>

<script>
	// #ifdef APP-PLUS-NVUE
	const dom = weex.requireModule('dom')
	// #endif
	
	import freeNavBar from "@/components/free-ui/free-nav-bar.vue"
	import freeIconButton from "@/components/free-ui/free-icon-button.vue"
	import freeChatItem from '@/components/free-ui/free-chat-item.vue';
	import freePopup from "@/components/free-ui/free-popup.vue"
	import freeMainButton from '@/components/free-ui/free-main-button.vue';
	
	
	import { mapState,mapMutations } from 'vuex'
	
	import auth from '@/common/mixin/auth.js';
	import $U from '@/common/free-lib/util.js';
	import $H from '@/common/free-lib/request.js';
	import $C from '@/common/free-lib/config.js';
	export default {
		mixins:[auth],
		components: {
			freeNavBar,
			freeIconButton,
			freeChatItem,
			freePopup,
			freeMainButton
		},
		data() {
			return {
				scrollIntoView:"",
				// 模式 text输入文字，emoticon表情，action操作，audio音频
				mode:"text",
				// 扩展菜单列表
				actionList:[
					[{
						name:"相册",
						icon:"/static/images/extends/pic.png",
						event:"uploadImage"
					},{
						name:"拍摄",
						icon:"/static/images/extends/video.png",
						event:"uploadVideo"
					},{
						name:"收藏",
						icon:"/static/images/extends/shoucan.png",
						event:"openFava"
					},{
						name:"名片",
						icon:"/static/images/extends/man.png",
						event:"sendCard"
					},{
						name:"语音通话",
						icon:"/static/images/extends/phone.png",
						event:""
					},{
						name:"位置",
						icon:"/static/images/extends/path.png",
						event:""
					}]
				],
				emoticonList:[],
				// 键盘高度
				KeyboardHeight:0,
				menusList:[],
				navBarHeight:0,
				list:[],
				// 当前操作的气泡索引
				propIndex:-1,
				// 输入文字
				text:"",
				
				// 音频录制状态
				isRecording:false,
				RecordingStartY:0,
				// 取消录音
				unRecord:false,
				
				detail:{
					id:0,
					name:"",
					avatar:"",
					chat_type:"user"
				}
			}
		},
		mounted() {
			var statusBarHeight = 0
			// #ifdef APP-PLUS-NVUE
			statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.navBarHeight = statusBarHeight + uni.upx2px(90)
			
			// 监听键盘高度变化
			uni.onKeyboardHeightChange(res => {
			  if (this.mode !== 'action' && this.mode !== 'emoticon') {
			  	this.KeyboardHeight = res.height 
			  }
			  if (this.KeyboardHeight > 0) {
			  	this.pageToBottom()
			  }
			})
			
			
			// 注册发送音频事件
			this.regSendVoiceEvent((url)=>{
				if (!this.unRecord) {
					this.send('audio',url,{
						time:this.RecordTime
					})
				}
			})
			
			this.pageToBottom()
		},
		computed: {
			...mapState({
				chatList:state=>state.user.chatList,
				RECORD:state=>state.audio.RECORD,
				RecordTime:state=>state.audio.RecordTime,
				chat:state=>state.user.chat,
				totalNoreadnum:state=>state.user.totalNoreadnum,
				user:state=>state.user.user
			}),
			// 当前会话配置信息
			currentChatItem(){
				let index = this.chatList.findIndex(item=>item.id === this.detail.id && item.chat_type === this.detail.chat_type)
				if(index !== -1){
					return this.chatList[index]
				}
				return {}
			},
			// 获取蒙版的位置
			maskBottom(){
				return this.KeyboardHeight + uni.upx2px(105)
			},
			// 动态获取菜单高度
			getMenusHeight(){
				let H = 100
				return this.menusList.length * H
			},
			// 获取菜单的样式
			getMenusStyle(){
				return `height: ${this.getMenusHeight}rpx;`
			},
			// 判断是否操作本人信息
			isdoSelf(){
				// 获取本人id（假设拿到了）
				let id = 1
				let user_id = this.propIndex > -1 ? this.list[this.propIndex].user_id : 0
				return user_id === id
			},
			// 聊天区域bottom
			chatBodyBottom(){
				return `bottom:${uni.upx2px(105) + this.KeyboardHeight}px;top:${this.navBarHeight}px;`
			},
			// 获取操作或者表情列表
			emoticonOrActionList(){
				return (this.mode === 'emoticon' || this.mode === 'action') ? this[this.mode+'List'] : []
			},
			// 所有信息的图片地址
			imageList(){
				let arr = []
				this.list.forEach((item)=>{
					if (item.type === 'emoticon' || item.type === 'image') {
						arr.push(item.data)
					}
				})
				return arr
			}
		},
		watch: {
			mode(newValue, oldValue) {
				if (newValue !== 'action' && newValue !== 'emoticon') {
					this.$refs.action.hide()
				}
				if (newValue !== 'text') {
					uni.hideKeyboard()
				}
			}
		},
		onLoad(e) {
			if(!e.params){
				return this.backToast()
			}
			this.detail = JSON.parse(decodeURIComponent(e.params))
			console.log(this.detail);
			// 初始化
			this.__init()
			// 创建聊天对象
			this.chat.createChatObject(this.detail)
			// 获取历史记录
			this.list = this.chat.getChatDetail()
			// 监听接收聊天信息
			uni.$on('onMessage',this.onMessage)
			
			uni.$on('updateHistory',this.updateHistory)
			
			// 监听发送收藏和名片
			uni.$on('sendItem',this.onSendItem)
		},
		destroyed() {
			// 销毁聊天对象
			this.chat.destoryChatObject()
			// 销毁监听接收聊天消息
			uni.$off('onMessage',this.onMessage)
			
			uni.$off('updateHistory',this.updateHistory)
			
			uni.$off('sendItem',this.onSendItem)
		},
		methods: {
			...mapMutations(['regSendVoiceEvent']),
			onSendItem(e){
				if(e.sendType === 'fava' || e.sendType === 'card'){
					this.send(e.type,e.data,e.options)
				}
			},
			updateHistory(isclear = true){
				if(isclear){
					this.list = []
				} else {
					this.list = this.chat.getChatDetail()
				}
			},
			onMessage(message){
				console.log('[聊天页] 监听接收聊天信息',message);
				if((message.from_id === this.detail.id && message.chat_type === 'user') || (message.chat_type === 'group' && message.to_id === this.detail.id)){
					if(message.isremove !== 1){
						this.list.push(message)
						// 置于底部
						return this.pageToBottom()
					}
					// 撤回消息
					let index = this.list.findIndex(item=>item.id === message.id)
					if(index !== -1){
						this.list[index].isremove = 1
					}
				}
			},
			__init(){
				var total = 20
				var page = Math.ceil(total/8)
				var arr = []
				for (var i = 0; i < page; i++) {
					var start = i*8
					arr[i] = []
					for (var j = 0; j < 8; j++) {
						var no = start + j
						if ((no+1) > total) {
							continue;
						}
						arr[i].push({
							name:"表情"+no,
							icon: $C.emoticonUrl + no +'.gif',
							event:"sendEmoticon"
						})
					}
				}
				this.emoticonList = arr
				// 初始化会话列表
				this.chat.initChatListItem({
					chat_type:this.detail.chat_type,
					to_id:this.detail.id,
					to_name:this.detail.name,
					to_avatar:this.detail.avatar,
					data:this.detail.chat_type === 'user' ? '你们已经是好友，可以开始聊天了' : '你已经加入群聊，可以开始聊天了'
				})
			},
			// 打开扩展菜单或者表情包
			openActionOrEmoticon(mode = 'action'){
				this.mode = mode
				this.$refs.action.show()
				
				uni.hideKeyboard()
				this.KeyboardHeight = uni.upx2px(580)
			},
			// 发送
			send(type, data = '',options = {}){
				// 组织数据格式
				switch (type){
					case 'text':
					data = data || this.text
						break;
				}
				let message = this.chat.formatSendData({
					type,
					data,
					options
				})
				// 渲染到页面
				let index = this.list.length
				this.list.push(message)
				// 监听上传进度
				let onProgress = false
				if(message.type !== 'text' && message.type !== 'emoticon' && message.type !== 'card' && !message.data.startsWith('http')){
					onProgress = (progress)=>{
						console.log('上传进度：',progress);
					}
				}
				// 发送到服务端
				this.chat.send(message,onProgress).then(res=>{
					console.log(res);
					// 发送成功
					this.list[index].id = res.id
					this.list[index].sendStatus = 'success'
				}).catch(err=>{
					// 发送失败
					this.list[index].sendStatus = 'fail'
					console.log(err);
				})
				// 发送文字成功，清空输入框
				if (type === 'text') {
					this.text = ''
				}
				// 置于底部
				this.pageToBottom()
			},
			// 回到底部
			pageToBottom(){
				// #ifdef APP-PLUS-NVUE
				let chatItem = this.$refs.chatItem
				let lastIndex = chatItem.length > 0 ? chatItem.length - 1 : 0
				if (chatItem[lastIndex]) {
					dom.scrollToElement(chatItem[lastIndex],{})
				}
				// #endif
				// #ifndef APP-NVUE
				setTimeout(()=>{
					let lastIndex = this.list.length - 1
					this.scrollIntoView = 'chatItem_'+lastIndex
				},300)
				// #endif
			},
			// 长按消息气泡
			long({x,y,index}){
				// 初始化 索引
				this.propIndex = index
				// 组装菜单
				let menus = [{ 
					name:"发送给朋友",
					event:'sendToChatItem'
				},{ 
					name:"收藏",
					event:'fava'
				},{ 
					name:"删除",
					event:'delete'
				}]
				let item = this.list[this.propIndex]
				let isSelf = this.user.id === item.from_id
				if(isSelf){
					menus.push({
						name:"撤回",
						event:'removeChatItem'
					})
				}
				// #ifndef H5
				if(item.type === 'text'){
					menus.unshift({
						name:"复制",
						event:'copy',
					})
				}
				// #endif
				this.menusList = menus
				// 显示扩展菜单
				this.$refs.extend.show(x,y)
			},
			// 操作菜单方法分发
			clickEvent(event){
				let item = this.list[this.propIndex]
				let isSelf = this.user.id === item.from_id
				switch (event){
					case 'removeChatItem': // 撤回消息
					// 拿到当前被操作的信息
					this.chat.recall(item).then(res=>{
						item.isremove = 1
					})
						break;
					case 'sendToChatItem':
					uni.navigateTo({
						url: '../chat-list/chat-list?params='+encodeURIComponent(JSON.stringify(item)),
					});
						break;
					case 'copy': // 复制
					uni.setClipboardData({
					    data: item.data,
					    success: ()=> {
							uni.showToast({
								title: '复制成功',
								icon: 'none'
							});
					    }
					});
						break;
					case 'delete':
					uni.showModal({
						content: '是否要删除该记录？',
						success: (res)=> {
							if (!res.confirm) return;
							this.chat.deleteChatDetailItem(item,isSelf)
							this.list.splice(this.propIndex,1)
							// 删除最后一条消息
							if(this.list.length === this.propIndex){
								this.chat.updateChatItem({
									id:this.detail.id,
									chat_type:this.detail.chat_type
								},(v)=>{
									let o = this.list[this.propIndex - 1]
									let data = ''
									if(o){
										data = this.chat.formatChatItemData(o,isSelf)
									}
									v.data = data
									return v
								})
							}
						}
					});
						break;
					case 'fava': // 加入收藏
					uni.showModal({
						content: '是否要加入收藏？',
						success: (res)=> {
							if (res.confirm) {
								$H.post('/fava/create',{
									type:item.type,
									data:item.data,
									options:JSON.stringify(item.options)
								}).then(res=>{
									uni.showToast({
										title: '加入收藏成功',
										icon: 'none'
									});
								})
							}
						}
					});
						break;
				}
				// 关闭菜单
				this.$refs.extend.hide()
			},
			// 扩展菜单
			actionEvent(e){
				switch (e.event){
					case 'uploadImage': // 选择相册
					uni.chooseImage({
						count:9,
						success: (res) => {
							// 发送到服务器
							// 渲染到页面
							res.tempFilePaths.forEach((item)=>{
								this.send('image',item)
							})
						}
					})
						break;
					case 'uploadVideo': // 发送短视频
					uni.chooseVideo({
						maxDuration:10,
						success:(res)=>{
							this.send('video',res.tempFilePath)
							// 渲染页面
							// 发送到服务端（获取视频封面，返回url）
							// 修改本地的发送状态
						}
					})
						break;
					case 'sendEmoticon': // 发送表情包
					this.send('emoticon',e.icon)
						break;
					case 'openFava': // 发送收藏
					uni.navigateTo({
						url: '../../my/fava/fava?type=send',
					});
						break;
					case 'sendCard': // 发送名片
					uni.navigateTo({
						url: '../../mail/mail/mail?type=sendCard&limit=1',
					});
						break;
				}
			},
			// 点击页面
			clickPage(){
				this.mode = ''
			},
			// 预览图片
			previewImage(url){
				uni.previewImage({
					current:url,
					urls:this.imageList,
					indicator:"default"
				})
			},
			// 切换音频录制和文本输入
			changeVoiceOrText(){
				this.mode = this.mode !== 'audio' ? 'audio' : 'text'
			},
			// 录音相关
			// 录音开始
			voiceTouchStart(e){ 
				// 初始化
				this.isRecording = true
				this.RecordingStartY = e.changedTouches[0].screenY
				this.unRecord = false
				// 开始录音
				this.RECORD.start({
					format:"mp3"
				})
			},
			// 录音结束
			voiceTouchEnd(){
				this.isRecording = false
				// 停止录音
				this.RECORD.stop()
			},
			// 录音被打断
			voiceTouchCancel(){
				this.isRecording = false
				this.unRecord = true
				// 停止录音
				this.RECORD.stop()
			},
			voiceTouchMove(e){
				let Y = Math.abs(e.changedTouches[0].screenY - this.RecordingStartY)
				this.unRecord = (Y >= 50)
			},
			// 打开聊天信息设置
			openChatSet(){
				uni.navigateTo({
					url: '../chat-set/chat-set?params='+JSON.stringify({
						id:this.detail.id,
						chat_type:this.detail.chat_type
					}),
				});
			}
		}
	}
</script>

<style>

</style>

如下图是我测试的截图

在这里插入图片描述
感谢大家观看，我们下次见

2019ab
关注
专栏目录
【uni-app】模仿微信实现简易发送/取发语音功能
weixin_43655896的博客
02-15 1万+
记录学习小程序开发聊天应用语音录制功能
uniapp 小程序 语音
John的博客
07-16 796
用的是插件市场的百度语音接口 首先去百度云创建应用链接 记下 这里的 AppID、API Key、Secret Key 下面会用到 打开QS-baiduyy.js文件 按照client_id = API Key & client_secret = secret Key格式 将data替换成你自己的token data: 'grant_type=client_credentials&client_id=你的API Key&client_secret=你的secret Key', 配
uniapp框架-uniapp聊天实例，支持图片，语音，表情-uni-app项目源码-vue语法格式.zip
05-21
UniApp开发前景分析：专业视角引领未来 随着移动互联网的迅猛发展，跨平台应用开发框架UniApp以其独特的优势，展现出广阔的开发前景。 UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和时间。它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和插件生态系统，为开发者提供了丰富的资源和技术支持。从多级选择器到自定义导航栏，再到二维码生成器，UniApp的控件封装合集为开发者提供了极大的便利。 面向未来，UniApp将继续优化性能，拓展功能，满足更多开发者的需求。如果你正在寻找一个高效、便捷的跨平台开发框架，不妨深入了解UniApp，并查看其丰富的资源文件，开启你的跨平台开发之旅。
在uniapp中实现即时通讯中的【发送语音】
最新发布
qq_45569925的博客
10-09 1103
在与好友的对话框中，点击语音图标可以切换到给好友发送语音，长按发送语音的按钮即可开始录音： 如果录制时间小于60s时，松手则表示录音结束并将语音消息发送给对方； 如果录制的时间超过60s则自动结束，并将语音发送给对方； 如果在录制60s之内并且没有松手，而是上滑100像素，则表示取消发送该条语音；
uniapp聊天发送语音样式
Dwayne_dw的博客
08-07 1056
最近开发微信小程序聊天功能，包括了语音消息，通过网上搜索大佬们的解决方案再结合项目环境写了这个组件。主要是css较多，需要用到哪一块的代码自取。仿微信发送语音消息功能。
uniapp+nvue实现仿微信App界面+功能 —— uni-app实现聊天+语音+视频+图片消息
10-19 5152
基于uniapp + nvue实现的uniapp仿微信界面功能聊天应用 txim 实例项目，实现了以下功能。 1: 聊天会话管理 2: 好友列表 3: 文字、语音、视频、表情、位置等聊天消息收发 4: 一对一语音视频在线通话 先放上效果预览 技术实现 开发环境：HbuilderX + nodejs 技术框架：uniapp + vue2.x + node-sass 状态管理：Vuex 自定义组件：ChatLayout、ChatContactItem、ChatInpu
Android-uni-app接入android原生环信客服
08-13
在本文中，我们将深入探讨如何将uni-app与Android原生环信客服系统进行集成，以实现全面的在线客服功能，包括文字、语音、表情、图片、视频和文件的交互。环信客服是一款专业的即时通讯解决方案，它为开发者提供了...
uni-app开发的社交软件
01-20
uni-app可以通过集成WebSocket或者第三方IM服务来实现聊天功能。 - 好友系统：用户可以添加好友，管理自己的好友列表，发送好友请求，处理好友申请。 - 发布动态：用户可以发布文字、图片、视频等内容，与好友分享...
uni-app技术分享| uni-app转小程序_实时音视频
anyRTC的博客
04-07 3266
uniapp转小程序_实时音视频 微信小程序 实现实时音视频与 uniapp 转码成微信小程序 实现实时音视频两者是一样的，区别仅仅是一个是原生小程序一个是 uniapp 转码成小程序 本文使用uniapp转码成小程序实现音视频通话 前提 确保微信开发平台 =》开发 =》开发管理 =》接口设置 的 实时播放音视频流与实时录制音视频流开启 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vvSzutl4-1649304145472)(./3.jpg)] 线上版本配置 an
uni-app聊天页面
04-04
【uni-app聊天页面】是一个基于uni-app框架开发的聊天界面模板，它旨在为开发者提供一个类似于微信聊天体验的用户界面，适用于多种平台，包括iOS、Android以及H5等。uni-app是一个多端开发框架，由DCloud（即海螺...
uni-app：实现长连接语音文件发送
qq_44429079的博客
07-07 1481
uni-app：实现长连接语音文件发送 涉及内容： 音频录制 长连接websocket 音频录制：详情可见https://blog.csdn.net/qq_44429079/article/details/116990979 长连接： 在项目中新建一个uni.socket.js的文件： 代码如下： /* * @Author: UpYou * @Date: 2020-12-25 9:14:50 * @LastEditTime: 2020-12-28 15:41:31 * @Des
uniapp的语音功能
u012834688的博客
07-06 2798
简单的写一下 ，使用的是手机的录音功能，录制成文件之后通过websocket发送到后端的服务上
uniapp实时通信(语音/图片/文字)代码复制即用
m0_60317712的博客
05-10 3451
【代码】uniapp实时通信(语音/图片/文字)
Uniapp小程序实现转发到好友、分享到朋友圈功能
你的阿迁
08-28 1909
接下来我们看下如何去配置这个权限，其实很简单，只要在文件中添加两个生命周期onShareAppMessage和onShareTimeline就可以了，下面看下实现代码...uni小程序中，如果不去配置分享权限的话，默认是不能去分享该小程序到微信好友或者是朋友圈的...这样就成功实现了这个分享功能... 看下成果吧...
uni-app 132发送名片功能（二）
善假于物
12-05 587
/pages/mail/user-base/user-base.vue <template> <view class="page"> <!-- 导航栏 --> <free-nav-bar showBack :showRight="detail.friend" bgColor="bg-white"> <free-icon-button slot="right" v-if="detail.friend"><text class.
uniapp 创建语音消息
m0_60997870的博客
01-27 660
【代码】uniapp 创建语音消息。
uniapp 微信小程序 多人语音
qq_27487739的博客
05-22 1052
在 Uniapp 微信小程序中实现多人语音的功能需要使用微信开发者工具提供的实时音视频（TRTC）组件和环信 IM SDK。需要注意的是，需要在成功连接到环信 IM 服务器后再启动 TRTC。以上是在 Uniapp 微信小程序中实现多人语音的基本流程。按照微信开发者文档注册实时音视频（TRTC）SDK，并获取到 SDKAppID。在需要使用多人语音的页面中引入环信 IM SDK，并在页面加载时初始化。在需要使用多人语音的页面中使用 TRTC 组件。文件中声明需要使用 TRTC 组件。
uniapp 完美解决苹果和安卓 input 框遮挡兼容问题
颜良文丑的博客
04-18 4136
小程序项目用到IM即时通讯功能，苹果和安卓出现input输入框被软键盘遮挡的情况。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

2019ab

你的鼓励就是我的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值