api#xff0c;通过它来调用手机的摄像头、录音机#xff0c;…选择

flask

app.config.from_object(__name__)

False

rD:\A_data_trans\test改成你的位置app.route(/vqa,

methods[POST])

os.path.join(app.config[UPLOAD_FOLDER],

img_file.filename)img_file.save(image_path)log(fsave

image:

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))

request.form[question]except:question

请描述图片内容return

question})app.route(/upload/speech,

methods[POST])

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

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

wxml

bind:taptakePhoto拍摄图片/button!--

录音得到

bind:touchendstopRecord长按提问/button/view!--

caption

bind:tappredCaption描述图片/button!--

发送预测

bind:tappredVQA回答问题/button/view/view

wxss

部分。

因为微信小程序给封装得很好所以基本没有什么坑按照这个写就行基本不出错。

要注意各种

success

wx.createCameraContext();ctx.takePhoto({quality:

low,success:

地址把这个地址传给服务器就可以把该文件传给服务器});}});},//

wxml

wx.getRecorderManager();this.setData({

recorderManager

的东西这部分会另外写文详说这里只放出来一部分。

所以这里没有把录音文件上传而是直接把语音识别的结果上传文件夹recorderManager.onStop((res)

stop,

wx.getStorageSync(baidu_yuyin_access_token);//

读取文件并转为

wx.getFileSystemManager();fs.readFile({filePath:

(res)

wx.arrayBufferToBase64(res.data);wx.request({url:

https://vop.baidu.com/server_api,data:

{format:

{wx.hideLoading();console.log(拿到百度语音api返回的结果)console.log(res.data);var

baiduResults

res.data.result;console.log(baiduResults[0]);if

(baiduResults.lenth

这里才是控制录音的参数微信小程序端可以设置这些录音参数因为后面要调用百度语音识别

api该

的要求保持一致recorderManager.start({format:

PCM,duration:

20ssampleRate:16000,encodeBitRate:

1,success:

this.data.photoData);wx.uploadFile({filePath:

img,

this.data.serverUrl/vqa,formData:

{question:

this.data.textQuestion},success:

(res)

关于视频拍照如果我把展示视频流的那个控件隐藏掉那拍出来的照片就是黑的。

在微信小程序里就不会有这个问题。

原因是它拍照的原理是通过

canvas

控件上截图如果你隐藏掉了自然没有图可截就是黑的。

我找了很多资料貌似没有别的解决方法所以我只能把视频放很小放角落里……关于录音js

api该

很难变只能你先录好然后通过代码改采样率。

我试了直接传音频到服务器然后

python

下运行会报错还得下一个软件怎么怎么设置……就是很麻烦。

所以暂时没有找到优雅的解决方案。

html

charsetUTF-8titleTitle/titlelink

relstylesheet

classanswer-text答案等待中.../div/divdiv

idrecorderButton录音/buttonbutton

idcaptionButton描述图片/buttonbutton

input

xxxxxxxx-xxxx-${now}-yxxx;return

str.replace(/[xy]/g,

src../static/js/user_camera.js/scriptscript

typetext/javascript

src../static/js/user_recorder.js/scriptscript//

vqa

按钮document.getElementById(vqaButton).onclick

function

拿到文件。

第二个参数是文件的二进制数据blob,别搞错了我会在

recorder.js

对象。

第三个参数是文件名这个看你自己的需求。

speechFormData.append(speech,

speechBlob,

总之很难……如果你部署到服务器的话应该是要改成服务器的地址的fetch(http://localhost:8099/upload/speech,

{method:

FormData();imgFormData.append(img,

imageBlob,

filename.jpg);fetch(http://localhost:8099/upload,

{method:

{console.log(上传完成);}}).***n(data

console.log(data:,

console.error(error));}}};/script

/body

document.getElementById(videoElement);snapButton

document.getElementById(snapButton);photoElement

document.getElementById(photo);constructor()

{const

获取摄像头流媒体this.getUserMedia(constraints,

(stream)

stream;this.videoElement.srcObject

stream;},

{alert(您已经禁止使用摄像头);}console.log(navigator.getUserMedia

error:

navigator.mediaDevices.getUserMedia)

{//最新的标准APInavigator.mediaDevices.getUserMedia(constrains).***n(success).catch(error);}

else

{//webkit核心浏览器navigator.webkitGetUserMedia(constraints,

success,

{//旧版APInavigator.getUserMedia(constraints,

success,

document.createElement(canvas);const

context

canvas.getContext(2d);canvas.width

this.videoElement.videoWidth;canvas.height

this.videoElement.videoHeight;context.drawImage(this.videoElement,

canvas.width,

canvas.height);this.photoElement.src

canvas.toDataURL(image/png);canvas.toBlob(function

(blob)

this.photoElement.style.display

block;}

document.getElementById(recorderButton);if

(navigator.mediaDevices.getUserMedia)

{let

};navigator.mediaDevices.getUserMedia(constraints).***n(stream

{const

MediaRecorder(stream);recordBtn.onclick

{console.log(点击);if

{mediaRecorder.stop();recordBtn.textContent

录音结束;}

{mediaRecorder.start();recordBtn.textContent

录音中...;}};mediaRecorder.ondataavailable

{chunks.push(e.data);};mediaRecorder.onstop

{//