您的位置：首页 > Web前端 > HTML5

详解HTML5 使用video标签实现选择摄像头功能

2017-10-25 14:27 841 查看

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

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： HTML5 video

相关文章推荐

新的分享

章节导航