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

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

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

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

坑（备忘）

访问摄像头，谷歌浏览器可以访问，但是 edge 不可以，百思不得其解，查到 浏览器调用摄像头拍照 说因为 windows 限制了访问权限，不只是打开网页的时候问你的那个，还有系统限制。解决方法是

这么做确实可以，可是移动端怎么办呢？我这个网页还是想在移动端使用，移动端怎么办呢……

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'}), 400

try:

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'}), 400

try:

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)}), 500

try:

# 传过来的就是文本

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)}), 500

return 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');

// 读取文件并转为 ArrayBuffer

const 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, // 最长支持 20s

sampleRate: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.data

this.setData({ textAnswer: answer })

} else { console.error(res) }

},

fail: (err) => { console.error('上传失败'); }

})

}

},

})

网页端的实现

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

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

关于视频拍照：如果我把展示视频流的那个控件隐藏掉，那拍出来的照片就是黑的。在微信小程序里就不会有这个问题。原因是，它拍照的原理是，通过 canvas 控件在 video 控件上截图，如果你隐藏掉了，自然没有图可截，就是黑的。我找了很多资料，貌似没有别的解决方法，所以我只能把视频放很小，放角落里……关于录音：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;

// 页面dom

videoElement = 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) {

//最新的标准API

navigator.mediaDevices.getUserMedia(constrains).then(success).catch(error);

} else if (navigator.webkitGetUserMedia) {

//webkit核心浏览器

navigator.webkitGetUserMedia(constraints, success, error)

} else if (navigator.getUserMedia) {

//旧版API

navigator.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");

}