html5 video js控制摄像头的焦距,H5中使用video标签实现选择摄像头功能的示例

灰太狼 2022-10-06 11:59 262阅读 0赞

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

html5 video js控制摄像头的焦距,H5中使用video标签实现选择摄像头功能的示例

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML5 的 video 标签，实现简易播放器

相关 uni-app在H5平台使用video.js

相关 html5 video js控制摄像头的焦距,H5中使用video标签实现选择摄像头功能的示例

相关 html中控制video标签全屏

相关 HTML5的video元素应用

相关 HTML5中video元素

相关 js之 H5 的 video 标签全屏功能不能用

相关 js之 H5 的 video 标签暂停播放视频

相关 html5之video

相关如何使用HTML5中video标签