详解HTML5使⽤video标签实现选择摄像头功能详解HTML5 使⽤video标签实现选择摄像头功能
1. html
// jquery reference
// <script src="leapis/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" >
<video id="video" width="300" autoplay></video>
<canvas id="canvasPreview" width="300" height="224"></canvas>
<canvas id="canvasUpload" 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 = ElementById('canvasPreview');
var canvasUpload = ElementById('canvasUpload');
var contextPreview = Context('2d');
var contextUpload = Context('2d');
//>>>> Video Source >>>>###3
var videoElement = document.querySelector('video');
var videoSelect = document.querySelector('select#videoSource');
.then(gotDevices).then(getStream).catch(handleError);
function gotDevices(deviceInfos) {
for (var i = 0; i < deviceInfos.length; ++i) {
var deviceInfo = deviceInfos[i];
var option = ateElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'videoinput') {
< = 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) {
_VideoTracks()[0].stop(); // then stop the first video track of the stream }
}
var constraints = {
audio:false,
video: {
optional: [
{
sourceId: videoSelect.value
}navigator标签
]
}
};
function gotStream(stream) {
_streamCopy = stream; // make stream available to console
videoElement.srcObject = stream;
}
function handleError(error) {
alert(error.name + ": " + ssage);
}
//>>>>#### End Video Source >>>##
// Get access to the camera!
if (diaDevices && UserMedia) {
videoElement.src = ateObjectURL(stream);
videoElement.play();
});
} else {
}
//// Trigger photo take
function() {
contextPreview.drawImage(videoElement, 0, 0, 300, 224);
contextUpload.drawImage(videoElement, 0, 0, 300, 224);
var image = ElementById("canvasUpload").toDataURL("image/jpeg");
image = place('data:image/jpeg;base64,', '');
$("#imgValue").val(image);
alert("image value :" + image);
});
//// Trigger photo take
function() {
});
</script>
如有疑问请留⾔或者到本站社区交流讨论，感谢阅读，希望能帮助到⼤家，谢谢⼤家对本站的⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
matlab与s7-PLC的连接
« 上一篇
mercury教程
下一篇 »
发表评论