重庆建设网站哪个好,深圳住房和建设局网站轮候大厅,百度正版下载,一级工程造价师我想实现的效果是#xff0c;我的服务器提供两个路由网址#xff0c;网页A用于拍照、然后录音#xff0c;把照片和录音传给服务器#xff0c;服务器发射信号#xff0c;通知另一个路由的网页B更新#xff0c;把刚刚传来的照片和录音显示在网页上。
然后网页B用户根据这个…我想实现的效果是我的服务器提供两个路由网址网页A用于拍照、然后录音把照片和录音传给服务器服务器发射信号通知另一个路由的网页B更新把刚刚传来的照片和录音显示在网页上。
然后网页B用户根据这个照片和录音回答一些问题输入答案的文本传给服务器。服务器拿到答案后再发射信号把这个结果显示在网页A上。
这就得用到双向通信其实有点类似两个网页聊天的功能而且支持发送语音、图片、文本三种消息。这里用的是 socket.io 包。在本地写还是很好写的但是部署到服务器上之后就出了很多 bug。很多坑这里把我遇到的记下来防止再次犯错。
这里只记录关键代码也就是容易掉坑的代码。整个项目我之后会上传到 github 上。传好了补连接。
整体的逻辑
建立双向通道网页A上传文件得到服务器传回的提示信号code: 200然后 socket.emit(upload_completed)通知服务器数据已经上传了服务器监听 upload_completed 信号收到该信号后服务器作为中转站广播信号 emit(data_updated, data, broadcastTrue) 通知前端该更新数据了网页 B 监听 data_updated 信号修改自己的页面展示图片和录音。等用户在该网页填好答案之后点击发送按钮网页 B 发生信号 socket.emit(annotated_answer)服务器监听 annotated_answer 信号收到该信号后作为中转站广播信号 emit(send_answer, answer, broadcastTrue)网页 A 监听信号 send_answer 收到该信号后把结果显示在网页上
特别拎出来的坑特别注意
运行 flask 代码的时候调用 socketio 的 run 方法不是用 app 的 run 方法不然没法双向连接的但是在服务器端部署的时候用 uwsgi 跑上它就是默认调用 app.run很崩溃的啊这个所以服务器端部署的时候用 gunicorn 这个部署真的翻遍全网才找到落泪了socket 连接的地址本地调试的时候填的是 localhost但是传到服务器要改成服务器的地址不该的话连不上的刚刚更新模型的时候又出毛病爬上来更新。这次没有报任何错误但是网页就是访问不到。检查了一个小时发现是因为梯子忘记关了部署后手机端打不开录音设备和摄像头那是因为媒体设备只能在 https 协议下或者 http://localhost 下访问所以要用这个功能就必须去申请 ssl 证书。阿里云有免费的 20 张好好把握。
flask 代码
我这里只贴最关键的代码加上注释直接把这个代码粘上去是会报错的。
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})socketio.on(upload_completed)
def handle_upload_completed(data):# pip install flask-socketio eventletprint(data)try:emit(data_updated, data, broadcastTrue)except Exception as e:print(e)emit(error, {error: str(e)})socketio.on(upload_speech_completed)
def handle_upload_speech_completed(data):# pip install flask-socketio eventlettry:emit(data_speech_updated, data, broadcastTrue)except Exception as e:print(e)emit(error, {error: str(e)})socketio.on(annotated_answer)
def handle_annotated_answer(answer):log(fget answer from annotator: {answer})try:emit(send_answer, answer, broadcastTrue)except Exception as e:print(e)if __name__ __main__:# app.run(host0.0.0.0, port8099)# 这个地方看清楚看清楚要调用 socketio 的 run 方法不是用 app 的 run 方法不然没法双向连接的socketio.run(app, host0.0.0.0, allow_unsafe_werkzeugTrue, port8099)网页 A 的代码
注意这里只贴了一部分代码关于文件怎么上传的也就是引入的 camera.js 和 recorder.js 这俩文件的内容在我这这篇文章里贴了 flask 后端 微信小程序和网页两种前端调用硬件(相机和录音)和上传至服务器
html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href{{ url_for(static, filenamecss/full_button.css) }} typetext/cssscript srchttps://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js/script
/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请输入问题...#}script// 这里最最最关键的就是这个网址如果你在本地跑要填 localhost不能填 127.0.0.1如果是部署在服务器要填成服务器的地址不然肯定是连不上的。const socket io.connect(http://localhost:8099); // 连接到Flask服务器socket.on(send_answer, function (data) {// 接收到服务器返回的答案震动提示把答案显示在页面上console.log(接收到答案, data);document.getElementById(answer).textContent data;navigator.vibrate([200]); // 震动提示收到答案})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)})}/scriptscript typetext/javascript src../static/js/user_camera.js/scriptscript typetext/javascript src../static/js/user_recorder.js/scriptscript// 绑定 caption 按钮document.getElementById(captionButton).onclick function () {if (imageBlob null) {alert(请先拍摄照片再点击“描述图片”按钮)} else {const captionFormData new FormData();let imgFilename randomFilename().jpg;captionFormData.append(img, imageBlob, imgFilename);captionFormData.append(question, 请描述图片内容);fetch(http://localhost:8099/upload, {method: POST,body: captionFormData}).then(response {console.log(response:, response);if (response.status 200) {console.log(发射信号 upload_completed);// 注意这里发射的信号带的数据得是URL.createObjectURL(imageBlob)不能是别的不能是别的不能是别的重要的事情说3遍不然无法正确地显示在网页 B 上socket.emit(upload_completed, {image: URL.createObjectURL(imageBlob),question: 请描述图片内容});}}).then(data console.log(data:, data)).catch(error console.error(error));}};// 绑定 vqa 按钮document.getElementById(vqaButton).onclick function () {if (imageBlob null) {alert(请先拍摄照片再点击“描述图片”按钮)} else {if (speechBlob null) {alert(您还没有提问请先点击录音按钮录音提问)} else {let filename randomFilename();// 先发语音再发图片因为发了图片之后会提示听录音const speechFormData new FormData();speechFormData.append(speech, speechBlob, filename.wav);fetch(http://localhost:8099/upload/speech, {method: POST,body: speechFormData}).then(response {console.log(response:, response);if (response.status 200) {console.log(成功上传音频, response);socket.emit(upload_speech_completed,{speech: window.URL.createObjectURL(speechBlob)})}}).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(发射信号 upload_completed);socket.emit(upload_completed, {image: URL.createObjectURL(imageBlob),question: 请听录音});}}).then(data console.log(data:, data)).catch(error console.error(error));}}};/script
/body
/html网页 B 的代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titlehuman-annotation/titlescript srchttps://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.min.js/script/head
bodyimg idimage src altYour Imageaudio idaudioPlayer controls classaudio-player/audiodiv styledisplay: flex提问div idquestion/div/divinput typetext idtextInput placeholder请输入答案...button idsubmitButton发送/buttonscript// 这里也是大坑大坑啊这个地址要填对本地用 localhost云端用云端服务器地址啊var socket io.connect(http://localhost:8099); // 连接到Flask服务器socket.on(data_updated, function(data) {// 当接收到来自服务器的数据时更新页面内容var img document.getElementById(image);img.src data.image;console.log(img.src);// document.getElementById(image).innerHTML img src data.image altUploaded Image;document.getElementById(question).textContent data.question;});socket.on(data_speech_updated, function (data) {var audioPlayer document.getElementById(audioPlayer);audioPlayer.src data.speech;});// 监听按钮点击事件document.getElementById(submitButton).addEventListener(click, function() {// 获取输入框中的文本var message document.getElementById(textInput).value;// 验证消息是否为空if (message.trim() ! ) {// 通过Socket.IO发送消息给服务器socket.emit(annotated_answer, message);// 清空输入框document.getElementById(textInput).value ;} else {alert(Please enter a message.);}});/script
/body
/html部署
用 gunicorn 部署
配置文件 运行命令
