使用JavaScript,仅凭代码是否能知道用户是否有网络摄像头吗?我不想使用任何插件来实现。
使用JavaScript,仅凭代码是否能知道用户是否有网络摄像头吗?我不想使用任何插件来实现。
你不一定需要获得权限才能知道用户是否有摄像头,你可以使用 enumerateDevices
进行检查:
function detectWebcam(callback) {
let md = navigator.mediaDevices;
if (!md || !md.enumerateDevices) return callback(false);
md.enumerateDevices().then(devices => {
callback(devices.some(device => 'videoinput' === device.kind));
})
}
detectWebcam(function(hasWebcam) {
console.log('Webcam: ' + (hasWebcam ? 'yes' : 'no'));
})
navigator.getUserMedia()
。navigator.getMedia = ( navigator.getUserMedia || // use the proper vendor prefix
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
navigator.getMedia({video: true}, function() {
// webcam is available
}, function() {
// webcam is not available
});
您可以使用此插件来检查用户是否有网络摄像头:http://www.xarg.org/project/jquery-webcam-plugin/
if(webcam.getCameraList().length == 0){
alert('You don\'t have a web camera');
}
getUserMedia
API:function success(stream){
// The success function receives an argument which points to the webcam stream
document.getElementById('myVideo').src = stream;
}
function error(){
alert("No webcam for you, matey!");
}
if (navigator.getUserMedia) {
navigator.getUserMedia({video:true, audio:false}, success, error);
} else {
error();
}
来源: http://www.iandevlin.com/blog/2012/06/html5/filtering-a-webcam-using-getusermedia-and-html5-canvas
本文介绍了如何使用getUserMedia和HTML5 Canvas来过滤Webcam视频流的方法。该方法利用Canvas API提供的像素级别的访问,可以对视频帧进行实时处理。此外,它还演示了如何创建自己的过滤器函数,并将其应用到视频流中。你无法读取当前浏览器设置。 我们唯一能做的就是尝试访问网络摄像头/麦克风,看看是否能够访问该设备,如...
navigator.getMedia({video: true}, function() {
// webcam is available
}, function() {
// webcam is not available
});
但是 **** 请注意,如果您遵循这种方法,请注意....
另外请注意,您必须使用HTTPS才能使用网络摄像头/麦克风,并且它将提示您浏览器特定的权限弹出窗口,其中只有允许和阻止按钮仅一次,您将不会再次看到此权限弹出窗口,因为HTTPS保存了该权限。
唯一重新获取此权限弹出窗口的方法是:
FYI ... 您无法使用JavaScript操纵浏览器特定设置 因此,除非你有时间浪费,否则不要走那条路。
Navigator.getUserMedia()
已于2019年被弃用。要访问网络摄像头,请改用MediaDevices.getUserMedia()
。
请注意,如果当前文档未安全加载,则navigator.mediaDevices
将返回undefined
。从localhost
提供的URL通常是可以的。
用于测试和访问网络摄像头的示例代码:
const constraints = {
audio: false,
video: { width: 1280, height: 720 },
};
if (!navigator.mediaDevices) {
console.log("Document not secure. Unable to capture WebCam.");
} else {
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(stream) {
//show webcam stream
let videoIn = document.createElement("video");
videoIn.autoplay = true;
document.body.appendChild(videoIn);
videoIn.srcObject = stream;
})
.catch(function(err) {
console.log("Unable to capture WebCam.", err);
});
}
async function detectWebcam() {
try {
var md = navigator.mediaDevices;
var results = false;
if (!md || !md.enumerateDevices) results = false;
const devices = await md.enumerateDevices();
results = devices.some(device => 'videoinput' === device.kind);
return results;
} catch (error) { return false; }
}
在这里,受其他答案的启发,作为我正在开发的实现的一部分,我正在使用下面的函数返回一个布尔值,以检查是否有活动的流。
该项目有点老旧,因此使用了jQuery和ES5,但希望对某人有用:
function() {
var deferred = $.Deferred();
navigator.mediaDevices.getUserMedia(VIDEO_CONSTRAINTS)
.then(function(stream) { deferred.resolve(stream.active); })
.catch(function() { deferred.resolve(false) })
return deferred.promise()
}
然后可以按如下方式使用:
checkStreamActive()
.then(function(activeStream) {
if(activeStream) {
// do something
} else {
// do something else
}
})
强调文本尝试使用JavaScript警告框来检查设备是否具有网络摄像头查看此图像
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
webcam_check_func();
});
function webcam_check_func() {
var hasWebcam = false;
var device = [];
if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
navigator.enumerateDevices = function (callback) {
navigator.mediaDevices.enumerateDevices().then(callback);
};
navigator.enumerateDevices(function (devices) {
devices.forEach(function (my_device) {
if (my_device.kind === 'videoinput') {
debugger;
hasWebcam = true;
}
}
);
alert("Has Web Camera -->" + hasWebcam);
});
}
}
</script>
</head>
<body>
</body>
</html>