navigator.mediadevices.enumeratedevices is not a function，本地 https 证书

最新推荐文章于 2025-03-11 22:04:13 发布

「已注销」

最新推荐文章于 2025-03-11 22:04:13 发布

阅读量2k

点赞数

分类专栏：前端文章标签： mediadevices webrtc 本地证书 https

本文链接：https://blog.youkuaiyun.com/sansan_7957/article/details/119107326

版权

在调试本地WebRTC项目时遇到navigator.mediaDevices.enumeratedevices不是函数的错误，由于WebRTC仅在HTTPS环境下支持，故需通过mkcert生成本地证书，并替换browser-sync的certs文件，然后以HTTPS方式启动项目，以使其他设备能通过IP访问并避免错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

问题描述
解决办法

问题描述

需要其他电脑上调试本地项目。

我是在开发电脑上启动本地项目，使用 browser-sync 代理，让其他电脑通过 IP 访问，例如：http://x.x.x.x:3001 。

这样是可以在其他电脑上访问到我的本地项目，可是报错 navigator.mediadevices.enumeratedevices is not a function 。原因如下：

WEBRTC is not supported in HTTP site and it is supported only in HTTPS site

就是说需要使用下面的源才能使用 navigator.mediadevices.enumeratedevices

(https, , *)
(wss, *, *)
(, localhost, )
(, .localhost, *)
(, 127/8, )
(, ::1/128, *)
(file, *, —)
(chrome-extension, *, —)

参考：

Chrome: navigator.mediaDevices.getUserMedia is not a function

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

浏览器https时不支持调用媒体信息，生成和添加本地证书

chrycoder的博客

03-07

1465

前情： MediaDevices 的方法 enumerateDevices()：请求一个可用的媒体输入和输出设备的列表 navigator.mediaDevices.enumerateDevices();js调用获取媒体信息，浏览器不支持所以未获取到。是因为chrome需要https来访问。解决方法：虚拟机ubuntu需要生成本地的证书，key，pem，来实现https访问。 ...

MediaDevices html5,HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题

weixin_36173034的博客

06-15

2226

navigator.mediaDevices.getUserMedia应项目要求，需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档，链接如下：https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia看上去很简单，最终却写的怀疑人生。API环境问题一：(为什么不管怎么配置都...

参与评论您还未登录，请先登录后发表或查看评论

navigator.mediaDevices.enumerateDevices() 返回空label

Crisf的博客

01-29

5940

搭建环境环境见拙作： https://blog.csdn.net/Crisf/article/details/113242541 本次记录navigator.mediaDevices.enumerateDevices() 返回的label,deviceId为空的解决办法。问题截图如下：代码如下所示：结构如下： index.html: <html> <head> <title> WebRTC get

navigator.mediaDevices API 教程

热门推荐

南极亚拉的博客

06-09

1万+

有问题的代码 <script> navigator.mediaDevices.enumerateDevices() .then(gotDevices).catch(handleError); // 遍历所有的设备，包括视频和音频设备,找到双目摄像头 function gotDevices(deviceInfos) { console.log(deviceInfos); } function handleError(er

navigator.mediaDevices.enumerateDevices()的兼容性问题

qq_37800258的博客

03-18

6476

navigator.mediaDevices.enumerateDevices方法的兼容性问题经测试发现，除谷歌浏览器和现在使用Chromium内核的Microsoft Edge浏览器外，enumerateDevices()方法存在一些兼容性问题。首先，如果不先获取媒体权限，用enumerateDevices()获取到的设备列表中label为空，即无法识别设备名字。这个考虑有两种方案解决： a）在调用enumerateDevices()时，对于label为空的情况手动定义设备名字，在进入会议调

navigator.mediaDevices.enumerateDevices()调用usb摄像头

feng4175的博客

08-17

2505

这里的strem是无法获取到的，在后台会报错说navigator.mediaDevices.getUserMedia是没有定义的，也就是说，我们无法使用这个api，但是本机运行可以，http地址就不行该怎么解决呢？当我们使用http来获取摄像头时，浏览器的安全机制。前端想使用本机摄像头以及通过USB连接的摄像头，通过USB流实现摄像头的实时监控。})来操作所获得的相机媒体流，我这里是做两个usb摄像头的实时监控放在网页上面。我们需要使用deviceId来选择我们本机上的摄像头或者usb摄像头，

MediaDevices html5,HTML5如何通过navigator.mediaDevices.getUserMedia调用手机摄像头

weixin_42186579的博客

06-15

1253

HTML5如何通过navigator.mediaDevices.getUserMedia调用手机摄像头发布时间：2021-05-23 15:03:11来源：亿速云阅读：76作者：小新这篇文章主要介绍了HTML5如何通过navigator.mediaDevices.getUserMedia调用手机摄像头，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家...

uniapp调用手机摄像头_HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题...

weixin_39820173的博客

12-19

7250

java 获取麦克_通过浏览器获取麦克风或相机等媒体的使用权限

weixin_42515045的博客

02-16

952

概览mediaDevices 是 Navigator 对象的只读属性，一个单列对象，可以连接访问相机和麦克风，屏幕共享等媒体输入设备方法enumerateDevices请求一个可用的媒体输入和输出设备列表，如麦克风、相机、耳机等。返回的 Promise完成状态中是一个带有 MediaDeviceInfo 的数组let mediaDevices = navigator.mediaDevicesif(...

navigator.mediaDevices.enumerateDevices()无法获取摄像头和麦克风信息，原来是要先调用getUserMedia

kiramario的博客

03-04

569

否则 audio，vedio信息都是空的。

navigator.mediaDevices.getUserMedia中getUserMedia显示未定义

xioxi

01-18

1275

通过 MediaDevices.getUserMedia() 获取用户多媒体权限时，需要注意其只工作于以下三种环境： ocalhost 域开启了 HTTPS 的域使用 file:/// 协议打开的本地文件其他情况下，比如在一个 HTTP 站点上，navigator.mediaDevices 的值为 undefined。参考：https://blog.csdn.net/weixin_49293345/article/details/112600213 ...

解决在http协议下，navigator.mediaDevices报错问题

myy优快云1226的博客

12-12

3939

navigator.mediaDevices方法在开发中的使用问题

获取 navigator.mediaDevices.getUserMedia 失败

timczm的博客

06-07

6544

在开发的时候调用下面这段代码是正常工作的，但是用其他设备（如ios，safari，android等任何非本机设备）打开我本地开发环境运行的dev环境就无法调用。

修改音视频权限

大帅哥的博客

12-10

1805

通过MediaDevices.getUserMedia()获取用户多媒体权限时，需要注意其只工作于以下三种环境： localhost域开启了 HTTPS 的域使用file:///协议打开的本地文件其他情况下，比如在一个HTTP站点上，navigator.mediaDevices的值为undefined。如果想...

navigator.mediaDevices.getUserMedia调不起摄像头

weixin_44349278的博客

05-26

2156

navigator.mediaDevices.getUserMedia调不起摄像头，苹果系统14.3以下系统不支持该api，直接让用户升级系统即可解决。

navigator.mediaDevices.getUserMedia问题总结

pgLi

02-22

1万+

1、在PC端不能配置facingMode字段来设定前置或者后置摄像头，否则不能打开摄像头 2、使用后置摄像头设置分辨率时，宽高颠倒才能正确显示（手机本身的比例是高大于宽） width: { min: 776, ideal: 720, 1080: }, height: { min: 1024, ideal: 1280, max: 1920 } 3、使用浏览器真机调试时，使用了http协议，导致无法打开摄像头在chrome中可以在url地址栏中直接输入chrome://flags/#unsaf..

chrome 报错 navigator.mediaDevices is undefined

Jioho的博客

10-28

7139

what?chrome 会报错？你代码写错了把！ chrome 报错 navigator.mediaDevices is undefined 最近在开发一个摄像头项目（多人会议，需要摄像头~~）。然后同事的电脑调试好好的，到我这里就报错了，我的 chrome 版本一直都在最新的，为啥到我这反而还不兼容？原来是以后的内容会越来越严格 chrome：想调用摄像头？可以啊，拿出你的https证书给我瞧瞧解决问题毕竟不可能到处都有 https 证书把，总得本地调试把，localhost 域名总会有吧。于是发

【音】chrome 获取媒体 enumerateDevices 详细信息

点滴

03-20

6977

async function f () { let d = await navigator.mediaDevices.enumerateDevices(); console.log(d); }; f(); 非允许情况下是获取不到label详细信息的如果是允许情况下，可以获取到 faceTime HD Camera 获取详情可以访问这个地址进行测试查看 https://ibeege...

navigator.mediaDevices.enumerateDevices()

01-08

### 如何使用 `navigator.mediaDevices.enumerateDevices()` 枚举媒体设备 `navigator.mediaDevices.enumerateDevices()` 是用于枚举用户可访问的多媒体输入输出设备的方法，返回的是一个 Promise 对象。此方法可以用来获取当前用户的音频和视频输入输出设备列表。 #### 获取设备列表并打印基本信息下面是一个简单的例子来展示如何调用 `enumerateDevices()` 并处理其结果： ```javascript navigator.mediaDevices.enumerateDevices() .then(function (devices) { devices.forEach(function (device) { console.log(`Kind: ${device.kind}, Label: ${device.label}, Device ID: ${device.deviceId}`); }); }) .catch(function (err) { console.error(`Error occurred: ${err.name}: ${err.message}`); }); ``` 这段代码尝试列举所有的媒体设备，并将每种类型的设备信息（种类、标签以及唯一标识符）记录到控制台中[^1]。 #### 处理不同类型的设备为了更具体地操作特定类型的设备，比如只关心摄像头或麦克风的信息，可以在遍历过程中加入条件判断语句： ```javascript navigator.mediaDevices.enumerateDevices() .then(function (devices) { const audioInputs = []; const videoInputs = []; devices.forEach(function (device) { if (device.kind === "audioinput") { audioInputs.push({ label: device.label, deviceId: device.deviceId }); } else if (device.kind === "videoinput") { videoInputs.push({ label: device.label, deviceId: device.deviceId }); } }); console.log('Audio Inputs:', audioInputs); console.log('Video Inputs:', videoInputs); }) .catch(function (err) { console.error(`Error occurred: ${err.name}: ${err.message}`); }); ``` 这里分别创建了两个数组存储来自同一类别的设备信息——一个是音频输入源，另一个是视频输入源。这样可以根据实际需求进一步筛选所需的数据[^3]。