flask 后端 + 微信小程序和网页两种前端：调用硬件(相机和录音)和上传至服务器

选择 flask 作为后端，因为后续还需要深度学习模型，python 语言最适配；而 flask 框架轻、学习成本低，所以选 flask 作为后端框架。

微信小程序封装了调用手机硬件的 api，通过它来调用手机的摄像头、录音机，非常方便。

网页端使用 JavaScript 调用则困难一些，走了很多弯路，在这里记录下来。

前提：已经配置好 python 环境、安装了 flask；

flask 端

flask 的任务是收取前端传来的文件，保存在本地。

from flask import Flask, request, jsonify, render_template
app = Flask(__name__)
app.config.from_object(__name__)
app.config["JSON_AS_ASCII"] = False  # 防止中文乱码
app.json.ensure_ascii = False  # 防止中文乱码
# 设置上传文件夹
app.config['UPLOAD_FOLDER'] = r'D:\A_data_trans\test（改成你的位置）'@app.route('/vqa', methods=['POST'])
def app_vqa():# 保存图片img_file = request.files['img']  # 这里规定了前端传图片过来的时候，用的关键字是 'img'，别的，比如 'image' 就会拿不到if img_file.filename == '':return jsonify({'error': 'No image'}), 400try:image_path = os.path.join(app.config['UPLOAD_FOLDER'], img_file.filename)img_file.save(image_path)log(f"save image: {image_path}")except Exception as e:return jsonify({'error': str(e)}), 500# 传过来的就是文本question = request.form['question']  # 前端传来的文本信息都是放在 form 中的# 预测答案try:answer = vqa(image_path, question)return jsonify(answer)except Exception as e:return jsonify({'error': str(e)}), 500# 接收文件的代码，其实和上面长得一样，略微有一 miu miu 区别
@app.route('/upload', methods=['POST'])
def app_upload_file():# 保存图片img_file = request.files['img']if img_file.filename == '':return jsonify({'error': 'No image'}), 400try:image_path = os.path.join(app.config['UPLOAD_FOLDER'], img_file.filename)img_file.save(image_path)shutil.copy(image_path, os.path.join(os.path.dirname(__file__), 'static/show.jpg'))  # 用于展示在网页上log(f"save image: {image_path}")except Exception as e:return jsonify({'error': str(e)}), 500try:# 传过来的就是文本question = request.form['question']except:question = "请描述图片内容"return jsonify({"image": img_file.filename, "question": question})@app.route('/upload/speech', methods=['POST'])
def recognize_speech():speech_file = request.files['speech']try:save_path = os.path.join(app.config['UPLOAD_FOLDER'], speech_file.filename)speech_file_path = os.path.join(app.config['UPLOAD_FOLDER'], save_path)speech_file.save(speech_file_path)# question = speech2txt(speech_file_path)# print('百度识别结果：', question)except Exception as e:return jsonify({'error': str(e)}), 500return jsonify({"speech": speech_file.filename})

微信小程序

微信小程序端的任务是，调用手机相机，把相机画面展示给用户，加一个按钮，点击按钮拍照；另外一个按钮，点击可以把拍到的照片上传。

wxml 中，放上一个 camera 用来显示相机画面；放上几个 button，控制拍照、上传。

<!--index.wxml-->
<scroll-view class="scrollarea" scroll-y type="list">
<!-- 相机画面 --><view class="my-container"><!-- 显示相机画面 --><camera device-position="back" flash="off" binderror="error" style="width: 90%; height: 200px;"></camera></view><!-- 按钮集合 --><view class="my-container"><!-- 拍照、录音、ocr 按钮 --><view class="button-row"><!-- 拍摄照片按钮 --><button class="btn-normal btn-large" hover-class="btn-pressed" bind:tap="takePhoto">拍摄图片</button><!-- 录音得到 Question --><button class="btn-normal btn-large" hover-class="btn-pressed" bind:touchstart="startRecord" bind:touchend="stopRecord">长按提问</button></view><!-- caption 和 vqa 按钮 --><view class="button-row"><!-- 发送预测 caption 请求 --><button class="btn-normal btn-large" hover-class="btn-pressed" bind:tap="predCaption">描述图片</button><!-- 发送预测 vqa 请求 --><button class="btn-normal btn-large" hover-class="btn-pressed" bind:tap="predVQA">回答问题</button></view></view>
</scroll-view>

用到的 wxss

/**index.wxss**/
page {height: 100vh;display: flex;flex-direction: column;
}
.scrollarea {flex: 1;overflow-y: hidden;
}.btn-normal {margin-top: 10px;padding: 10px;background-color: rgb(252, 226, 230);color: black;border-radius: 0ch;border-color: brown;border-width: 1px;border-style: dotted;cursor: pointer;height: 70px;line-height: 50px;width: 90%;text-align: center;font-size: xx-large;
}.btn-large {height: 300px;
}.btn-pressed {background-color: rgb(202, 129, 140);color: rgb(82, 75, 75);
}.btn-human {background-color: darkseagreen;
}.btn-human-pressed {background-color:rgb(89, 141, 89);color: rgb(75, 82, 77);
}button:not([size=mini]) {width: 90%;
}.useGuide {margin-top: 10px;margin-bottom: 10px;width: 90%;
}.text-question {margin-top: 10px;width: 90%;
}.my-container {  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  
}  .button-row {  display: flex;  justify-content: space-between;width: 90%;
}  .donot-display {display: none;
}

js 部分。因为微信小程序给封装得很好，所以基本没有什么坑，按照这个写就行，基本不出错。要注意各种 success 方法，要用 success: (res) => {} 的写法，不然在里面调用 this 是识别不到的。

Page({data: {serverUrl: 'http://改成你的',  // 服务器地址 photoData: '',  // 用户拍摄的图片speechData: '',  // 用户提问的录音文件textQuestion: '',  // 用户提问文本recorderManager: null,textAnswer: '',  // vqa模型识别的文本},// 点击拍照的方法在这里 （按钮绑定在 wxml 就写好了）takePhoto(e) {console.log("拍摄照片")const ctx = wx.createCameraContext();ctx.takePhoto({quality: 'low',success: (res) => {this.setData({photoData: res.tempImagePath  // res.tempImagePath 就可以拿到拍到的照片文件的 object url 地址，把这个地址传给服务器，就可以把该文件传给服务器});}});},// 控制长按录音的代码放在这里（按钮绑定在 wxml 就写好了）startRecord() {const recorderManager = wx.getRecorderManager();this.setData({ recorderManager });// 停止录音的回调方法；在这里我加了调用百度语音 api 的东西，这部分会另外写文详说，这里只放出来一部分。所以这里没有把录音文件上传，而是直接把语音识别的结果上传文件夹recorderManager.onStop((res) => {console.log('recorder stop', res);this.setData({ speechData: res.tempFilePath });var baiduAccessToken = wx.getStorageSync('baidu_yuyin_access_token');// 读取文件并转为 ArrayBufferconst fs = wx.getFileSystemManager();fs.readFile({filePath: res.tempFilePath,success: (res) => {const base64 = wx.arrayBufferToBase64(res.data);wx.request({url: 'https://vop.baidu.com/server_api',data: {format: 'pcm',rate: 16000,channel: 1,cuid: 'sdfdfdfsfs',token: baiduAccessToken,speech: base64,len: res.data.byteLength,},method: "POST",header: {'content-type': 'application/json'},success: (res) => {wx.hideLoading();console.log("拿到百度语音api返回的结果")console.log(res.data);var baiduResults = res.data.result;console.log(baiduResults[0]);if (baiduResults.lenth == 0) {wx.showToast({title: '未识别要语音信息！',icon: 'none',duration: 3000})} else {this.setData({textQuestion: baiduResults[0]});}}})}})});// 这里才是控制录音的参数；微信小程序端可以设置这些录音参数，因为后面要调用百度语音识别 api，该 api 仅支持采样率 16000 或 8000，对压缩格式也有要求，所以录音的时候要和 api 的要求保持一致recorderManager.start({format: 'PCM',duration: 20000,  // 最长支持 20ssampleRate:16000,encodeBitRate: 48000,numberOfChannels: 1,success: (res) => {console.log('开始录音');},fail: (err) => {console.error('录音失败', err);}});},// 上传的代码放在这里predVQA() {if (this.data.photoData != '' && this.data.textQuestion != ''){console.log('send img' + this.data.photoData);wx.uploadFile({filePath: this.data.photoData,name: 'img',  // 文件对应 key，后端通过该 key 获取文件；前后端注意保持一致url: this.data.serverUrl+'/vqa',formData: {'question': this.data.textQuestion},success: (res) => { console.log('成功上传'); if (res.statusCode == 200) {var answer = res.datathis.setData({ textAnswer: answer })} else { console.error(res) }},fail: (err) => { console.error('上传失败'); }})}},
})

网页端的实现

网页端就要复杂很多……掉过很多坑真的很难搞……（这里感谢 b站 up主 “前端石头”，其中摄像头拍照和录音的 js 代码参考了他的代码）

而且这里有 2 个关键的问题：

1. 关于视频拍照：如果我把展示视频流的那个控件隐藏掉，那拍出来的照片就是黑的。在微信小程序里就不会有这个问题。原因是，它拍照的原理是，通过 canvas 控件在 video 控件上截图，如果你隐藏掉了，自然没有图可截，就是黑的。我找了很多资料，貌似没有别的解决方法，所以我只能把视频放很小，放角落里……
2. 关于录音：js 调用硬件就是很有限制。因为我后面想接百度语音识别的 api，该 api 仅支持采样率 16000 或者 8000 的音频，但是 js 默认录音采样率 48000。我找到一些人说，在 constrains 里面传参，但是，不仅没用，而且传了之后会导致音频损坏……然后问了 chatgpt，它说 js 很难变，只能你先录好，然后通过代码改采样率。我试了直接传音频到服务器，然后 python 代码改采样率。但是 python 代码改采样率用的那个包，在 Windows 下运行会报错，还得下一个软件怎么怎么设置……就是很麻烦。所以，暂时没有找到优雅的解决方案。

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="{{ url_for('static', filename='css/full_button.css') }}" type="text/css">
</head>
<body><div style="display: flex"><div><video id="videoElement" autoplay="autoplay" muted="muted" style="width: 40px"></video><img id="photo" alt="你的照片" src="" style="display: none"></div><div id="answer" class="answer-text">答案等待中...</div></div><div class="button-grid"><button id="snapButton">拍摄照片</button><button id="recorderButton">录音</button><button id="captionButton">描述图片</button><button id="vqaButton">回答问题</button></div>{#    <input type="text" id="textQuestion" placeholder="请输入问题...">#}<script>var imageBlob = null;  // 拍摄的图片var speechBlob = null;  // 提出的问题// 生成随机文件名function randomFilename() {let now = new Date().getTime();let str = `xxxxxxxx-xxxx-${now}-yxxx`;return str.replace(/[xy]/g, function(c) {const r = Math.random() * 16 | 0;const v = c === 'x' ? r : (r & 0x3 | 0x8);return v.toString(16)})}</script><script type="text/javascript" src="../static/js/user_camera.js"></script><script type="text/javascript" src="../static/js/user_recorder.js"></script><script>// 绑定 vqa 按钮document.getElementById('vqaButton').onclick = function () {if (imageBlob == null) {alert('请先拍摄照片，再点击“描述图片”按钮')} else {if (speechBlob == null) {alert('您还没有提问，请先点击录音按钮录音提问')} else {let filename = randomFilename();const speechFormData = new FormData();// 注意，这里是第一个点：这里放进去的第一个参数是 key，后端就要通过这个 key 拿到文件。第二个参数是文件的二进制数据，blob,别搞错了！我会在 recorder.js 的代码里给这个 speechBlob 赋值，总之它应该是一个 Blob 对象。第三个参数是文件名，这个看你自己的需求。speechFormData.append('speech', speechBlob, filename+'.wav');// 这里是第二个点，把这个路径换成你的位置。// 而且我发现，localhost 和 127.0.0.1 居然是有区别的，// 我搞不太懂这二者的区别，但是有时候我填 127.0.0.1 就会告诉我跨域传数据之类的，// 总之很难……如果你部署到服务器的话，应该是要改成服务器的地址的fetch('http://localhost:8099/upload/speech', {method: 'POST',// 这里把 FormData 放到 body 传过去；如果你还要传别的数据，都放到这个 FormData 里就可以传过去body: speechFormData}).then(response => {console.log('response:', response);if (response.status === 200) {console.log('成功上传音频', response);}}).then(data => console.log('data:', data)).catch(error => console.error(error));const imgFormData = new FormData();imgFormData.append('img', imageBlob, filename+'.jpg');fetch('http://localhost:8099/upload', {method: 'POST',body: imgFormData}).then(response => {console.log('response:', response);if (response.status === 200) {console.log('上传完成');}}).then(data => console.log('data:', data)).catch(error => console.error(error));}}};</script>
</body>
</html>

javascript 的部分

有两个文件，放在 static 文件夹的 js 文件夹下：

user_camera.js

class SnapVideo {// 摄像头流媒体stream;// 页面domvideoElement = document.getElementById('videoElement');snapButton = document.getElementById('snapButton');photoElement = document.getElementById('photo');constructor() {const constraints = {audio: true,video: {facingMode: "environment",  // "user" 代表前置摄像头width: 448,  // 视频宽度height: 448,frameRate: 60,  // 每秒 60 帧}};// 绑定方法this.snapButton.onclick = () => this.takeSnapshot();// this.videoElement.width = constraints.video.width;// this.videoElement.height = constraints.video.height;// 获取摄像头流媒体this.getUserMedia(constraints, (stream) => {// 摄像头流媒体成功回调this.stream = stream;this.videoElement.srcObject = stream;}, (e) => {// 摄像头流媒体失败回调if (e.message === 'Permission denied') {alert('您已经禁止使用摄像头');}console.log('navigator.getUserMedia error: ', e);})}getUserMedia(constrains, success, error) {if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {//最新的标准APInavigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);} else if (navigator.webkitGetUserMedia) {//webkit核心浏览器navigator.webkitGetUserMedia(constraints, success, error)} else if (navigator.getUserMedia) {//旧版APInavigator.getUserMedia(constraints, success, error);}}// 拍照takeSnapshot() {console.log('点击了拍摄按钮');// 利用 canvas 截取视频图片const canvas = document.createElement('canvas');const context = canvas.getContext('2d');canvas.width = this.videoElement.videoWidth;canvas.height = this.videoElement.videoHeight;context.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);this.photoElement.src = canvas.toDataURL('image/png');canvas.toBlob(function (blob) {// 把 blob 赋给 imageBlob；注意这个 imageBlob 是在 html 文件中声明的！！imageBlob = new Blob([blob], {type: "image/png"});}, "image/png", 1);// this.photoElement.style.display = 'block';}
}new SnapVideo();

另一个文件是 user_recorder.js

// 录音
const recordBtn = document.getElementById('recorderButton');if (navigator.mediaDevices.getUserMedia) {let chunks = [];// 注意，这里这个 audio 传参只能传 true，传别的，录到的音频就是损坏的！！const constraints = { audio: true };navigator.mediaDevices.getUserMedia(constraints).then(stream => {const mediaRecorder = new MediaRecorder(stream);recordBtn.onclick = () => {console.log("点击");if (mediaRecorder.state === "recording") {mediaRecorder.stop();recordBtn.textContent = "录音结束";} else {mediaRecorder.start();recordBtn.textContent = "录音中...";}};mediaRecorder.ondataavailable = e => {chunks.push(e.data);};mediaRecorder.onstop = e => {// 一样的，把 blob 赋给 speechBlob，这个也是在 html 里面的 <script> 声明的speechBlob = new Blob(chunks, {type: "audio/wav"});chunks = [];}},() => { console.error("授权失败！"); });
} else {console.error("浏览器不支持 getUserMedia");
}