我要评论详解html5 使用video标签实现选择摄像头功能
1. html
// jquery reference
// <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
//
<input type="hidden" name="imgvalue" id="imgvalue" />
<button id="btnopen1" class="btn btn-default" type="button" >open webcam</button>
<select id="videosource" ></select>
<div id="vdoone" style="display:none">
<video id="video" style="margin-top:15px;margin-bottom:15px;" width="300" autoplay></video>
<canvas id="canvaspreview" style="margin-top:15px;" width="300" height="224"></canvas>
<canvas id="canvasupload" style="display:none;" width='300' height='224'></canvas>
<button id="snap" class="btn btn-default" type="button">snap photo</button>
</div>
2. javascript
<script>
//// elements for taking the snapshot
var canvaspreview = document.getelementbyid('canvaspreview');
var canvasupload = document.getelementbyid('canvasupload');
var contextpreview = canvaspreview.getcontext('2d');
var contextupload = canvasupload.getcontext('2d');
//#################### video source #######################3
var videoelement = document.queryselector('video');
var videoselect = document.queryselector('select#videosource');
navigator.mediadevices.enumeratedevices()
.then(gotdevices).then(getstream).catch(handleerror);
videoselect.onchange = getstream;
function gotdevices(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 ||
'camera ' +
(videoselect.length + 1);
videoselect.appendchild(option);
} else {
console.log('found ome other kind of source/device: ', deviceinfo);
}
}
}
var _streamcopy = null;
function getstream() {
if (_streamcopy != null) {
try {
_streamcopy.stop(); // if this method doesn't exist, the catch will be executed.
} catch (e) {
_streamcopy.getvideotracks()[0].stop(); // then stop the first video track of the stream
}
}
var constraints = {
audio:false,
video: {
optional: [
{
sourceid: videoselect.value
}
]
}
};
navigator.mediadevices.getusermedia(constraints).then(gotstream).catch(handleerror);
}
function gotstream(stream) {
_streamcopy = stream; // make stream available to console
videoelement.srcobject = stream;
}
function handleerror(error) {
alert(error.name + ": " + error.message);
}
//######################## end video source #################
// get access to the camera!
if (navigator.mediadevices && navigator.mediadevices.getusermedia) {
navigator.mediadevices.getusermedia({ video: true }).then(function(stream) {
videoelement.src = window.url.createobjecturl(stream);
videoelement.play();
});
} else {
document.getelementbyid("pnlvideo1").style.display = "none";
}
//// trigger photo take
document.getelementbyid("snap").addeventlistener("click",
function() {
contextpreview.drawimage(videoelement, 0, 0, 300, 224);
contextupload.drawimage(videoelement, 0, 0, 300, 224);
document.getelementbyid("video").style.display = "none";
document.getelementbyid("snap").style.display = "none";
document.getelementbyid("canvaspreview").style.display = "block";
var image = document.getelementbyid("canvasupload").todataurl("image/jpeg");
image = image.replace('data:image/jpeg;base64,', '');
$("#imgvalue").val(image);
alert("image value :" + image);
});
//// trigger photo take
document.getelementbyid("btnopen1").addeventlistener("click",
function() {
document.getelementbyid("vdoone").style.display = "block";
document.getelementbyid("video").style.display = "block";
document.getelementbyid("snap").style.display = "block";
document.getelementbyid("canvaspreview").style.display = "none";
});
</script>
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论