Camera Access如何在HTML和JS中工作?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Camera Access如何在HTML和JS中工作?相关的知识,希望对你有一定的参考价值。
我正在寻找一种方法在浏览器中实现网络摄像头,并在用户单击按钮时拍摄相机的快照。有一个在线资源似乎使用下面的代码,但我无法理解以下行。有人可以解释一下吗?
navigator.getMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
如果需要,整个代码如下。
编辑:事实上另一个相关的问题,navigator.getMedia
代表什么,它是如何工作的?
(function() {
// Default Width set and height to be based on aspect ratio
// Change to width/height of device (detect)
var width = 320;
var height = 0;
//Status of stream
var streaming = false;
//Refers to <video> element
var video = null;
//Refers to <canvas> element
var canvas = null;
//Refers to <img> element
var photo = null;
//Refers to <button> element for trigger
var startbutton = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
navigator.getMedia = (navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia({
video: true,
audio: false
},
function(stream) {
if (navigator.mozGetUserMedia) {
video.mozSrcObject = stream;
} else {
var vendorURL = window.URL || window.webkitURL;
video.src = vendorURL.createObjectURL(stream);
}
video.play();
},
function(err) {
console.log("An error occured! " + err);
}
);
video.addEventListener('canplay', function(ev) {
if (!streaming) {
height = video.videoHeight / (video.videoWidth / width);
// Firefox currently has a bug where the height can't be read from
// the video, so we will make assumptions if this happens.
if (isNaN(height)) {
height = width / (4 / 3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton.addEventListener('click', function(ev) {
takepicture();
ev.preventDefault();
}, false);
clearphoto();
}
// Fill the photo with an indication that none has been
// captured.
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
// Capture a photo by fetching the current contents of the video
// and drawing it into a canvas, then converting that to a PNG
// format data URL. By drawing it on an offscreen canvas and then
// drawing that to the screen, we can change its size and/or apply
// other changes before drawing it.
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
// Set up our event listener to run the startup process
// once loading is complete.
window.addEventListener('load', startup, false);
})();
<!doctype html>
<html>
<head>
<script src="Camera.js"></script>
</head>
<body>
<div>
<div class="camera">
<video id="video">Video stream not available.</video>
<button id="startbutton">Take photo</button>
</div>
<canvas id="canvas"></canvas>
<div class="output">
<img id="photo" alt="The screen capture will appear in this box.">
</div>
</div>
</body>
</html>
您显示的代码只是为旧版浏览器实现向后兼容性。
在navigator.getUserMedia()
函数标准化之前,每个主要的浏览器都有自己的功能,他们常常用浏览器前缀命名扩展函数:webkit
用于基于WebKit的浏览器(Chrome和Safari),moz
用于Mozilla Firefox,和ms
用于Microsoft浏览器。
逻辑OR运算符||
从左到右计算其操作数,返回第一个具有truthy值的操作数。
所以这段代码的作用是尝试使用navigator.getUserMedia()
(如果它存在的话)(它将在现代浏览器中使用)。如果没有,它会尝试将每个特定于浏览器的旧功能作为后备。
好吧,代码本身正在验证每个案例:
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
它将返回第一个var,它不是null或undefined,然后将被分配给navigator.getMedia。我想这个代码是为了确保它能够在多个不同的浏览器和版本中运行。如果我错了请指正
以上是关于Camera Access如何在HTML和JS中工作?的主要内容,如果未能解决你的问题,请参考以下文章
无法让 DLookup 函数在 Access 2013 中工作
html5+js:<input type=file capture=camera>的分辨率或大小