您的浏览器不支持navigator.getUserMedia接口帮助我支持getUsermedia浏览器
您的浏览器不支持navigator.getUserMedia接口帮助我支持getUsermedia浏览器
提问于 2022-03-27 19:14:15
在使用navigator.getUsermedia处理相机输入时，我得到了一个错误。我该怎么做才能解决这个问题？以下是代码：
var video = document.querySelector('#camera-stream'),
image = document.querySelector('#snap'),
start_camera = document.querySelector('#start-camera'),
controls = document.querySelector('.controls'),
take_photo_btn = document.querySelector('#take-photo'),
delete_photo_btn = document.querySelector('#delete-photo'),
download_photo_btn = document.querySelector('#download-photo'),
error_message = document.querySelector('#error-message');
// The getUserMedia interface is used for handling camera input.
// Some browsers need a prefix so here we're covering all the options
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if(!navigator.getMedia){
displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else{
// Request the camera.
navigator.getMedia(
{
video: true
},
// Success Callback
function(stream){
// Create an object URL for the video stream and
// set it as src of our HTLM video element.
video.src = window.URL.createObjectURL(stream);
// Play the video element to start the stream.
video.play();
video.onplay = function() {
showVideo();
};
},
// Error Callback
function(err){
displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
}
);
}我的浏览器似乎不支持navigator.getUsermedia，但是我已经在所有浏览器中尝试过了，比如Opera、Chrome、Brave、Mozilla和Edge，但是结果总是一样的。
// The getUserMedia interface is used for handling camera input.
// Some browsers need a prefix so here we're covering all the options
navigator.getMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
if(!navigator.getMedia){
displayErrorMessage("Your browser doesn't have support for the navigator.getUserMedia interface.");
}
else{
// Request the camera.
navigator.getMedia(
{
video: true
},
// Success Callback
function(stream){
// Create an object URL for the video stream and
// set it as src of our HTLM video element.
video.src = window.URL.createObjectURL(stream);
// Play the video element to start the stream.
video.play();
video.onplay = function() {
showVideo();
};
},
// Error Callback
function(err){
displayErrorMessage("There was an error with accessing the camera stream: " + err.name, err);
}
);
}回答 2
Stack Overflow用户
发布于 2022-03-28 15:45:03
您可能正在使用http而不是https来服务您的网页和Javascript。除了本地主机127.0.0.1、：1或任何https服务器之外，getUserMedia()无法工作。
浏览器通过隐藏.getUserMedia()函数来实现这一限制。
为什么？因为网络爬行。浏览器开发者安全人员(Chromium，Firefox，Safari)已经堵塞了安全漏洞，这些漏洞允许坏人未经我们的许可就可以在您和我的机器上使用相机和麦克风。将getUserMedia()操作限制在仅限于https的页面上，会使坏人更难使用所谓的“中间人”袭击来欺骗侵犯自己隐私的人。
这给开发人员带来了麻烦:为了部署媒体应用程序，我们需要https服务器。但Heroku和Glitch为本地主机以外的代码测试提供了简单易用的平台。
Stack Overflow用户
发布于 2022-03-27 22:28:52
这是我通常使用的
const getUserMedia =
navigator.mediaDevices.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71639511
复制相关文章
相似问题
腾讯云开发者
