HBuilder创建app 3

一.Audio 模块实现开启手机摄像头

基于html5 plus

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

栗子:

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

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

<!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="data: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

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

巴特西

HBuilder创建app 3

一.Audio 模块实现开启手机摄像头

进行玩具信息录入

绑定好用户的机器人后,在toy_manager.html显示

进行用户间的聊天chats

最新文章

热门文章