h5+实现手机端的录音，拍照，录像

最新推荐文章于 2025-06-08 09:04:41 发布
最新推荐文章于 2025-06-08 09:04:41 发布
阅读量7.9k 收藏 14
点赞数 2
分类专栏： html5 html js css 文章标签： h5 html js HTML5 app

使用h5+即h5plus可以实现调用手机的功能实现语音的录制播放，图片上传下载，拍照，录像的功能，并提供上传下载的功能。开发工具使用hbuilder，该开发工具有模板和demo可以参考实现快速的开发app功能。使用h5调用硬件的功能，实现原生的效果，前端开发app周期短，开发速度快，入门门槛低，hbuilder还提供了一个mui库，可以实现很多手机原生ui的效果。

上传下载参考：https://download.youkuaiyun.com/download/zhangrui_web/10975872

       

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;" onclick="startRecord()">开始录音</button>        
            <!--<button style="width: 150px;height: 80px;color: red;" onclick="outLine();">开始录音22</button>-->        
            <button style="width: 150px;height: 80px;color: red;" onclick="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;" onchange="uploadImage();">
        <!--<input type="button" id="uploadPicButton" value="上传" onclick="uploadImage()">-->
        <br /><br />
        <div id="div_image">
 
        </div>
        <br />
        <hr color="red" />
        <br />
        <div class="button" onclick="getImage()">拍照</div>
        <br /><br /><br />
        <div class="button" onclick="getVideo()">录像</div>
        <br /><br />
        <div class="button" id="login">登入</div>
        <br />
        <div class="button" id="logout">登出</div>
        <br />
        <div class="button" onclick="uploadownTest()">下载测试</div>
        <!--<label>视频上传：</label><input type="file" name="uploadVideo" accept="video/*" capture="camcorder" id="uploadVideo" style="margin-bottom:10px;" onchange="uploadVideo();" />-->
        <!--<input type="button" id="uploadPicButton" value="上传" onclick="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" onclick="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" onclick="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() {
                // Success
                console.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" onclick="back()"></div>
			<div class="nvtt">wechat</div>
			<div class="nvbt idoc" onclick="openDoc('Camera Document','/doc/camera.html')"></div>
		</header>
		<div id="dcontent" class="dcontent">
			<!--<div class="button" onclick="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" onclick="getImage()">拍照</div>
			<div class="button" onclick="getVideo()">录像</div>
			<div class="button" onclick="downloadVideo()">下载</div>
			<div class="button" onclick="uploadAlbumPhoto()">选择相册照片上传</div>
			<div class="button" onclick="getLoginMsg()">获取登入信息</div>
			<div class="button" onclick="websocketTest()">websocket连接</div>
			<label>输入信息：</label><input id="msgid" width="300px" height="100px"/>
			<div class="button" onclick="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" onclick="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，降低学习成本，加速开发。

vue3 - 实现移动端H5网页调用手机相册选取图片或打开摄像头相机拍照上传，H5调用本地相册/相机上传图片详细教程，如何在h5网站浏览器中打开本机相册或相机选择相片（附图片压缩功能及上传服务器示例）
高级前端工程师
11-02 1万+
vue3手机H5网页，调起安卓苹果ios手机相册和相机，H5实现调用手机摄像头相册实现图片压缩预览删除，vue3项目调用摄像头和相册，H5调用手机摄像头，vue3 H5拍照上传，手机网站浏览器移动端调取相机或相册，实现拍照上传功能，解决苹果ios手机无法打开相册相机问题，无法唤起摄像头怎么办，调取本机系统的相册，vue3 h5网页调用相机拍照和相册，实现多张图片上传功能，实时拍照上传，VUE3如何唤起手机摄像头拍照上传，H5调起手机端的摄像头，html5调用手机摄像头，实现H5调起手机相机和相册，图片压缩，
php 如何在h5页面中调取手机摄像头,HTML5如何在手机端调用相机？
weixin_39814454的博客
03-12 785
input调用设备录像HTML5官方文档解释：capture属性用于调用设备的摄像头或麦克风。当accept=”audio/或video/”时capture只有两种值，一种是user，用于调用面向人脸的摄像头(例如手机前置摄像头)，一种是environment，用于调用环境摄像头(例如手机后置摄像头)。当accept=”audio”时，只要有capture就调用设备麦克风，忽略user和envir...
h5+实现手机端的录音，拍照，录像App
02-26
该demo使用h5+的功能基于android手机实现了录音，拍照，录像并进行上传下载，播放的功能，采用h5开发移动app，理论是支持android和ios的开发，开发工具采用hbuilder，利用hbuilder打包app在android机上运行，目前只测试了android机
Recorder H5 快速入门指南：从零开始实现网页录音功能
最新发布
gitblog_00002的博客
06-08 529
Recorder H5 快速入门指南：从零开始实现网页录音功能 一、项目概述 Recorder H5 是一个功能强大的网页端音频录制库，它基于HTML5的Web Audio API和MediaRecorder API实现，能够在现代浏览器中轻松实现音频录制功能。该库具有以下核心特点： 跨平台支持：兼容PC端和移动端（Android/iOS 14.3+） 多格式输出：支持MP3、WAV等多种音频格...
h5打开麦克风权限录音_通过H5实现html页面的录音和播放 （Recorder用于html5录音）...
weixin_39603050的博客
12-19 2297
varrec;/**调用open打开录音请求好录音权限**/var recOpen=function(success){//一般在显示出录音按钮或相关的录音界面时进行此方法调用，后面用户点击开始录音时就能畅通无阻了rec=Recorder({type:"mp3",sampleRate:16000,bitRate:16 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数...
h5 录音功能的实现
12-18
h5录音功能通过收集实现基于https的运行，对于http会报错
H5页面嵌入APP录音功能方案
哈喽234的博客
07-11 2784
安卓，ios开发提供对应原生录音方法，H5开发人员进行对接录音功能模块，最终语音录入功能在App能够正常使用。
手机端录音拍照录像App开发实践
标题中提到了“h5+实现手机端的录音，拍照，录像App”，这里面涉及的技术点主要包括： 1. **H5+（HTML5+）**: 这是一个由W3C提出的概念，旨在通过增强的HTML5、CSS3和JavaScript技术实现更加丰富的移动设备应用程序...
android 录音+录像DEMO
03-19
这个"android 录音+录像DEMO"提供了一个示例代码，帮助开发者理解如何实现这一功能，特别是在调用前置摄像头方面。以下是对这个DEMO涉及的关键知识点的详细解释。 1. **Android多媒体框架**： Android系统提供了...
html5 getusermedia api,html5 – 与getUserMedia / Web Audio API同步播放和录制音频
weixin_42525601的博客
07-16 372
我目前正在为音乐家开发基于网络的协作录制平台,类似于移植到网络上的基本DAW(具有额外的社交/共享功能).无论如何,我的目标是让它100％无闪存,所以我一直在阅读很多关于HTML5的内容,特别是Web Audio API(this书帮了很多,顺便说一下).为了使用getUserMedia()记录来自用户麦克风的音频,我制作了自定义版本RecorderJS.简而言之,我将getUserMedia()...
html5+js实现手机录音功能，支持微信等80%的浏览器内核
12-24
支持大部分已实现getUserMedia的浏览器，包括腾讯Android X5内核(QQ、微信)。 录音默认输出mp3格式，另外可选wav格式（此格式录音文件超大）；有限支持ogg(beta)、webm(beta)格式；支持任意格式扩展（前提有相应编码器）。 mp3默认16kbps的比特率，2kb每秒的录音大小，音质还可以（如果使用8kbps可达到1kb每秒，不过音质太渣）。 mp3使用lamejs编码，压缩后的recorder.mp3.min.js文件150kb左右（开启gzip后54kb）。如果对录音文件大小没有特别要求，可以仅仅使用录音核心 wav编码器，源码不足300行，压缩后的recorder.wav.min.js不足4kb。
H5解决录音
09-07
于Chrome47以上以及QQ浏览器需要HTTPS的支持，所以烦请更换至360、FF、Edge进行体验，另IE和Safari全版本不支持录音功能
h5 如何录音保存上传_H5进行录音，播放，上传
weixin_42469749的博客
02-01 784
(function (window) {//兼容window.URL = window.URL || window.webkitURL;navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserM...
uniapp中实现H5录音和上传、实时语音识别（兼容App小程序）和波形可视化
热门推荐
高坚果兄弟
01-10 1万+
在uniapp中使用Recorder-UniCore插件可以实现跨平台录音功能，uniapp自带的recorderManager接口不支持H5、录音格式和实时回调onFrameRecorded兼容性不好，用Recorder插件可避免这些问题。支持vue2、vue3、nvue，支持已有的大部分录音格式：mp3、wav、pcm、amr、ogg、g711a、g711u等
H5+系列（一）调用录音以及部分io…
qq_37320586的博客
02-20 6173
Audio模块用于提供音频的录制和播放功能，可调用系统的麦克风设备进行录音操作，也可调用系统的扬声器设备播放音频文件。通过plus.audio获取音频管理对象 1，开始录音 function startRecord(){ r = plus.audio.getRecorder();//获取当前设备的录音对象  if ( r == null ) {   ;   return;  }  r.recor
H5网页实现录音并转换为文字
BXA
03-03 9021
FileInputStream前言小结 前言      今 小结       荣幸与您分享~
h5调用手机相机和录音机_H5调用照相机等设备
weixin_29421565的博客
01-26 542
使用input标签 type值为file，可以调用系统默认的照相机、相册、摄像机、录音功能：属性说明accept打开的系统文件目录capture系统所捕获的默认设备，camera：照相机；camcorder：摄像机；microphone：录音；multiple多选，multiple优先级高于capture，测试发现存在很多兼容性问题，下面将测试出的部分结果列出：设备安卓IOScamera相机、图库...
uniapp实现h5录音功能
2201_75327999的博客
05-24 972
uniapp的h5端uni.getRecorderManager无法使用，使用navigator解决该问题，实现录音
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值