H5中使用video标签实现选择摄像头功能的示例

发布时间：2020-12-05 10:48:03

来源：亿速云

阅读：91

作者：小新

小编给大家分享一下H5中使用video标签实现选择摄像头功能的示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

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

});

以上是“H5中使用video标签实现选择摄像头功能的示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！