深入解析：uniapp集成语音识别与图片识别集成方案【百度智能云】

news/2025/10/4 17:16:00/文章来源:https://www.cnblogs.com/yxysuanfa/p/19125753

文章目录

  • 前言
  • 第一部分：百度语音识别集成
    • 1.1 准备工作
    • 1.2 原生语音识别配置
    • 1.3 语音识别代码实现
    • 1.4 使用第三方插件
  • 第二部分：百度图片识别集成
    • 2.1 开通图片识别服务
    • 2.2 图片识别通用实现方案
    • 2.3 获取Access Token
    • 2.4 特定图片识别功能
  • 第三部分：注意事项与优化建议
    • 3.1 权限配置
    • 3.2 平台兼容性处理
    • 3.3 性能优化建议
  • 第四部分：完整项目结构建议
  • 结语

前言

随着人工智能技术的普及，语音和图像识别已经成为现代应用的常见功能。uniapp作为跨端开发框架，配合百度AI开放平台的能力，可以快速实现这些智能功能。本文将分别介绍语音识别和图片识别的完整集成方案。

在这里插入图片描述

第一部分：百度语音识别集成

1.1 准备工作

️首先需要在百度智能云平台创建应用并开通语音识别服务：

在这里插入图片描述

  1. 访问百度AI开放平台
  2. 注册账号并完成实名认证
  3. 进入控制台，创建新应用
  4. 在应用中开通"语音技术"相关服务
  5. 获取 AppID、API Key 和 Secret Key

1.2 原生语音识别配置

HBuilderX已内置了百度语音识别的支持，配置非常简单：

在这里插入图片描述

在 manifest.json 文件中进行如下配置：

{
"app-plus": {
"modules": {
"Speech": {
"baidu": {
"appid": "你的百度AppID",
"apikey": "你的API Key",
"secretkey": "你的Secret Key"
}
}
}
}
}

注意：讯飞语音识别和百度语音识别只能二选一，不能同时配置。

1.3 语音识别代码实现

使用语音功能基本流程：

向三方语音识别平台申请开通，申请成功后会获取 AppId、API Key、Secret Key等参数
在HBuilderX中配置申请的参数（如AppId等），提交云端打包生成自定义基座
在App项目中调用API进行语音识别操作

✅使用默认语音识别界面

var options = {
engine: 'baidu'
};
text.value = '';
console.log('开始语音识别：');
plus.speech.startRecognize(options, function(s){
console.log(s);
text.value += s;
}, function(e){
console.log('语音识别失败：'+JSON.stringify(e));
} );

✅自定义语音识别界面

<template><view class="content"><textarea class="result" placeholder="语音识别内容" :value="result"></textarea><view class="recogniz"><view style="color: #0000CC;"><text>{{title}}</text></view><view class="partial"><text>{{partialResult}}</text></view><view class="volume" :style="{width:valueWidth}"></view></view><button type="default" @touchstart="startRecognize" @touchend="endRecognize">按下开始&amp;松开结束</button></view>
</template>
<script>export default {data() {return {title: '未开始',text: '',partialResult: '...',result: '',valueWidth: '0px'}},onLoad() {// #ifdef APP-PLUS// 监听语音识别事件plus.speech.addEventListener('start', this.ontStart, false);plus.speech.addEventListener('volumeChange', this.onVolumeChange, false);plus.speech.addEventListener('recognizing', this.onRecognizing, false);plus.speech.addEventListener('recognition', this.onRecognition, false);plus.speech.addEventListener('end', this.onEnd, false);// #endif},methods: {ontStart() {this.title = '...倾听中...';this.text = '';console.log('Event: start');},onVolumeChange(e) {this.valueWidth = 100*e.volume+'px';console.log('Event: volumeChange '+this.valueWidth);},onRecognizing(e) {this.partialResult = e.partialResult;console.log('Event: recognizing');},onRecognition(e) {this.text += e.result;this.text?(this.text+='\n'):this.text='';this.result = this.text;this.partialResult = e.result;console.log('Event: recognition');},onEnd() {if(!this.text||this.text==''){plus.nativeUI.toast('没有识别到内容');}this.result = this.text;this.title = '未开始';this.valueWidth = '0px';this.partialResult = '...';},startRecognize() {console.log('startRecognize');// #ifdef APP-PLUSplus.speech.startRecognize({engine: 'baidu',lang: 'zh-cn','userInterface': false,'continue': true});// #endif},endRecognize() {console.log('endRecognize');// #ifdef APP-PLUSplus.speech.stopRecognize();// #endif}}}
</script>
<style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;}.recogniz {width: 200px;height: 100px;padding: 12px;margin: 50px auto;background-color: rgba(0,0,0,0.5);border-radius: 16px;text-align: center;}.partial {width: 100%;height: 40px;margin-top: 16px;font-size: 12px;color: #FFFFFF;}.volume {width: 10px;height: 6px;border-style:solid;display:inline-block;box-sizing:border-box;border-width:1px;border-color:#CCCCCC;border-radius: 50%;background-color: #00CC00;}.result {color: #CCCCCC;border: #00CCCC 1px solid;margin: 25px auto;padding: 6px;width: 80%;height: 100px;}
</style>

1.4 使用第三方插件

除了原生支持，也可以使用第三方插件实现语音识别：

安装百度语音识别插件：

npm i uni-baidu-voice-recognition

在页面中使用：

import voiceRecog from 'uni-baidu-voice-recognition'
export default {
methods: {
startRecognize() {
voiceRecog.start({})
.then(res => {
console.log('语音识别结果：', res.result)
})
.catch(err => {
console.log('语音识别失败：', err)
})
},
stopRecognize() {
voiceRecog.stop({})
}
}
}

第二部分：百度图片识别集成

2.1 开通图片识别服务

在百度智能云控制台中，为你的应用开通以下服务（根据需求选择）：

2.2 图片识别通用实现方案

以下是一个通用的图片识别示例，支持拍照和相册选择：

<template><view class="container"><view class="button-container"><button class="button" @click="takePhoto">拍照</button><button class="button" @click="chooseImage">从相册选择</button></view><view class="image-container"><image v-if="imageUrl" :src="imageUrl" mode="aspectFit"></image></view><button class="identify-button" @click="identifyImage" :disabled="!imageUrl">识别图片</button><view class="result"><text v-for="(item, index) in results" :key="index">{{ item.name }}: {{ (item.score * 100).toFixed(2) }}%</text></view></view>
</template>
<script>export default {data() {return {imageUrl: '',base64Data: '',results: [],accessToken: '你的Access Token' // 需要先获取}},methods: {// 选择图片chooseImage() {uni.chooseImage({count: 1,sourceType: ['album'],success: res => {this.imageUrl = res.tempFilePaths[0];this.pathToBase64(res.tempFilePaths[0]);}});},// 拍照takePhoto() {uni.chooseImage({count: 1,sourceType: ['camera'],success: res => {this.imageUrl = res.tempFilePaths[0];this.pathToBase64(res.tempFilePaths[0]);}});},// 图片转Base64pathToBase64(filePath) {// 可使用 image-tools 插件uni.getFileSystemManager().readFile({filePath: filePath,encoding: 'base64',success: res => {// 去掉base64头部:cite[2]this.base64Data = res.data.replace(/^data:image\/\w+;base64,/, "");}});},// 调用百度AI识别图片identifyImage() {uni.showLoading({title: '识别中...'});// 以通用物体识别为例const url = `https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token=${this.accessToken}`;uni.request({url: url,method: 'POST',data: {image: this.base64Data},header: {'Content-Type': 'application/x-www-form-urlencoded'},success: res => {uni.hideLoading();if (res.data.error_code) {uni.showToast({title: '识别失败',icon: 'none'});return;}this.results = res.data.result;},fail: err => {uni.hideLoading();uni.showToast({title: '请求失败',icon: 'none'});}});}},mounted() {// 应用启动时获取Access Tokenthis.getAccessToken();}}
</script>

2.3 获取Access Token

Access Token 需要通过 API Key 和 Secret Key 获取：

// 获取百度AI访问令牌
getAccessToken() {
// 注意：此方法应在服务器端实现，避免泄露API Key和Secret Key
const apiKey = '你的API Key';
const secretKey = '你的Secret Key';
const authUrl = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${apiKey}&client_secret=${secretKey}`;
uni.request({
url: authUrl,
method: 'GET',
success: (res) => {
if (res.data.access_token) {
this.accessToken = res.data.access_token;
}
}
});
}

重要提示：在实际项目中，获取 Access Token 的逻辑应该在服务器端实现，避免将 API Key 和 Secret Key 暴露在客户端代码中。

2.4 特定图片识别功能

✅身份证识别

// 身份证识别
idCardRecognition() {
uni.chooseImage({
count: 1,
success: (res) => {
const filePath = res.tempFilePaths[0];
// 转换图片为Base64
this.pathToBase64(filePath, (base64) => {
const url = `https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=${this.accessToken}`;
uni.request({
url: url,
method: 'POST',
data: {
image: base64,
id_card_side: 'front' // front:正面 back:反面
},
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
success: (res) => {
console.log('身份证识别结果:', res.data);
// 处理识别结果
if (res.data.words_result) {
const result = res.data.words_result;
// 提取姓名、性别、民族、出生、地址、身份证号等信息
}
}
});
});
}
});
}

✅人脸识别

// 人脸检测
faceDetection(imageBase64) {
const url = `https://aip.baidubce.com/rest/2.0/face/v3/detect?access_token=${this.accessToken}`;
uni.request({
url: url,
method: 'POST',
data: {
image: imageBase64,
image_type: 'BASE64',
face_field: 'age,beauty,expression,gender,glasses'
},
header: {
'Content-Type': 'application/json'
},
success: (res) => {
console.log('人脸检测结果:', res.data);
if (res.data.result) {
const faceResult = res.data.result;
// 处理人脸检测结果
}
}
});
}

第三部分：注意事项与优化建议

3.1 权限配置

在 manifest.json 中确保配置了必要的权限：

{
"app-plus": {
"distribute": {
"android": {
"permissions": [
"<uses-permission android:name=\"android.permission.RECORD_AUDIO\" />",
"<uses-permission android:name=\"android.permission.CAMERA\" />",
"<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" />",
"<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\" />"
]
}
}
}
}

3.2 平台兼容性处理

不同平台可能有不同的限制，需要进行兼容处理：

// 检查平台
getPlatform() {
let platform = '';
// #ifdef APP-PLUS
platform = 'app';
// #endif
// #ifdef MP-WEIXIN
platform = 'wechat';
// #endif
// #ifdef H5
platform = 'h5';
// #endif
return platform;
}

3.3 性能优化建议

  • 图片压缩：上传前对图片进行适当压缩，减少网络传输时间
  • 语音分段：长语音可以考虑分段识别，提高准确率
  • 缓存Token：Access Token有效期为30天，可缓存避免频繁获取
  • 错误处理：完善的错误处理机制，提高用户体验

第四部分：完整项目结构建议

project/
├── src/
│   ├── components/
│   ├── pages/
│   │   ├── voice/
│   │   │   └── index.vue
│   │   ├── image/
│   │   │   └── index.vue
│   ├── utils/
│   │   ├── baidu-ai.js
│   │   └── common.js
│   ├── static/
│   └── manifest.json

结语

通过本文的介绍，相信你已经掌握了在 uniapp 中集成百度语音识别和图片识别的方法。百度AI开放平台提供了丰富的API，除了本文介绍的功能外，还有更多能力等待你的探索。

在实际项目中，记得遵循最佳实践，保护敏感信息，优化用户体验，让你的应用更加智能和强大。

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

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

相关文章

sql注入和xss漏洞

sql注入和xss漏洞

1、复习信息搜集中的Google hack语法，随机找10个php网站的后台地址 2、简述sql注入漏洞的原理及危害 原理:由于后端程序员未对用户输入的字符进行严格控制和过滤，导致黑客可以在后台程序员不知情的情况下注入SQL语法…
阅读更多...
威海建设局官方网站长沙室内设计工作室

威海建设局官方网站长沙室内设计工作室

加载指定会话最近消息 前言 上一集我们就把三个标签页的加载列表的任务给完成啦&#xff01;那么我们这一集就来完成加载指定绘画最近消息的任务。 需求分析 我们点击了某个会话之后&#xff0c;我们就会去显示我们的会话的最近的N条消息。请看下图。 我们这里涉及到两个区…
阅读更多...
大连企业网站建设模板wordpress 设置语言

大连企业网站建设模板wordpress 设置语言

http://www.elecfans.com/article/89/92/2017/20170425510728.html转载于:https://www.cnblogs.com/jackn-crazy/p/7300228.html
阅读更多...
数学 trick

数学 trick

基本不等式遇到 \(x=\dfrac{一次函数}{一次函数}\)，考虑分离出一个常数： 例：（2024 浙江模拟）已知实数 \(x,y,x>3,xy+2x-3y=12,(x+y)_{\min}\)？ 解：考虑分离 \(x,y\)，由 \(xy+2x-3y=12\) 得到 \(x=\dfrac{12…
阅读更多...
免费网站下载app软件免费重庆seo优

免费网站下载app软件免费重庆seo优

本文来自网易云社区作者&#xff1a;田亚楠须知本文主要是根据 createjs 中的 EaselJS 在 github 上的 tutorials 目录下的文章整理而来 &#xff08;原文链接&#xff09;&#xff0c;同时也包含了很多本人的理解&#xff0c;如过有叙述不当的地方&#xff0c;请联系我 :-D 本…
阅读更多...
Python 2025：异步革命与AI驱动下的开发新范式 - 详解

Python 2025：异步革命与AI驱动下的开发新范式 - 详解

Python 2025：异步革命与AI驱动下的开发新范式 - 详解2025-10-04 16:56 tlnshuju 阅读(0) 评论(0) 收藏 举报pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; di…
阅读更多...
完整教程：精读C++20设计模式——行为型设计模式：解释器模式

完整教程：精读C++20设计模式——行为型设计模式：解释器模式

完整教程：精读C++20设计模式——行为型设计模式：解释器模式pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Cons…
阅读更多...
js疑惑

js疑惑

textBox.addEventListener("keydown", function (event) { console.log(`You pressed "${event.key}".`);});这个函数接收的"keydown",到底是什么意思我还是没看懂为什么会这样写看着也…
阅读更多...
使用 Git Submodule 管理微服务项目：从繁琐到高效 - 指南

使用 Git Submodule 管理微服务项目：从繁琐到高效 - 指南

使用 Git Submodule 管理微服务项目：从繁琐到高效 - 指南pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consola…
阅读更多...
如何识别网页用什么网站做的女装关键词排名

如何识别网页用什么网站做的女装关键词排名

一个网站&#xff0c;其实说白了就是某几个特定功能的组合&#xff0c;而更换用户头像就在这些功能之中。今天就来做个测试&#xff0c;针对不同的用户&#xff0c;实现头像上传功能。先给大家展示下成品效果图&#xff1a;思路针对不同的用户上传头像&#xff0c;我们要为每一…
阅读更多...
邯郸专业做网站多少钱做印刷网站公司哪家好

邯郸专业做网站多少钱做印刷网站公司哪家好

一、接口自动化测试中&#xff0c;会用到测试账号&#xff0c;如何合理运用账号&#xff1f; 账号一般用于接口登录、接口用例传参、操作sql等&#xff0c;目前账号是写到yaml配置文件里&#xff0c;如果1个账户使用会出现资源冲突&#xff0c;可以配置多个账号使用&#xff0…
阅读更多...
佛山专业建设网站平台兼职python做网站

佛山专业建设网站平台兼职python做网站

STM32定时器定时及其应用 定时器概述☆定时器相关配置CubeMX工程配置及程序实现固件库程序设计及实现 定时器概述 1. 工作原理 使用精准的时基&#xff0c;通过硬件的方式&#xff0c;实现定时功能。定时器核心就是计数器 2. 定时器分类 　　基本定时器&#xff08;TIM6~TIM7…
阅读更多...
深入解析：单元测试学习+AI辅助单测

深入解析：单元测试学习+AI辅助单测

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …
阅读更多...
20251004国庆模拟4

20251004国庆模拟4

对于 20251004 CSP-S 模拟的总结Part 1 题目 点击快速下载 有两道是洛谷的： T2: P5979 [PA2014] Druzyny T3: P2371 [国家集训队] 墨墨的等式 ⚠警告： P5979 和本场的 T3 并不完全一样。 Part 2 考试重要时间线 8:00…
阅读更多...
珂朵莉树 ODT

珂朵莉树 ODT

能干什么/局限性 高效处理区间平推（区间赋值）的问题。 在随机数据下飞快。 如果没有区间平推，或者区间平推的操作数量可以被卡得很少甚至没有，就不适用。 前置知识set没了。 建点 每个点要维护一个区间，以及这个区…
阅读更多...
2025多校CSP模拟赛2

2025多校CSP模拟赛2

2025多校CSP模拟赛2 狂写大树套树通过 \(T3\) 的救赎感。 T1 查询 第一眼感觉不好做。 首先直接找绝对没前途，考虑二分 \(v\)。 问题变成了统计 \(a_j+b_j\times c_i\le v\) 的数量，变换一下变成： \[c_i\le \frac{v…
阅读更多...
网站查询访问界面设计模式读后感

网站查询访问界面设计模式读后感

如今人们对于住宅需求早已今非昔比&#xff0c;不但需要足够大的空间&#xff0c;而且对于住宅所处位置是否交通便利&#xff0c;环境如何&#xff0c;光照情况都有要求&#xff0c;但是最关注的问题还是住宅的安全问题。如今的社会科技发达&#xff0c;不法分子的手段也层出不…
阅读更多...
io多路复用：reactor模型的封装及与上层简单业务的搭建（webserver）

io多路复用：reactor模型的封装及与上层简单业务的搭建（webserver）

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …
阅读更多...
详细介绍：深入了解linux网络—— 基于UDP实现翻译和聊天功能

详细介绍：深入了解linux网络—— 基于UDP实现翻译和聊天功能

详细介绍：深入了解linux网络—— 基于UDP实现翻译和聊天功能pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Cons…
阅读更多...
详细介绍：vLLM - GPUModelRunner

详细介绍：vLLM - GPUModelRunner

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …
阅读更多...
最新文章

Copyright @ 2022~2023