网络集资网站怎么做,成都幕墙设计公司,做网站品牌,北京精兴装饰公司选择 flask 作为后端#xff0c;因为后续还需要深度学习模型#xff0c;python 语言最适配#xff1b;而 flask 框架轻、学习成本低#xff0c;所以选 flask 作为后端框架。
微信小程序封装了调用手机硬件的 api#xff0c;通过它来调用手机的摄像头、录音机#xff0c;…选择 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] rD:\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(fsave 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(fsave 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 classscrollarea scroll-y typelist
!-- 相机画面 --view classmy-container!-- 显示相机画面 --camera device-positionback flashoff binderrorerror stylewidth: 90%; height: 200px;/camera/view!-- 按钮集合 --view classmy-container!-- 拍照、录音、ocr 按钮 --view classbutton-row!-- 拍摄照片按钮 --button classbtn-normal btn-large hover-classbtn-pressed bind:taptakePhoto拍摄图片/button!-- 录音得到 Question --button classbtn-normal btn-large hover-classbtn-pressed bind:touchstartstartRecord bind:touchendstopRecord长按提问/button/view!-- caption 和 vqa 按钮 --view classbutton-row!-- 发送预测 caption 请求 --button classbtn-normal btn-large hover-classbtn-pressed bind:tappredCaption描述图片/button!-- 发送预测 vqa 请求 --button classbtn-normal btn-large hover-classbtn-pressed bind:tappredVQA回答问题/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([sizemini]) {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 个关键的问题
关于视频拍照如果我把展示视频流的那个控件隐藏掉那拍出来的照片就是黑的。在微信小程序里就不会有这个问题。原因是它拍照的原理是通过 canvas 控件在 video 控件上截图如果你隐藏掉了自然没有图可截就是黑的。我找了很多资料貌似没有别的解决方法所以我只能把视频放很小放角落里……关于录音js 调用硬件就是很有限制。因为我后面想接百度语音识别的 api该 api 仅支持采样率 16000 或者 8000 的音频但是 js 默认录音采样率 48000。我找到一些人说在 constrains 里面传参但是不仅没用而且传了之后会导致音频损坏……然后问了 chatgpt它说 js 很难变只能你先录好然后通过代码改采样率。我试了直接传音频到服务器然后 python 代码改采样率。但是 python 代码改采样率用的那个包在 Windows 下运行会报错还得下一个软件怎么怎么设置……就是很麻烦。所以暂时没有找到优雅的解决方案。
html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href{{ url_for(static, filenamecss/full_button.css) }} typetext/css
/head
bodydiv styledisplay: flexdivvideo idvideoElement autoplayautoplay mutedmuted stylewidth: 40px/videoimg idphoto alt你的照片 src styledisplay: none/divdiv idanswer classanswer-text答案等待中.../div/divdiv classbutton-gridbutton idsnapButton拍摄照片/buttonbutton idrecorderButton录音/buttonbutton idcaptionButton描述图片/buttonbutton idvqaButton回答问题/button/div{# input typetext idtextQuestion placeholder请输入问题...#}scriptvar 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)})}/scriptscript typetext/javascript src../static/js/user_camera.js/scriptscript typetext/javascript src../static/js/user_recorder.js/scriptscript// 绑定 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
/htmljavascript 的部分
有两个文件放在 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);
}
