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