• JS操作摄像头


            <script src="javascript/jquery-1.9.1.min.js"></script>
    
    
    
    
    
    
            
    
    
    
    
            <fieldset>
        <legend>第一步:读取户口本</legend>
    
             <button id="btnOpen2" class="btn  btn-flat btn-primary" type="button" >打开摄像头</button>   
    	
              可用摄像头<select id="videoSource2" class="form-control" style="200px; display:inline-block" ></select>
         
    
             	<button id="snap2" class="btn  btn-success btn-flat" style="display:none" type="button">拍照</button>
             
             
             
             <br />
     
          
    
    
             
    	<div id="vdoOne2" style="display:none">
    		<video id="video2" style="margin-top:15px;margin-bottom:15px;" width="350"   autoplay></video>
    		<canvas id="canvasPreview2" style="margin-top:15px;" width="350" height="255"></canvas>
    		<canvas id="canvasUpload2" style="display:none;" width='350' height='255'></canvas>
    	
    	</div>
    
    
             <script>
             var videoSelect2 = document.getElementById('videoSource2');
             var videoElement2 = document.getElementById('video2');
                 
            var canvasPreview2 = document.getElementById('canvasPreview2');
            var canvasUpload2 = document.getElementById('canvasUpload2');
            var contextPreview2 = canvasPreview2.getContext('2d');
            var contextUpload2 = canvasUpload2.getContext('2d');
    
    
          //  navigator.mediaDevices.enumerateDevices().then(gotDevices).then(getStream).catch(handleError);
            videoSelect2.onchange = getStream2;
    
    
            function gotDevices2(deviceInfos) {
    
                for (var i = 0; i < deviceInfos.length; ++i) {
                    var deviceInfo = deviceInfos[i];
                    var option = document.createElement('option');
                    option.value = deviceInfo.deviceId;
                    if (deviceInfo.kind === 'videoinput') {
                        option.text = deviceInfo.label ||     '摄像头 ' + (videoSelect2.length + 1);
                        videoSelect2.appendChild(option);
                    } else {
                        console.log('Found ome other kind of source/device: ', deviceInfo);
                    }
                }
     
    
    
    
            }
    
    
    
            var _streamCopy2 = null;
            function getStream2() {
                if (_streamCopy2 != null) {
                    try {
                        _streamCopy2.stop(); // if this method doesn't exist, the catch will be executed.
                    } catch (e) {
                        _streamCopy2.getVideoTracks()[0].stop(); // then stop the first video track of the stream
                    }
                }
    
                var constraints2= {
                    audio: false,
                    video: {
                        optional: [
                            {
                                sourceId: videoSelect2.value
                            }
                        ]
                    }
                };
    
                navigator.mediaDevices.getUserMedia(constraints2).then(gotStream2).catch(handleError2);
            }
    
    
            function gotStream2(stream) {
                _streamCopy2 = stream; // make stream available to console
                videoElement2.srcObject = stream;
            }
    
    
            function handleError2(error) {
                alert(error.name + ": " + error.message);
            }
    
    
    
    
    
            $("#btnOpen2").click(
        function () {
    
            navigator.mediaDevices.enumerateDevices().then(gotDevices2).then(getStream2).catch(handleError2);
    
    
            $("#vdoOne2").css("display", "block");
            $("#video2").css("display", "block");
            $("#snap2").css("display", "inline-block");
            $("#canvasPreview2").css("display", "none");
    
             
        });
    
    
    
    
    
            $("#snap2").click(
       function () {
    
           var _h = $("#canvasPreview2").prop("height");
     
           contextPreview2.drawImage(videoElement2, 0, 0, 350, _h);
           contextUpload2.drawImage(videoElement2, 0, 0, 350, _h);
          
           $("#video2").css("display", "none");
           $("#snap2").css("display", "none");
           $("#canvasPreview2").css("display", "block");
    
           var image = document.getElementById("canvasUpload2").toDataURL("image/jpeg");
           image = image.replace('data:image/jpeg;base64,', '');
    
    
    
           if (_streamCopy2 != null) {
               try {
                   _streamCopy2.stop(); // if this method doesn't exist, the catch will be executed.
               } catch (e) {
                   _streamCopy2.getVideoTracks()[0].stop(); // then stop the first video track of the stream
               }
    
           }
    
          // $("#img_base64_2").val(image);
           //$.post("face_id_img_Save.aspx", { data: image, filename: $("#hf_snapname").val() });
            
       });
    
    
    
    
    
    
              </script>
    
  • 相关阅读:
    【转】NHibernate主键类型介绍
    【转】NHibernate 各种数据库配置
    NHibernate常见错误
    NHibernate 设置主键不自增长
    Oracle 同名字段的该行数据按照创建时间最新的隐藏其他
    不用第三个变量就能交换两个变量值的五个方法
    Java IO 要点总结
    Java API 各个包的内容解释
    Ways to 优化JAVA程序设计和编码,提高JAVA性能
    Java菜鸟入坑学习要点
  • 原文地址:https://www.cnblogs.com/mqingqing123/p/11158390.html
Copyright © 2020-2023  润新知