zoukankan      html  css  js  c++  java

  • 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;
    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>
    View Code

    自定义:

    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=" 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>
    View Code

    后端存储数据

    @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="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>
    View Code

    这样,用户就可以查看他绑定的机器人啦

    进行用户间的聊天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>
    View Code

    后端生成对话文件

    @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"
  • 相关阅读:
    nginx部署vue工程和反向代理nodejs工程
    memcache 原理 & 监测 & 查看状态 & stats & 结构
    CRT(secureCRT)中文显示研究&Linux中文字符显示
    Linux rz的使用
    htmlspecialschars与htmlentities的区别
    ie下php session不能用（域名的合法定义）
    常用生产环境的PHP安装参数
    XMLREADER/DOM/SIMPLEXML 解析大文件
    Linux中的小括号和大括号，${}/$()/()/{}/${var:-string}/${var:=string}/${var:+string}/${var:?string}/${var%pattern}/${var#pattern}/${var%%pattern}/${var##pattern}
    好用的window命令
  • 原文地址：https://www.cnblogs.com/zhangqing979797/p/10306258.html
Copyright © 2011-2022 走看看