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