app開發-3

時間 2019-11-18

標籤 app 開發简体版

原文原文鏈接

一.Audio 模塊實現開啓手機攝像頭

基於html5 plusjavascript

http://www.html5plus.org/doc/zh_cn/audio.htmlcss

栗子:html

View Code

自定義:html5

scanQR.HTMLjava

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

在上一步掃碼後,進入玩具的綁定界面json

進行玩具信息錄入

bind_toy.html後端

View Code

後端存儲數據app

@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顯示

View Code

這樣,用戶就能夠查看他綁定的機器人啦post

進行用戶間的聊天chats

View Code

後端生成對話文件ui

@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"

1. HTML5手機APP開發入(3)
2. Swift38/90Days - 用 Swift 開發 Mac App 1 / 3
3. HTML5+開發移動app教程3-mui開發示例
4. 安卓開發3 -使用WebView開發web app
5. app開發
6. Cordova 開發 App
7. Android APP開發
8. app 開發
9. apicloud app開發
10. APP開發
更多相關文章...
• ionic 創建 APP - ionic 教程
• Spring使用AspectJ開發AOP：基於XML和基於Annotation - Spring教程
• PHP開發工具
• JDK13 GA發佈：5大特性解讀

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。