我有一些简单的 webRTC 代码,用于getUserMedia
访问用户的麦克风。现在,当我在浏览器中加载该 html 文件(保存在我的本地主机中)时,浏览器不会请求麦克风访问权限,因此无法访问。
但是当我在 w3schools.com 编辑器中运行相同的 html 时,它会请求麦克风访问权限,并且在允许它访问我的麦克风时,它工作正常......
为什么会出现这种奇怪的行为?
我有一些简单的 webRTC 代码,用于getUserMedia
访问用户的麦克风。现在,当我在浏览器中加载该 html 文件(保存在我的本地主机中)时,浏览器不会请求麦克风访问权限,因此无法访问。
但是当我在 w3schools.com 编辑器中运行相同的 html 时,它会请求麦克风访问权限,并且在允许它访问我的麦克风时,它工作正常......
为什么会出现这种奇怪的行为?
当您直接从文件系统(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
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
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
如果不使用本地服务器,则无法在本地运行使用 getUsermedia API 的 HTML5。使用 WampServer 并将您的 HTML5 文件放在 www 文件夹中。
只是一些故障排除建议:
检查 chrome://settings/content(向下滚动到“媒体”),查看您是否不小心选择了始终允许或始终拒绝该站点。(我使用的是 Chrome 26[dev];这可能位于 Chrome 24 的其他位置。)
还可以尝试重新启动您的浏览器 - 根据我的经验,这部分 Chrome 仍然存在相当大的问题,有时重新启动可以修复它。
并确保您的 getUserMedia() 调用中有一个错误处理程序 - 那里可能有一些额外的信息。
您是否通过类似 file:// 的方式加载文件?似乎 chromium 根本不提供对这些文件的访问权限,并且完全忽略了该请求。刚刚尝试过,将文件上传到开发服务器后它工作正常。
即使将其设置为始终允许,它仍然不适用于 file://。
这个答案适用于 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
希望这个答案有帮助!