• 新记

    • 如何html5在浏览器里访问手机后置摄像头

    如题所述

    举报该文章
    相关建议   2016-04-14

    html5需要使用接口chrome30+ for android 已经实现了利用webcam，调用手机后置摄像头，代码如下：

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>HTML5 GetUserMedia Demo</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    </head>
    <body>
        <input type="button" title="开启摄像头" value="开启摄像头" onclick="getMedia();" /><br />
        <video height="120px" autoplay="autoplay"></video><hr />
        <input type="button" title="拍照" value="拍照" onclick="getPhoto();" /><br />
        <canvas id="canvas1" height="120px" ></canvas><hr />
        <input type="button" title="视频" value="视频" onclick="getVedio();" /><br />
        <canvas id="canvas2" height="120px"></canvas>

        <script type="text/javascript">
            var video = document.querySelector('video');
            var audio, audioType;

            var canvas1 = document.getElementById('canvas1');
            var context1 = canvas1.getContext('2d');

            var canvas2 = document.getElementById('canvas2');
            var context2 = canvas2.getContext('2d');

            navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
            window.URL = window.URL || window.webkitURL || window.mozURL || window.msURL;

            var exArray = []; //存储设备源ID
            MediaStreamTrack.getSources(function (sourceInfos) {
                for (var i = 0; i != sourceInfos.length; ++i) {
                    var sourceInfo = sourceInfos[i];
                    //这里会遍历audio,video，所以要加以区分
                    if (sourceInfo.kind === 'video') {
                        exArray.push(sourceInfo.id);
                    }
                }
            });

            function getMedia() {
                if (navigator.getUserMedia) {
                    navigator.getUserMedia({
                        'video': {
                            'optional': [{
                                'sourceId': exArray[1] //0为前置摄像头，1为后置
                            }]
                        },
                        'audio':true
                    }, successFunc, errorFunc);    //success是获取成功的回调函数
                }
                else {
                    alert('Native device media streaming (getUserMedia) not supported in this browser.');
                }
            }

            function successFunc(stream) {
                //alert('Succeed to get media!');
                if (video.mozSrcObject !== undefined) {
                    //Firefox中，video.mozSrcObject最初为null，而不是未定义的，我们可以靠这个来检测Firefox的支持
                    video.mozSrcObject = stream;
                }
                else {
                    video.src = window.URL && window.URL.createObjectURL(stream) || stream;
                }

                //video.play();

                // éŸ³é¢‘
                audio = new Audio();
                audioType = getAudioType(audio);
                if (audioType) {
                    audio.src = 'polaroid.' + audioType;
                    audio.play();
                }
            }
            function errorFunc(e) {
                alert('Error！'+e);
            }

            
            // å°†è§†é¢‘帧绘制到Canvas对象上,Canvas每60ms切换帧，形成肉眼视频效果
            function drawVideoAtCanvas(video,context) {
                window.setInterval(function () {
                    context.drawImage(video, 0, 0,90,120);
                }, 60);
            }

            //获取音频格式
            function getAudioType(element) {
                if (element.canPlayType) {
                    if (element.canPlayType('audio/mp4; codecs="mp4a.40.5"') !== '') {
                        return ('aac');
                    } else if (element.canPlayType('audio/ogg; codecs="vorbis"') !== '') {
                        return ("ogg");
                    }
                }
                return false;
            }

            // vedio播放时触发，绘制vedio帧图像到canvas
    //        video.addEventListener('play', function () {
    //            drawVideoAtCanvas(video, context2);
    //        }, false);

            //拍照
            function getPhoto() {
                context1.drawImage(video, 0, 0,90,120); //将video对象内指定的区域捕捉绘制到画布上指定的区域，实现拍照。
            }

            //视频
            function getVedio() {
                drawVideoAtCanvas(video, context2);
            }

        </script>
    </body>
    </html>

    HTML5 The Media Capture API提供了对摄像头的可编程访问，用户可以直接用getUserMedia获得摄像头提供的视频流。但实际上用html5调用手机摄像头存在很多问题：
    1）谷歌的发布的Chrome到了21版本后，才新增了一个用于高质量视频音频通讯的getUserMedia API，该API允许Web应用程序访问摄像头和麦克风,其他手机浏览器只有opera支持html5调用本地拍照功能
    2）两个浏览器均不支持访问多个摄像头：chrome不支持访问后置摄像头，pera支持访问后置摄像头的

    温馨提示：内容为网友见解，仅供参考
    其他看法
    第1个回答  2016-04-06
    如果是在手机浏览器上运行的，直接使用input type=file标签可以调用摄像头，文件夹那些。如果是嵌在webview里面的话，file标签被禁用，需要安卓改写openFileChooser的相关方法，具体可以看这个文章http://my.oschina.net/aicoding/blog/90689
    第2个回答  2018-06-27
    　我也是后来才发现，chrome好像不支持访问后置摄像头，不知道怎么回事，但firefox和opera是支持访问后置摄像头的，你可以试试本回答被网友采纳
    第3个回答  2016-03-18
    　　我也是后来才发现，chrome好像不支持访问后置摄像头，不知道怎么回事，但firefox和opera是支持访问后置摄像头的，你可以试试
    相似回答
    大家正在搜
    相关问题
    如何html5在浏览器里访问手机后置摄像头
    如何html5在浏览器里访问手机后置摄像头
    如何html5在浏览器里访问手机后置摄像头
    如何html5在浏览器里访问手机后置摄像头
    如何html5在浏览器里访问手机后置摄像头
    html5页面怎么在手机浏览器里面可以打开手机摄像头
    如何html5在浏览器里访问手机后置摄像头
    html5可以调手机端的摄像头吗