詳解HTML5 使用video標簽實現選擇攝像頭功能

1. html

// jquery reference

//

//

Open WebCam

Snap Photo

2. javascript

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

});

如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

本條技術文章來源于互聯網，如果無意侵犯您的權益請點擊此處反饋版權投訴

本文系統來源：php中文網

總結

以上是生活随笔為你收集整理的HTML中的camera标签,详解HTML5 使用video标签实现选择摄像头功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。