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="width: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>