英文:
Object navigator.mediaDevices is not accessible on mobile chrome browser
问题
我一直在开发一个应用程序，在其中我使用对象 navigator 来流式传输我的网络摄像头。它在我的电脑浏览器上完美运行，这里是github链接。
然而，当我在手机上启动应用程序时，它崩溃了。我一直在不断测试不同的事情，直到我发现某种原因导致对象 navigator 在我的手机浏览器上无法访问。
我是这样发现的。我创建了这个函数：
logErrors(){
return(navigator.mediaDevices.toString())
}
然后我以这种方式显示它：
<h1>{this.logErrors()}</h1>
PS：我正在使用React，如果语法看起来有点奇怪。
无论如何，在我的电脑浏览器上，我得到这个：
在我的手机浏览器上，我得到这个错误：
有任何关于为什么在我的手机浏览器上无法访问mediaDevices的想法吗？
英文:
I have been working on an application in which I use the object navigator to stream my webcam.
It works perfectly on my pc browser, here's the github link.
However, when I launch the app on my phone it crashes. I kept testing different things until I found-out that for some reason the object navigator is not accessible on my mobile browser.
This is how I found-out. I create this function:
logErrors(){
return(navigator.mediaDevices.toString())
}
And I displayed it this way:
<h1>{this.logErrors()}</h1>
PS: I am using React, if the syntax seems a bit strange.
Anyway, on my pc browser, I get this:
On my phone browser, I get this error:
Any idea why mediaDevices is not accessible on my phone browser?
答案1
得分: 2
如果您查看1中的MediaDevices API，它们说：
它返回一个解析为MediaStream对象的Promise。如果用户拒绝权限或匹配的媒体不可用，那么该Promise将被拒绝并显示NotAllowedError或NotFoundError。
以及
如果当前文档没有以安全方式加载，navigator.mediaDevices将为未定义，您将无法使用getUserMedia()。有关使用getUserMedia()的其他安全问题和更多信息，请参阅Security。
所以我猜测您的应用程序可能存在安全问题（您应该通过https应用程序提供访问权限）。
此外，在2中：
从Chrome 47开始，只允许来自安全源（HTTPS或localhost）的getUserMedia()请求。
英文:
If you check the API of the MediaDevices in here, they say:
> It returns a Promise that resolves to a MediaStream object. If the
> user denies permission, or matching media is not available, then the
> promise is rejected with NotAllowedError or NotFoundError
> respectively.
and
> If the current document isn't loaded securely, navigator.mediaDevices
> will be undefined, and you cannot use getUserMedia(). See Security for
> more information on this and other security issues related to using
> getUserMedia()
So I'm guess that your application does have a security issue (you should have given access through an https application).
Moreover in here:
> Starting with Chrome 47, getUserMedia() requests are only allowed from
> secure origins: HTTPS or localhost
答案2
得分: 1
I have solved this issue.
- 打开 package.json，并将以下内容粘贴到 scripts 中：
"start": "set HTTPS=true&&react-scripts start"
这应该会通过 HTTPS 为应用提供服务。
2. 如果出现以下错误：
React app error: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS
打开
node_modules/react-dev-utils/webpackHotDevClient.js
并将以下代码粘贴到 connection 的定义中：
protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
这显然是 react-scripts 中尚未解决的错误。如果正在使用 HTTPS 协议，我们应该使用 SSL/TLS（WSS）协议而不是 WebSocket（WS）。您可以在这里了解更多信息：
英文:
I have solved this issue.
- Open package.json and paste this inside scripts:
> "start": "set HTTPS=true&&react-scripts start"
This should serve the app over https
2. If this gives you this error:
> React app error: Failed to construct 'WebSocket': An insecure
> WebSocket connection may not be initiated from a page loaded over
> HTTPS
Open
> node_modules/react-dev-utils/webpackHotDevClient.js
And paste this code inside the definition of the connection:
protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
This is apparently a bug in react-sripts that hasn't been solved yet. If https protocol is being used we should use WebSockets over SSL/TLS (WSS) protocol instead of WebSockets (WS). You can learn more about it here:
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论