当前位置： 首页 > news >正文

uniapp集成语音识别与图片识别集成方案【百度智能云】

news 2025/10/4 5:14:26

文章目录

  • 前言
  • 第一部分：百度语音识别集成
    • 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 开通图片识别服务

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

  • 通用图像分析
  • 物体识别
  • OCR文字识别
  • 人脸识别

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 Keyconst 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];// 转换图片为Base64this.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-PLUSplatform = 'app';// #endif// #ifdef MP-WEIXINplatform = 'wechat';// #endif// #ifdef H5platform = 'h5';// #endifreturn 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.dtcms.com/a/437959.html

相关文章：

  • SpringCloud API Gateway2.0如何解决docker中应用间IP漂移的正确手法
  • 鸿蒙Next中使用mDNS发现局域网服务：完整指南与实战
  • 长泰建设局网站注册网站多久
  • 孝感网站开发江苏建设服务信息网站
  • 数据分析概述与环境搭建
  • 易语言网站怎么做帕绍网站建设
  • vue3父组件和子组件之间传递数据
  • Coze源码分析-资源库-编辑工作流-前端源码-核心流程/API/总结
  • Netty服务器监听读写超时
  • PHP 中的正则表达式
  • Linux的Socket编程之UDP
  • 环境没有tomcat怎么演示自己做的网站动漫设计专业就业方向
  • 180课时吃透Go语言游戏后端开发7：Go语言中的函数
  • Python核心架构深度解析：从解释器原理到GIL机制全面剖析
  • 数据结构_哈夫曼编码（Huffman）完整指南：从原理到实现，附考研真题详解
  • 怎样做网站吸引客户网站开发专业就业前系军
  • 四川建站模板网站公司有哪些做任务网站
  • 藏语自然语言处理入门 - 5 文本归类
  • Stanford CS336 assignment1 | Transformer Language Model Architecture
  • 告别人工出题！PromptCoT 2.0 让大模型自己造训练难题，7B 模型仅用合成数据碾压人工数据集效果！
  • Prompt Programming - 用文字重构AI智能体系
  • 基于提示学习的多模态情感分析系统：从MULT到PromptModel的华丽升级
  • Node.js 图形渲染库对比：node-canvas 与 @napi-rs/canvas
  • 【LangChain】P10 LangChain 提示词模板深度解析（一）：Prompt Template
  • C# TCP 服务端开发笔记（TcpListener/TcpClient）
  • 180课时吃透Go语言游戏后端开发6：Go语言的循环语句
  • wordpress+vps建站关键词语有哪些
  • 网站建设基本标准野花高清中文免费观看视频
  • hadoop-hdfs
  • VB6.0找不到该引用word,excel“Microsoft Excel 16.0 Object Library”解决方法