h5+实现手机端的录音，拍照，录像
2024-04-20 12:32:35
使用h5+即h5plus可以实现调用手机的功能实现语音的录制播放，图片上传下载，拍照，录像的功能，并提供上传下载的功能。开发工具使用hbuilder，该开发工具有模板和demo可以参考实现快速的开发app功能。使用h5调用硬件的功能，实现原生的效果，前端开发app周期短，开发速度快，入门门槛低，hbuilder还提供了一个mui库，可以实现很多手机原生ui的效果。源码下：http://download.csdn.net/download/wj903829182/10126959，
上传下载参考：http://blog.csdn.net/j903829182/article/details/78406778
1，实现录音，录音上传，录音下载，录音播放，主要代码如下：
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title></title><link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" /><script src="../js/jquery-3.2.1.min.js"></script><style type="text/css">.rp {width: 100%;height: 100%;display: none;text-align: center;position: fixed;top: 0;background: rgba(0, 0, 0, 0.8);z-index: 9999;overflow: hidden;}.aname {font-size: 16px;}.ainf {font-size: 12px;}.rtime {font-size: 22px;color: #FF0000;}.ptime {margin-top: 40%;font-size: 22px;color: #FFFFFF;}.rprogress {background: url(../img/arecord.png) no-repeat center center;background-size: 32px 32px;}.rschedule {background-color: rgba(0, 0, 0, 0);border: 5px solid rgba(0, 183, 229, 0.9);opacity: .9;border-left: 5px solid rgba(0, 0, 0, 0);border-right: 5px solid rgba(0, 0, 0, 0);border-radius: 50px;box-shadow: 0 0 15px #2187e7;width: 36px;height: 36px;margin: 0 auto;-webkit-animation: spin 1s infinite linear;animation: spin 1s infinite linear;}@-webkit-keyframes spin {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}.progress {width: 90%;background-color: #666;margin: 0 5%;border: 1px solid #222;-webkit-border-radius: 5px;border-radius: 5px;}.schedule {width: 8px;height: 8px;margin: 1px 0;background-color: #FFCC33;-webkit-border-radius: 4px;border-radius: 4px;-webkit-transition: all 1s linear;transition: all 1s linear;}.stop {width: 72px;height: 72px;background: url(../img/astop.png) center center;background-size: 72px 72px;margin: auto;-webkit-border-radius: 72px;border-radius: 72px;}.stop:active {-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) inset;}.iplay {display: block;background: no-repeat right center url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABYCAYAAAADWlKCAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAKwwAACsMBNCkkqwAAABZ0RVh0Q3JlYXRpb24gVGltZQAwOS8xMi8xM5w+I3MAAAAcdEVYdFNvZnR3YXJlAEFkb2JlIEZpcmV3b3JrcyBDUzVxteM2AAAD9UlEQVR4nO2b3XETMRRGDwzvoYOkg5hRAVkqiKmAdIA7wHSQVECoALsC1gXciV0BTge4gvCwgnHk9d/+WF8m97ztxrlXs8fS1Urym6enJxwd3uZugPMcFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMVyIGC5EDBcihgsRw4WI4ULEcCFiuBAx3uVuwDGY2XtgCBTAALjc8tEFMAdKYBJC+HOK9nXBm5dwUM7MCmAEXDcMMQVuQwhlV23qC2khZjYAboGrjkLOgFEIYd5RvM6RrSFmdgs80J0MYqyHGFsSuR4S60TJ9vrwCEziZ+YhhGXy/xdU9aWgqjfnW+IsgEKtvkgJiUPUPfUyZsD42DoQ68+Y+p62AG6UhjAZITt6xopq3L9vGf+Gqh6dJX+S6ilKNaRkU8YCGLSVARBjDGLMdS5jbgkkhMQiWyejSGtEG2KsghopKoU++5AV68ZDcrvXYWTH8Pghdz1R6CHpN3MFDPsc02PsYcy1qy0nJ6uQOANKZz+jfcOUmd3H6W1jYo5RcvsqtikbuXtI+kBmBxbwz8DczMZtksdcsz1tOinZhMRxPF2bGh8R4gz4amZLMxu2aEqa8zq2LQs5e0j6EB8bLv6dAz/NrGwyjMWcj3vadjJyCimS60nLeFfAbzO7bfANT3MXLdvSmJxCBsl12VHcL8AyvpkfSpo7bdvJyCkkfQfocv5/Bnw3s/mBs6Y097aFzd7JPcv6T5dv5GtcAr/2TZN7yt0IGSE908k0+RS8FiEvhhd1yKEFUw5YAVBApoe0XQrZwgL4GEIY7pLRU+5G5OwhC57PZgbAsqPYK6rdxUMXC9Npbro8fzJy9pB0qll0FPcOuDhCRl3ubEvwOYWUyXXb5YoZ1X7GqMHSfZq7bNmWxuQUki5XnDdc+n4EPoUQiiabSzFnejKl7TJOY7IJid/iaXJ7fESIFfCNas+9zQNMc05zHnjIPctKx/mrA9egflCJGLd5eDFXukGWdddQYU+95PlDWVE97GXPeS+oivf6saBZCKHoM+8+cvcQ2NyhOwMmfW4SxdgTNs9oZd0tBAEhsRDfJbcvgbIPKTtOnNzlPnECAkPWP8xsTv3ZrJ1v2UfmuKDqGRt5QgjZ9kDWyd5D1iioP1U4P3KzqZYYY5v0om38rpDpIeCHrUFMCPjPEeSE/COetf3SU/i7EEL2GVUdSjXkGfGBfWDzIFsb/q93dRizU2R7yDr+o09R/GfRzsmRrSGvFRcihgsRw4WI4ULEcCFiuBAxXIgYLkQMFyKGCxHDhYjhQsRwIWK4EDFciBguRAwXIoYLEcOFiOFCxHAhYrgQMf4CVuqCm+17t3sAAAAASUVORK5CYII=);background-size: 50px 44px;-ms-touch-action: auto;}</style><!--<script src="../js/voice1.js"></script>--></head><body><div style="height: 200px;widows: 100px;"></div><div id="dcontent"><br/><button style="width: 150px;height: 80px;color: red;" οnclick="startRecord()">开始录音</button> <!--<button style="width: 150px;height: 80px;color: red;" οnclick="outLine();">开始录音22</button>--> <button style="width: 150px;height: 80px;color: red;" οnclick="cleanHistory();">清空历史</button> <br/><br/><hr color="blanchedalmond" /><div id="v1"><!--<audio src="1509952351582.m4a" controls></audio>--></div></div><br /><hr color="red" /><label>图片上传：</label><input type="file" name="imageName" accept="image/*" id="uploadImage" style="margin-bottom:10px;" οnchange="uploadImage();"><!--<input type="button" id="uploadPicButton" value="上传" οnclick="uploadImage()">--><br /><br /><div id="div_image"></div><br /><hr color="red" /><br /><div class="button" οnclick="getImage()">拍照</div><br /><br /><br /><div class="button" οnclick="getVideo()">录像</div><br /><br /><div class="button" id="login">登入</div><br /><div class="button" id="logout">登出</div><br /><div class="button" οnclick="uploadownTest()">下载测试</div><!--<label>视频上传：</label><input type="file" name="uploadVideo" accept="video/*" capture="camcorder" id="uploadVideo" style="margin-bottom:10px;" οnchange="uploadVideo();" />--><!--<input type="button" id="uploadPicButton" value="上传" οnclick="uploadImage()">--><br /><br /><div id="div_video"><!--<video src="../audio/1510553447189.mp4" width="400px" height="550px" controls="controls"/>--><!--<video src="1510553447189.mp4" controls="controls">--><!--video width="400px" height="550px" controls="controls"><source src="http://192.168.9.105:8860/v1/uploadDownload/downloadFile?imageName=test.mp4" >不支持video</video>--><video src="http://192.168.9.105:8860/v1/uploadDownload/downloadFile?imageName=test2.ogg" controls="controls"></div><br /><div id="play" class="rp"><div id="ptime" class="ptime">00:00:00/00:00:00</div><br/><div id="progress" class="progress"><div id="schedule" class="schedule"></div></div><br/><div class="stop" οnclick="stopPlay(),outLine('停止播放！')"></div></div><br /><div id="record" class="rp"><div style="width:100%;height:20%;"></div><div class="rprogress"><div class="rschedule"></div></div><br/><div id="rtime" class="rtime">00:00:00</div><br/><div class="stop" οnclick="stopRecord()"></div></div><br /><div id="output">Audio用于管理音频设备，可调用麦克风录制音频文件，也可播放音频文件。</div></body><script>var gentry = null,hl = null,le = null;var er = null,ep = null;var bUpdated = false; //用于兼容可能提前注入导致DOM未解析完更新的问题// H5 plus事件处理function plusReady() {// 获取音频目录对象plus.io.resolveLocalFileSystemURL('_doc/', function(entry) {entry.getDirectory('audio', {create: true}, function(dir) {gentry = dir;updateHistory();}, function(e) {outLine('Get directory "audio" failed: ' + e.message);});}, function(e) {outLine('Resolve "_doc/" failed: ' + e.message);});}if(window.plus) {plusReady();} else {document.addEventListener('plusready', plusReady, false);}// DOMContentLoaded事件处理document.addEventListener('DOMContentLoaded', function() {// 获取DOM元素对象hl = document.getElementById('history');le = document.getElementById('empty');er = document.getElementById('record');rt = document.getElementById('rtime');ep = document.getElementById('play');pt = document.getElementById('ptime');pp = document.getElementById('progress')ps = document.getElementById('schedule');updateHistory();}, false);// 开始录音var r = null,t = 0,ri = null,rt = null;function startRecord() {//outSet('开始录音：');console.log('开始录音：');r = plus.audio.getRecorder();if(r == null) {console.log('录音对象未获取')outLine('录音对象未获取');return;}r.record({filename: '_doc/audio/'//format: '3gp'}, function(p) {console.log('录音完成：' + p)outLine('录音完成：' + p);plus.io.resolveLocalFileSystemURL(p, function(entry) {//createItem(entry);addVoice(p, entry);}, function(e) {outLine('读取录音文件错误：' + e.message);});}, function(e) {outLine('录音失败：' + e.message);});er.style.display = 'block';t = 0;ri = setInterval(function() {t++;rt.innerText = timeToStr(t);}, 1000);} // 停止录音function stopRecord() {er.style.display = 'none';rt.innerText = '00:00:00';clearInterval(ri);ri = null;r.stop();w = null;r = null;t = 0;}// 清除历史记录function cleanHistory() {//hl.innerHTML = '<li id="empty" class="ditem-empty">无历史记录</li>';//le = document.getElementById('empty');// 删除音频文件outLine('清空录音历史记录：');gentry.removeRecursively(function() {// Successconsole.log('清空录音历史记录，操作成功！');outLine('清空录音历史记录，操作成功！');}, function(e) {console.log('清空录音历史记录，操作失败：' + e.message);outLine('清空录音历史记录，操作失败：' + e.message);});}// 获取录音历史列表function updateHistory() {if(bUpdated || !gentry || !document.body) { //兼容可能提前注入导致DOM未解析完更新的问题return;}var reader = gentry.createReader();reader.readEntries(function(entries) {for(var i in entries) {if(entries[i].isFile) {createItem(entries[i]);}}}, function(e) {outLine('读取录音列表失败：' + e.message);});bUpdated = true;}function outLine(msg) {$('#output').text(msg);}timeToStr = function(ts) {if(isNaN(ts)) {return "--:--:--";}var h = parseInt(ts / 3600);var m = parseInt((ts % 3600) / 60);var s = parseInt(ts % 60);return(ultZeroize(h) + ":" + ultZeroize(m) + ":" + ultZeroize(s));};ultZeroize = function(v, l) {var z = "";l = l || 2;v = String(v);for(var i = 0; i < l - v.length; i++) {z += "0";}return z + v;};function addVoice(path, entry) {console.log("entry = " + entry.name)console.log("上传前的文件名：" + entry.name);uploadVoice(path);}function uploadVoice(path) {console.log("开始上传：")var uploadUrl = "http://192.168.9.105:8860/v1/uploadDownload/uploadFile";var downUrl = "http://192.168.9.105:8860/v1/uploadDownload/downloadFile";var task = plus.uploader.createUpload(uploadUrl, {method: "POST"},function(t, status) { //上传完成if(status == 200) {var data = JSON.parse(t.responseText);console.log("上传成功,返回文件名为 ：" + data.data);outLine("文件上传成功：" + t.responseText);var v = $("<audio controls='controls' volume='1.0'/>");v.attr("src", downUrl + "?imageName=" + data.data);$("#v1").append(v);//上传下载成功之后要清除本地的录音文件cleanHistory();//startPlay(downUrl + "?imageName=" + data.data);/*plus.storage.setItem("uploader", t.responseText);var w = plus.webview.create("uploader_ret.html", "uploader_ret.html", {scrollIndicator: 'none',scalable: false});*//*w.addEventListener("loaded", function() {//wt.close();w.show("slide-in-right", 300);}, false);*/} else {outLine("上传失败：" + status);//wt.close();}});task.addData("client", "HelloH5+");task.addData("uid", getUid());/*for(var i = 0; i < files.length; i++) {var f = files[i];task.addFile(f.path, {key: f.name});}*/task.addFile(path, {key: "file"})task.start();}// 产生一个随机数function getUid() {return Math.floor(Math.random() * 100000000 + 10000000).toString();}// 播放文件相关对象var p = null,pt = null,pp = null,ps = null,pi = null;function startPlay(url) {//ep.style.display = 'block';//var L = pp.clientWidth;p = plus.audio.createPlayer(url);p.play(function() {outLine('播放完成！');// 播放完成/*pt.innerText = timeToStr(d) + '/' + timeToStr(d);ps.style.webkitTransition = 'all 0.3s linear';ps.style.width = L + 'px';stopPlay();*/}, function(e) {outLine('播放音频文件"' + url + '"失败：' + e.message);});// 获取总时长/*var d = p.getDuration();if(!d) {pt.innerText = '00:00:00/' + timeToStr(d);}*//*pi = setInterval(function() {if(!d) { // 兼容无法及时获取总时长的情况d = p.getDuration();}var c = p.getPosition();if(!c) { // 兼容无法及时获取当前播放位置的情况return;}pt.innerText = timeToStr(c) + '/' + timeToStr(d);var pct = Math.round(L * c / d);if(pct < 8) {pct = 8;}ps.style.width = pct + 'px';}, 1000);*/}// 停止播放function stopPlay() {clearInterval(pi);pi = null;setTimeout(resetPlay, 500);// 操作播放对象if(p) {p.stop();p = null;}}// 重置播放页面内容function resetPlay() {ep.style.display = 'none';ps.style.width = '8px';ps.style.webkitTransition = 'all 1s linear';pt.innerText = '00:00:00/00:00:00';}// 拍照function getImage() {outLine('开始拍照：');var cmr = plus.camera.getCamera();cmr.captureImage(function(p) {outLine('拍照成功：' + p);plus.io.resolveLocalFileSystemURL(p, function(entry) {//createItem(entry);uploadPhoto(p, entry);}, function(e) {outLine('读取拍照文件错误：' + e.message);});}, function(e) {outLine('失败：' + e.message);}, {filename: '_doc/camera/',index: 1});}// 录像function getVideo() {outLine('开始录像：');var cmr = plus.camera.getCamera();console.log("支持录制的视频格式：cmr.supportedVideoFormats====="+ cmr.supportedVideoFormats)cmr.startVideoCapture(function(p) {outLine('录像成功：' + p);plus.io.resolveLocalFileSystemURL(p, function(entry) {//createItem(entry);uploadVideo(p, entry);}, function(e) {outLine('读取录像文件错误：' + e.message);});}, function(e) {outLine('失败：' + e.message);}, {filename: '_doc/camera/',index: 1});}//上传图片function uploadImage() {console.log("开始上传图片");//var file = e.currentTarget.files[0];var uploadUrl = "http://192.168.9.105:8860/v1/uploadDownload/uploadFile";var downUrl = "http://192.168.9.105:8860/v1/uploadDownload/downloadFile";var pic = $('#uploadImage')[0].files[0];var fd = new FormData();//fd.append('uploadFile', pic);fd.append('file', pic);$.ajax({url: uploadUrl,type: "post",// Form数据data: fd,cache: false,contentType: false,processData: false,success: function(data) {console.log("the data is : {}", data);if(data.code == 0) {console.log("上传成功后的文件路径为：" + data.data);var img = $("<img />");img.attr("src", downUrl + "?imageName=" + data.data);img.width("160px");img.height("160px");$("#div_image").append(img);}}});}//上传拍照function uploadPhoto(path, entry) {console.log("开始上传拍照：");var uploadUrl = "http://192.168.9.105:8860/v1/uploadDownload/uploadFile";var downUrl = "http://192.168.9.105:8860/v1/uploadDownload/downloadFile";var task = plus.uploader.createUpload(uploadUrl, {method: "POST"},function(t, status) { //上传完成if(status == 200) {var data = JSON.parse(t.responseText);console.log("上传成功,返回文件名为 ：" + data.data);outLine("文件上传成功：" + t.responseText);//上传下载成功之后要清除本地的图片文件var img = $("<img />");img.attr("src", downUrl + "?imageName=" + data.data);img.width("160px");img.height("160px");$("#div_image").append(img);cleanHistory();} else {outLine("上传失败：" + status);//wt.close();}});task.addData("client", "HelloH5+");task.addData("uid", getUid());task.addFile(path, {key: "file"})task.start();}//上传录像function uploadVideo(path, entry) {console.log("开始上传录像：path="+path);var uploadUrl = "http://192.168.9.105:8860/v1/uploadDownload/uploadFile";var downUrl = "http://192.168.9.105:8860/v1/uploadDownload/downloadFile";var task = plus.uploader.createUpload(uploadUrl, {method: "POST"},function(t, status) { //上传完成if(status == 200) {var data = JSON.parse(t.responseText);console.log("上传成功,返回文件名为 ：" + data.data);outLine("文件上传成功：" + t.responseText);//上传下载成功之后要清除本地的图片文件var v = $("<video width='320' width='240' preload='auto' controls='controls'/>");v.attr("src", downUrl + "?imageName=" + data.data);//v.attr("src", path);//v.attr("id", data.data);$("#div_video").append(v);//cleanHistory();} else {outLine("上传失败：" + status);//wt.close();}});task.addData("client", "HelloH5+");task.addData("uid", getUid());task.addFile(path, {key: "file"})task.start();}function test1() {alert(537);}function uploadownTest(){}// 用户名登录$('#login').click(function(){console.log(4444444);//$("#f2").submit();var param ={'username':'jack','password':'jack'};$.ajax({type: 'POST',url: 'http://xx.xx.xx.xx:xx/login',//url: publicUrl+'/login',data: param,xhrFields: {withCredentials: true},crossDomain: true,success: function(data){console.log(data);if(data.data && data.data.success && data.data.userDetails.username){//window.location.href = "./index.html";outLine(data);}}})});// 用户名登出$('#logout').click(function(){$.ajax({type: 'POST',url: publicUrl+'/logout',xhrFields: {withCredentials: true},crossDomain: true,success: function(data){if((data.data && data.data) || data.code == 100){//window.location.href = "login.html";outLine(data);}}})});</script></html>2，实现拍照，录像，上传下载，播放,websocket连接
主要代码如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="HandheldFriendly" content="true" /><meta name="MobileOptimized" content="320" /><title>wechat</title><link rel="stylesheet" href="../css/common.css" type="text/css" charset="utf-8" /></head><body><header id="header"><div class="nvbt iback" οnclick="back()"></div><div class="nvtt">wechat</div><div class="nvbt idoc" οnclick="openDoc('Camera Document','/doc/camera.html')"></div></header><div id="dcontent" class="dcontent"><!--<div class="button" οnclick="changeIndex();">选择：<span id="display" style="color:#FF0000">主摄像头</span><div style="width:0px;height:0px;overflow:hidden;"><select id="index"><option value='1' selected="true">主摄像头</option><option value='2' >辅摄像头</option></select></div></div>--><div class="button" οnclick="getImage()">拍照</div><div class="button" οnclick="getVideo()">录像</div><div class="button" οnclick="downloadVideo()">下载</div><div class="button" οnclick="uploadAlbumPhoto()">选择相册照片上传</div><div class="button" οnclick="getLoginMsg()">获取登入信息</div><div class="button" οnclick="websocketTest()">websocket连接</div><label>输入信息：</label><input id="msgid" width="300px" height="100px"/><div class="button" οnclick="sendMsg()">发送消息</div><br/><br /><div id="div_video"></div><div id="websocket_div"></div><!-- History list --><ul id="history" class="dlist" style="text-align:left;"><li id="empty" class="ditem-empty">无历史记录</li></ul><br/><div class="button button-waring" οnclick="cleanHistory()">清空历史记录</div><br/></div><br /><div id="output">Camera管理摄像头设备，可用于拍摄照片、录制视频文件。</div></body><!--样式：--><!--js--><script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="../js/immersed.js"></script><script type="text/javascript" src="../js/sockjs.min.js"></script><!--<script type="text/javascript" src="../js/common.js"></script>--><script>var i = 1,gentry = null,w = null;var hl = null,le = null,de = null,ie = null;var unv = true;var bUpdated = false; //用于兼容可能提前注入导致DOM未解析完更新的问题var downloads = null;// H5 plus事件处理function plusReady() {// 获取摄像头目录对象plus.io.resolveLocalFileSystemURL('_doc/', function(entry) {entry.getDirectory('camera', {create: true}, function(dir) {gentry = dir;console.log("gentry=" + gentry);//updateHistory();}, function(e) {outSet('Get directory "camera" failed: ' + e.message);});}, function(e) {outSet('Resolve "_doc/" failed: ' + e.message);});}if(window.plus) {plusReady();} else {document.addEventListener('plusready', plusReady, false);}// 监听DOMContentLoaded事件document.addEventListener('DOMContentLoaded', function() {// 获取DOM元素对象hl = document.getElementById('history');le = document.getElementById('empty');de = document.getElementById('display');if(ie = document.getElementById('index')) {ie.onchange = indexChanged;}// 判断是否支持video标签unv = !document.createElement('video').canPlayType;//updateHistory();}, false);var ws = plus.webview.currentWebview();function back(hide) {if(plus) {ws || (ws = plus.webview.currentWebview());if(hide || ws.preate) {ws.hide('auto');} else {ws.close('auto');}} else if(history.length > 1) {history.back();} else {window.close();}};// 录像function getVideo() {outSet('开始录像：');var cmr = plus.camera.getCamera();cmr.startVideoCapture(function(p) {outLine('成功：' + p);console.log("录制视频成功，路径为：" + p);plus.io.resolveLocalFileSystemURL(p, function(entry) {//createItem(entry);playVideo(p, entry);}, function(e) {outLine('读取录像文件错误：' + e.message);});}, function(e) {outLine('失败：' + e.message);}, {filename: '_doc/camera/',index: i});}//播放视频function playVideo(path, entry) {console.log("entry.name=" + entry.name);console.log("entry.toLocalURL()=" + entry.toLocalURL());console.log("gentry.toLocalURL()=" + gentry.toLocalURL());var localUrl = encodeURI("http://192.168.9.105:8860/v1/uploadDownload/downloadFile?imageName=1510553721741.mp4");console.log(localUrl);//var localUrl = entry.toLocalURL();var v = $("<video width='400' height='320' preload='auto' controls='controls' type='video/mp4'/>");v.attr("src", localUrl);$("#div_video").append(v);/*if(w) {outLine('重复点击！');return;}if(!entry) {ouSet('无效的媒体文件');return;}var name = entry.name;var suffix = name.substr(name.lastIndexOf('.'));var url = '';if(suffix == '.mov' || suffix == '.3gp' || suffix == '.mp4' || suffix == '.avi') {//if(unv){plus.runtime.openFile('_doc/camera/'+name);return;}url = '/plus/camera_video.html';} else {url = '/plus/camera_image.html';}w = plus.webview.create(url, url, {hardwareAccelerated: true,scrollIndicator: 'none',scalable: true,bounce: 'all'});w.addEventListener('loaded', function() {w.evalJS('loadMedia("' + entry.toLocalURL() + '")');//w.evalJS('loadMedia("'+'http://localhost:13131/_doc/camera/'+name+'")');}, false);w.addEventListener('close', function() {w = null;}, false);w.show('pop-in');*/}function outSet(msg) {$('#output').text(msg);}function outLine(msg) {$('#output').text(msg);}function downloadVideo() {console.log("进行下载......");var downloadUrl = "http://192.168.9.105:8860/v1/uploadDownload/downloadFile?imageName=1510556514121.mp4";var dtask = plus.downloader.createDownload(downloadUrl, {filename: '_doc/camera/',priority: 90}, function(d, status) {// 下载完成if(status == 200) {console.log("下载视频成功.....");//视频下载到本地后的真实路径var sd_path = plus.io.convertLocalFileSystemURL(d.filename);console.log("sd_path=" + sd_path);console.log("filename is : " + d.filename);var v = $("<video width='400' height='320' preload='auto' controls='controls' type='video/mp4'/>");v.attr("src", sd_path);$("#div_video").append(v);} else {console.log("下载视频失败....." + status)}});//dtask.addEventListener( "statechanged", onStateChanged, false );dtask.start();}function uploadAlbumPhoto() {}//websocket 操作：var websocket;function websocketTest() {var websocketUrl = "ws://192.168.9.105:8860/webSocketServer?topic=jack1,jack2,chat";if('WebSocket' in window) {console.log("222");websocket = new WebSocket(websocketUrl);console.log("3333");} else if('MozWebSocket' in window) {websocket = new MozWebSocket("ws://" + document.location.host + "/webSocketServer");} else {websocket = new SockJS("http://" + document.location.host + "/sockjs/webSocketServer");}websocket.onopen = function(event) {console.log("onopen----", event.data);};websocket.onmessage = function(event) {//var e= event|| window.event;//$("#test").html(evnt.data);//console.log(event);//var data = event.data;console.log("onmessage----", event.data);$("#websocket_div").append('<div>' + event.data + '</div>');};websocket.onerror = function(event) {console.log("onerror----", event.data);}websocket.onclose = function(event) {console.log("onclose----", event.data);}}function sendMsg() {if(websocket.readyState == websocket.OPEN) {var msg = $('#msgid').val();//调用后台handleTextMessage方法var json = {"msg": msg,"type": "chat"};//websocket.send(msg);websocket.send(JSON.stringify(json));} else {alert("连接失败!");}}function getLoginMsg() {var publicUrl = "http://192.168.9.105:8865";$.ajax({type: 'GET',url: publicUrl + '/station-user/v1/session/sessionInfo',xhrFields: {withCredentials: true},crossDomain: true,success: function(data) {console.log(data);$("#websocket_div").append('<div>' + JSON.stringify(data) + '</div>');}})}</script></html>代码有点乱，主要是实现功能，使用h5plus的功能，调用手机的功能，实现原生app的效果，使用hbuilder打包apk到手机上运行，查看效果。
利用前端技术，快速开发原生app，降低学习成本，加速开发。
h5+实现手机端的录音，拍照，录像相关推荐
- h5实现手机端等级进度条
h5实现等级进度条 需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: ...
- 大佬H5网页手机端怎么应用微信快捷登陆?
现在碰到这样一个问题,我PC端微信快捷登录已经实现,是扫码授权登陆,但是我们网站有手机端访问地址,类似于京东手机访问版本,是H5的形式,不是 APP,现在登陆这块也想弄一个微信快捷登陆,目前我在微信开 ...
- 手机端调取相册拍照压缩上传到阿里云2
手机端app+mui+多个图片选取 1.html <!DOCTYPE html> <html><head><meta charset="utf-8& ...
- h5 /web 手机端 实现保存图片 到本地相册 uni-app
文章目录 首先,必须得知道的事情是: uni-app中是有保存图片到本地相册的api的:但是h5并不适用 手机浏览器长按图片会出现保存图片的按钮直接进行保存图片,甚至在微信中还可以进行扫一扫 H5Pl ...
- 220多款H5的手机端小游戏源码下载 - html+javascript 开发网页小游戏开源源码大合集
演示端:http://game.tutou.wang/ (手机访问) 需要做二次开发或者游戏开发的自行下载. 链接:https://pan.baidu.com/s/1kOOagUC1N6KnKBRK ...
- h5页面手机端适配头
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, ...
- 手机端本地图片或者拍照的上传功能
原文连接 https://blog.csdn.net/m0_37852904/article/details/78550136 ------------------------------------ ...
- 移动端html5广告的优势,h5手机端开发的优势都有哪些呢
原标题:h5手机端开发的优势都有哪些呢 现在是手机不离手的时代,可以说每个人都有一部甚至两部手机来打发日常的空余时间,那么你知道h5手机端开发的优势都有哪些吗?下面原创先锋小编给大家详细介绍下,想要了 ...
- PHP响应式H5图片网盘外链系统源码 自适应PC手机端
介绍: PHP响应式H5图片网盘外链系统源码 自适应PC手机端 支持图片违规检测 网盘与外链分享步伐,撑持一切格局文件的上传,可以天生文件外链.图片外链.音乐视频外链,天生外链同时主动天生响应的UBB ...
最新文章
- 掌握神经网络，我应该学习哪些至关重要的知识点？
- python学习06
- js获取request中的值_基于node.js的开发框架 — Koa
- 打造人脉不如打造自己
- KMP算法的C++实现
- MongoDB密码设置（基于windows）
- 使用@AspectJ注解开发Spring AOP
- sql server里执行delete或者update操作产生大量事务日志，导致空间不够，执行失败，能不能设置此类动作时不生成事务日志的...
- 小米mini路由器刷固件
- 密码学应用（二）访问控制
- 影响GPS定位精度的基本概念
- Shell语言(一)
- 使用case when,union all实现sql行转列、列转行
- Flask-peewee-pyjwt实现简单的用户接口
- 销售人员应关注的 5 个指标
- 浏览器硬件检测原生js检测是否支持 视屏 音频能力
- L2-001. 紧急救援 （dijkstra算法）
- 丰田公司的精益生产的精髓是什么？
- FPGA硬核和软核处理器的区别~
- S/HIC 系列软件：partialS/HIC 利用 CNN 识别 不完全软/硬 清扫