码迷,mamicode.com
首页 > Web开发 > 详细

html获取摄像头拍照(优先获取后摄像头)

时间:2019-08-01 09:57:41      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:tle   list   raw   fir   后台   区分   ||   string   访问   

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title> 设备管理后台</title>
</head>
<body >

        <div >
            <!-- 内容主体区域 -->

            <div >
                <video id="video" width="480" height="320" controls></video>
                </div>
            <div >
               <input type="button" id="capture" value="拍照"/>
            </div>
            <div  >
                 <canvas id="canvas" width="480" height="480"></canvas>
   </div>


        </div>

</body>
</html>

<script>
    window.onload = function () {

        //访问用户媒体设备的兼容方法

        function getUserMedia(constraints, success, error) {

            if (navigator.mediaDevices.getUserMedia) {

                //最新的标准API

                navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);

            } else if (navigator.webkitGetUserMedia) {

                //webkit核心浏览器

                navigator.webkitGetUserMedia(constraints, success, error)

            } else if (navigator.mozGetUserMedia) {

                //firfox浏览器

                navigator.mozGetUserMedia(constraints, success, error);

            } else if (navigator.getUserMedia) {

                //旧版API

                navigator.getUserMedia(constraints, success, error);

            }

        }

        /*

        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);

        }

        }

        });

        */



        let video = document.getElementById(‘video‘);

        let canvas = document.getElementById(‘canvas‘);

        let context = canvas.getContext(‘2d‘);



        function success(stream) {

            //兼容webkit核心浏览器

            let CompatibleURL = window.URL || window.webkitURL;

            //将视频流设置为video元素的源

            //   console.log(stream);



            //video.src = CompatibleURL.createObjectURL(stream);

            video.srcObject = stream;

            video.play();

        }



        function error(error) {

            console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);

        }



        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {

            if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {

                console.log("enumerateDevices() not supported.");

                return;

            }



            // 列出摄像头和麦克风

            var exArray = [];

            navigator.mediaDevices.enumerateDevices()

                .then(function (devices) {

                    devices.forEach(function (device) {

                        //   console.log(device.kind + ": " + device.label +

                        //       " id = " + device.deviceId);

                        if (device.kind == "videoinput") {

                            //   alert(device.label);

                            exArray.push(device.deviceId);

                        }

                    });



                    var mediaOpts = { video: { width: 420, height: 120 } };

                    var mediaOpts =

                    {

                        video:

                        {

                            deviceId: { exact: exArray[1] }

                        }

                    };

                    //调用用户媒体设备, 访问摄像头

                    getUserMedia(mediaOpts, success, error);

                })

                .catch(function (err) {

                    console.log(err.name + ": " + err.message);

                });

        } else {

            alert(‘不支持访问用户媒体‘);

        }

        var img = new Image();

        document.getElementById(‘capture‘).addEventListener(‘click‘, function () {

            context.drawImage(video, 0, 0, 480, 320);

            var image_data = context.getImageData(0, 0, 480, 320);
            // var string = OCRAD(image_data.data);

            // string = _arrayBufferToBase64(image_data);

            var image = new Image();
            image.src = canvas.toDataURL("image/jpeg");
            // return image;

            //   alert(image.src);

        })

    }


</script>

  

html获取摄像头拍照(优先获取后摄像头)

标签:tle   list   raw   fir   后台   区分   ||   string   访问   

原文地址:https://www.cnblogs.com/fyssl/p/11280449.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!