详解使用HTML5 video标签实现选择摄像头功能 时间：2018-08-10     来源：未知

这篇文章主要介绍了详解HTML5 使用video标签实现选择摄像头功能的相关资料,希望通过本文能帮助到大家，实现这样的功能，需要的朋友可以参考下。

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

1. html
// jquery reference 
// <script src="//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>