HBuilder创建app 3
一.Audio 模块实现开启手机摄像头
基于html5 plus
http://www.html5plus.org/doc/zh_cn/audio.html
栗子:
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Barcode Example</title> <script type="text/javascript" > // 扩展API加载完毕后调用onPlusReady回调函数 document.addEventListener( "plusready", onPlusReady, false ); // 扩展API加载完毕,现在可以正常调用扩展API function onPlusReady() { var e = document.getElementById("scan"); e.removeAttribute( "disabled" ); } var scan = null; function onmarked( type, result ) { var text = '未知: '; switch(type){ case plus.barcode.QR: text = 'QR: '; break; case plus.barcode.EAN13: text = 'EAN13: '; break; case plus.barcode.EAN8: text = 'EAN8: '; break; } alert( text+result ); } function startRecognize() { scan = new plus.barcode.Barcode('bcid'); scan.onmarked = onmarked; } function startScan() { scan.start(); } function cancelScan() { scan.cancel(); } function setFlash() { scan.setFlash(); } </script> <style type="text/css"> *{ -webkit-user-select: none; } html,body{ margin: 0px; padding: 0px; height: 100%; } #bcid { background:#0F0; height:480px; width:360px; } </style> </head> <body > <input type='button' onclick='startRecognize()' value='创建扫码控件' /> <input type='button' onclick='startScan()' value='开始扫码' /> <input type='button' onclick='cancelScan()' value='取消扫码' /> <input type='button' onclick='setFlash()' value='开启闪光灯' /> <div id= "bcid"></div> <input type='text' id='text'/> </body> </html>
自定义:
scanQR.HTML
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css"/> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">扫描玩具二维码</h1> </header> <div class="mui-content"> <div id="bcid" style="width: 100%;height: 750px;"></div> </div> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init(); var scan = null; mui.plusReady(function () { scan = new plus.barcode.Barcode("bcid"); scan.onmarked = inmarked; #识别二维码 scan.start(); #开启识别扫描 inmarked(0,"d602f74c6a60fc1e9f60b20a190eeed7"); #在不开启摄像头的情况下,扫描二维码的是内容存储的内容 }) function inmarked(type,code){ // alert(type +":"+ code) mui.post(window.serv+ '/validate_code',{ device_key:code #{"device_key":"1eae197f4f4abe105c40bcaa7438d1f2"}, },function(data){ if(data.code == 0){ //打开绑定玩具流程 创建玩具 mui.openWindow({ url:"bind_toy.html", id:"bind_toy.html", extras:data.data # 获取的数据 {"code":0,"data":{"device_key":"1eae197f4f4abe105c40bcaa7438d1f2"},"msg":"设备已授权,开启绑定"} }) }else if(data.code==2){ //扫描的二维码信息异常 mui.toast(data.msg); mui.back(); }else if(data.code==1){ //神秘代码 } },'json' ); } </script> </body> </html>
在上一步扫码后,进入玩具的绑定界面
进行玩具信息录入
bind_toy.html
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">绑定玩具</h1> </header> <div class="mui-content"> <form class="mui-input-group"> <div class="mui-input-row"> <label>玩具名称</label> <input type="text" id="toy_name" class="mui-input-clear" placeholder="给玩具取个名字"> </div> <div class="mui-input-row"> <label>宝宝名称</label> <input type="text" id="baby_name" class="mui-input-clear" placeholder="玩具小主人的名字"> </div> <div class="mui-input-row"> <label>对您的称呼</label> <input type="text" id="remark" class="mui-input-clear" placeholder="小主人对您的称呼"> </div> <div class="mui-button-row"> <button type="button" class="mui-btn mui-btn-primary" id='bind_btn'>绑定</button> <button type="button" class="mui-btn mui-btn-red mui-action-back">取消</button> </div> </form> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init(); var Sdata = null; mui.plusReady(function() { Sdata = plus.webview.currentWebview();#获取到扫描到数据 }) document.getElementById('bind_btn').addEventListener('tap', function() { mui.post(window.serv + '/bind_toy', { //1.device_key device_key: Sdata.device_key,{"device_key":"1eae197f4f4abe105c40bcaa7438d1f2"}, //2.formdata toy_name: document.getElementById("toy_name").value, baby_name: document.getElementById("baby_name").value, remark: document.getElementById("remark").value, //3.user_id user_id: window.localStorage.getItem("user") }, function(data) { if(data.code == 0) { mui.openWindow({ url: "toy_manager.html", id: "toy_manager.html", createNew:true #刷新页面 }) } }, 'json'); }) </script> </html>
后端存储数据
@devices.route("/bind_toy",methods=['POST']) def bind_toy(): # 1.device_key 2.fromdata 3. who bind toy toy_info = request.form.to_dict() print(toy_info) chat_window = MongoDB.chats.insert_one({"user_list":[],"char_list":[]}) user_info = MongoDB.xujian.find_one({"_id":ObjectId(toy_info["user_id"])}) toy_info["bind_user"] = toy_info.pop("user_id") toy_info["avatar"] = "toy.jpg" toy_info["firend_list"] = [ { "firend_id":toy_info["bind_user"], "firend_name":user_info.get("nickname"), "firend_nick":toy_info.pop("remark"), "firend_avatar":user_info.get("avatar"), "firend_type":"app", "firend_chat":str(chat_window.inserted_id) } ] toy = MongoDB.toys.insert_one(toy_info) user_info["bind_boy"].append(str(toy.inserted_id)) user_add_toy={ "firend_id": str(toy.inserted_id), "firend_name": toy_info.get("toy_name"), "firend_nick": toy_info.get("baby_name"), "firend_avatar": toy_info.get("avatar"), "firend_type": "toy", "firend_chat": str(chat_window.inserted_id) } user_info["friend_list"].append(user_add_toy) MongoDB.xujian.update_one({"_id":ObjectId(toy_info["bind_user"])}, {"$set":user_info}) MongoDB.chats.update_one({"_id":chat_window.inserted_id},{"$set":{"user_list":[ str(toy.inserted_id),str(user_info.get("_id")) ]}}) RET["code"] = 0 RET["msg"] = "绑定玩具成功" RET['data'] = {} return jsonify(RET)
绑定好用户的机器人后,在toy_manager.html显示
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css" /> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">管理我的玩具</h1> </header> <div class="mui-content"> <ul class="mui-table-view" id="toy_list"> <li class="mui-table-view-cell mui-media"> <a id="add_bind"> <img class="mui-media-object mui-pull-left" src="image/add.jpg"> <div class="mui-media-body"> 添加绑定玩具 <p class="mui-ellipsis">点击此处开始扫描玩具二维码</p> </div> </a> </li> </ul> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init(); mui.plusReady(function () { mui.post(window.serv + '/toy_list',{ #通过post请求返回掌控的机器人 user_id:window.localStorage.getItem("user")#发送user 信息 },function(data){ console.log(JSON.stringify(data)); for (var i = 0; i < data.data.length; i++) { create_item(data.data[i]); } },'json' ); }) document.getElementById('add_bind').addEventListener('tap', function() { mui.openWindow({ url: "scanQR.html", id: "scanQR.html", }) }) function create_item(content) { var li = document.createElement("li"); li.className = "mui-table-view-cell mui-media"; var a = document.createElement("a"); a.onclick = function() { } var img = document.createElement("img"); img.className = "mui-media-object mui-pull-left"; img.src = "avatar/" + content.avatar; var div = document.createElement("div"); div.className = "mui-media-body"; div.innerText = content.baby_name; var p = document.createElement("p"); p.className = "mui-ellipsis"; p.innerText = content.toy_name; li.appendChild(a); a.appendChild(img); a.appendChild(div); div.appendChild(p); document.getElementById("toy_list").appendChild(li); } </script> </html>
这样,用户就可以查看他绑定的机器人啦
进行用户间的聊天chats
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="css/mui.css"/> <link rel="stylesheet" type="text/css" href="css/chat.css" /> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">xxx话框</h1> </header> <div class="mui-content"> <div class="leftd"> <span class="leftd_h"> <img src="avatar/toy.jpg" /> </span> <div class="left speech"> 点击播放消息 </div> </div> <div class="rightd"> <span class="rightd_h"> <img src="avatar/toy.jpg" /> </span> <div class="right speech"> 点击播放消息 </div> </div> <nav class="mui-bar mui-bar-tab"> <a class="mui-tab-item mui-active" id="talk"> <span class="mui-icon mui-icon-speech"></span> <span class="mui-tab-label">按住说话</span> </a> </nav> </div> </body> <script src="js/mui.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> mui.init({ gestureConfig: { doubletap: false, //默认为false longtap: false, //默认为false swipe: false, //默认为true drag: false, //默认为true hold: true, //默认为false,不监听 release: true //默认为false,不监听 } }); var reco =null mui.plusReady(function () { }) //void recorder.record( option, successCB, errorCB ); // 录音操作 //var r = plus.audio.getRecorder(); //r.record( {filename:"_doc/audio/"}, function () { // alert( "Audio record success!" ); //}, function ( e ) { // alert( "Audio record failed: " + e.message ); //} ); document.getElementById('talk').addEventListener('hold',function () { #在按住的时候通过audio调用麦克风监听语音 reco = plus.audio.getRecorder(); reco.record({ filename: "_doc/audio/", #filename 文件路径 format: "amr" #format 文件类型 }, function(path) { console.log(path); createUpload(path); #path 文件存储路径 }); }) document.getElementById('talk').addEventListener('release',function () { #离开时停止录制 reco.stop(); }) function createUpload(path) { var task = plus.uploader.createUpload(window.serv + "/uploader", { method: "POST" }, function(t, status) { // 上传完成 if(status == 200) { alert("Upload success: " + t.url); } else { alert("Upload failed: " + status); } } ); task.addFile(path, { #上传文件 key: "recorder" }); task.addData("key", "value"); $附上日期 task.start(); } </script> </html>
后端生成对话文件
@gsa.route("/uploader",methods=["POST"]) def uploader(): audio = request.files.get("recorder") path = os.path.join(chats_path,audio.filename) audio.save(path) os.system(f"ffmpeg -i {path} {path}.mp3") #通过ffmpeg强制转变格式 return "123"