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>