6

我有一些简单的 webRTC 代码,用于getUserMedia访问用户的麦克风。现在,当我在浏览器中加载该 html 文件(保存在我的本地主机中)时,浏览器不会请求麦克风访问权限,因此无法访问。

但是当我在 w3schools.com 编辑器中运行相同的 html 时,它会请求麦克风访问权限,并且在允许它访问我的麦克风时,它工作正常......

为什么会出现这种奇怪的行为?

4

7 回答 7

5

当您直接从文件系统(file:// 前缀)打开 html 文件时,Chrome 将自动阻止 getUserMedia 权限。您必须在本地运行服务器。

我像这样启动了一个 sinatra 服务器:

# server.rb
require 'sinatra'

get '/' do
  File.read('index.html')
end

那就先给吧。

$ gem install sinatra
$ ruby server.rb

http://localhost:4567

于 2013-04-18T06:26:13.983 回答
2

This behavior is caused by Chrome security settings.

If you have PHP installed and you don't wanna setup Apache or other more advanced web server, probably the easiest way would be to run internal PHP web server this way (assuming you have your web files in /home/user/web/):

php -S 127.0.0.1:3000 -t /home/user/web/

Here is a description of the parameters:

-S <addr>:<port> Run with built-in web server.

-t <docroot> Specify document root <docroot> for built-in web server.

After you run the server start your browser and open this URL (assuming your test file is called webrtc.html):

http://127.0.0.1:3000/webrtc.html

于 2013-08-27T21:54:43.483 回答
2

file:/*出于安全考虑,Chrome 在执行文档时不会打开用户媒体,例如 WebCam 。

--disable-web-security但是,您可以通过使用命令行选项启动 chrome 来覆盖安全策略。

对于测试,还要检查该--use-fake-device-for-media-stream选项。

注意指定命令行选项时,请确保没有运行 chrome/chromium 进程。 PS通过创建一个test.html包含

<!DOCTYPE HTML>
<video autoplay/>
<script>
  navigator.webkitGetUserMedia({audio:true,video:true},
    function(stream){
      document.querySelector('video').src =
        URL.createObjectURL(stream);
    });
</script>

而不是杀死所有 chrome 实例并像这样启动 chrome:

 chrome.exe --use-fake-device-for-media-stream --disable-web-security test.html
于 2013-06-18T08:32:37.997 回答
1

如果不使用本地服务器,则无法在本地运行使用 getUsermedia API 的 HTML5。使用 WampServer 并将您的 HTML5 文件放在 www 文件夹中。

于 2013-08-27T21:02:01.007 回答
1

只是一些故障排除建议:

  • 检查 chrome://settings/content(向下滚动到“媒体”),查看您是否不小心选择了始终允许或始终拒绝该站点。(我使用的是 Chrome 26[dev];这可能位于 Chrome 24 的其他位置。)

  • 还可以尝试重新启动您的浏览器 - 根据我的经验,这部分 Chrome 仍然存在相当大的问题,有时重新启动可以修复它。

  • 并确保您的 getUserMedia() 调用中有一个错误处理程序 - 那里可能有一些额外的信息。

于 2013-01-22T04:48:10.300 回答
1

您是否通过类似 file:// 的方式加载文件?似乎 chromium 根本不提供对这些文件的访问权限,并且完全忽略了该请求。刚刚尝试过,将文件上传到开发服务器后它工作正常。

即使将其设置为始终允许,它仍然不适用于 file://。

于 2013-02-16T06:33:02.767 回答
0

这个答案适用于 chrome

在 Chrome 中,您可以使用该--allow-file-access-from-files标志来允许从本地文件访问网络摄像头。

苹果电脑

在 Mac 上,您可以打开终端并输入:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files /path/to/file.html

改变/path/to/file.html你的路径

视窗

在 Windows 中,您可以创建快捷方式。右键单击 Google Chrome 并在菜单中选择:Copy To -> Desktop (shortcut),然后右键单击快捷方式并单击properties添加标志:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files C:\path\to\file.html

希望这个答案有帮助!

于 2014-06-25T08:43:21.160 回答