From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- .../api/cameracontrol/getpreviewstream/index.html | 64 ------ files/zh-cn/web/api/cameracontrol/index.html | 88 --------- files/zh-cn/web/api/identitymanager/index.html | 43 ----- .../zh-cn/web/api/identitymanager/watch/index.html | 59 ------ .../using_indexeddb_in_chrome/index.html | 27 --- files/zh-cn/web/api/navigator/id/index.html | 45 ----- .../zh-cn/web/api/navigator/mozsettings/index.html | 32 --- files/zh-cn/web/api/navigator/mozsms/index.html | 112 ----------- .../zh-cn/web/api/using_the_browser_api/index.html | 214 --------------------- .../webvr_api/webvr_environment_setup/index.html | 110 ----------- 10 files changed, 794 deletions(-) delete mode 100644 files/zh-cn/web/api/cameracontrol/getpreviewstream/index.html delete mode 100644 files/zh-cn/web/api/cameracontrol/index.html delete mode 100644 files/zh-cn/web/api/identitymanager/index.html delete mode 100644 files/zh-cn/web/api/identitymanager/watch/index.html delete mode 100644 files/zh-cn/web/api/indexeddb_api/using_indexeddb_in_chrome/index.html delete mode 100644 files/zh-cn/web/api/navigator/id/index.html delete mode 100644 files/zh-cn/web/api/navigator/mozsettings/index.html delete mode 100644 files/zh-cn/web/api/navigator/mozsms/index.html delete mode 100644 files/zh-cn/web/api/using_the_browser_api/index.html delete mode 100644 files/zh-cn/web/api/webvr_api/webvr_environment_setup/index.html (limited to 'files/zh-cn/web/api') diff --git a/files/zh-cn/web/api/cameracontrol/getpreviewstream/index.html b/files/zh-cn/web/api/cameracontrol/getpreviewstream/index.html deleted file mode 100644 index be1756631d..0000000000 --- a/files/zh-cn/web/api/cameracontrol/getpreviewstream/index.html +++ /dev/null @@ -1,64 +0,0 @@ ---- -title: CameraControl.getPreviewStream -slug: Web/API/CameraControl/getPreviewStream -translation_of: Archive/B2G_OS/API/CameraControl/getPreviewStream ---- -

{{APIRef("Camera API")}}{{ non-standard_header() }}

- -

概述

- -

该方法用来根据指定的配置,从摄像头获取到一个{{domxref("MediaStream")}}数据流,你可以从该数据流中捕获到静态的照片.

- -
-

注:使用该方法获取到的数据流仅能用来捕获静态的照片.如果你想录制视频,那么必须使用{{domxref("CameraControl.getPreviewStreamVideoMode()")}}方法来代替.

-
- -

语法

- -
CameraControl.getPreviewStream(options, onsuccess[, onerror]);
- -

参数

- -
-
options
-
一个包含有两个属性width和height的对象.该对象可以通过{{domxref("CameraCapabilities")}}.previewSizes属性获取到.
-
onsuccess
-
一个回调函数,会被传入一个参数,这个参数是一个{{domxref("MediaStream")}}数据流对象,可以使用该数据流对象捕获静态的图像.
-
onerror {{optional_inline()}}
-
一个回调函数,会被传入一个参数,这个参数是一个表示错误原因的字符串.如果在尝试获取MediaStream数据流对象时发生了错误,则会调用该函数.
-
- -

示例

- -

这个例子演示了如何通过使用{{domxref("MediaStream")}}数据流对象来从摄像头捕获并播放静态的图片.

- -
var display = document.getElementsByTagName('video')[0];
-var options = {
-  camera: navigator.mozCameras.getListOfCameras()[0]
-};
-
-function onStreamReady( stream ) {
-  display.mozSrcObject = stream;
-  display.play();
-}
-
-function onAccessCamera( camera ) {
-  var size = camera.capabilities.previewSizes[0];
-
-  camera.getPreviewStream(size, onStreamReady);
-};
-
-navigator.mozCameras.getCamera(options, onAccessCamera)
-
- -

规范

- -

不属于任何规范.当WebRTC Capture and Stream API实现时,该方法应该会被删除.

- -

相关链接

- - diff --git a/files/zh-cn/web/api/cameracontrol/index.html b/files/zh-cn/web/api/cameracontrol/index.html deleted file mode 100644 index 3be97dac90..0000000000 --- a/files/zh-cn/web/api/cameracontrol/index.html +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: CameraControl -slug: Web/API/CameraControl -translation_of: Archive/B2G_OS/API/CameraControl ---- -

{{APIRef("Camera API")}}

- -

{{ non-standard_header() }}

- -

When you use the {{domxref("CameraManager.getCamera()")}} method to get a reference to a camera, you specify a callback function to be invoked on success. That function receives as a parameter a CameraControl object. You can use its methods and properties to manage and make use of the camera.

- -

Properties

- -
-
{{domxref("CameraControl.capabilities")}} {{readonlyinline}}
-
A {{domxref("CameraCapabilities")}} object indicating all the capabilities for the given camera.
-
{{domxref("CameraControl.effect")}}
-
A string defining the effect to be used by the camera (none by default). Its value must be one of the values available in {{domxref("CameraCapabilities.effects")}}.
-
{{domxref("CameraControl.exposureCompensation")}} {{readonlyinline}}
-
A value used to compensate the camera exposure. This attribute is read-only; to change the exposure, you need to call the {{domxref("CameraControl.setExposureCompensation()")}} method.
-
{{domxref("CameraControl.flashMode")}}
-
A string that defines how the flash, if any, is to be used; this is auto by default if the device has a flash, none otherwise. When set, its value must be chosen from the list of options specified by  {{domxref("CameraCapabilities.flashModes")}}.
-
{{domxref("CameraControl.focalLength")}} {{readonlyinline}}
-
A number that express the camera's focal length in millimeters.
-
{{domxref("CameraControl.focusAreas")}}
-
An Array of one or more objects that define where the camera will perform auto-focusing.
-
{{domxref("CameraControl.focusDistanceFar")}} {{readonlyinline}}
-
This value is a distance in meter used with {{domxref("CameraControl.focusDistanceNear")}} to defined the image's depth of field. The value for this property may be Infinity.
-
{{domxref("CameraControl.focusDistanceNear")}} {{readonlyinline}}
-
This value is a distance in meter used with {{domxref("CameraControl.focusDistanceFar")}} to defined the image's depth of field.
-
{{domxref("CameraControl.focusDistanceOptimum")}} {{readonlyinline}}
-
This value is a distance in meter where the subject will appear sharpest.
-
{{domxref("CameraControl.focusMode")}}
-
A string that defines which kind of focus mode the camera should use (auto or fixed by default). Its value must be chosen from {{domxref("CameraCapabilities.focusModes")}}.
-
{{domxref("CameraControl.meteringAreas")}}
-
An Array of one or more objects that define where the camera will perform auto-focusing.
-
{{domxref("CameraControl.onShutter")}}
-
A handler for the camera's "shutter" event, to trigger a shutter sound and/or a visual shutter indicator.
-
{{domxref("CameraControl.onClosed")}}
-
A handler called when a new CameraControl object in the same app takes over the camera.
-
{{domxref("CameraControl.onRecorderStateChange")}}
-
A function to call when the recorder changes state, either because the recording process encountered an error, or because one of the recording limits (see {{domxref("CameraControl.startRecording()")}}) was reached.
-
{{domxref("CameraControl.sceneMode")}}
-
A string that defines which scene mode the camera is to use (auto by default). Its value must be chosen from {{domxref("CameraCapabilities.sceneModes")}}.
-
{{domxref("CameraControl.whiteBalanceMode")}}
-
A string that defines which white balance mode the camera is to use (auto by default). Its value must be chosen from {{domxref("CameraCapabilities.whiteBalanceModes")}}.
-
{{domxref("CameraControl.zoom")}}
-
A number that defines which kind of zoom factor mode the camera is to use (1 by default). Its value must be chosen from {{domxref("CameraCapabilities.zoomRatios")}}.
-
- -

Methods

- -
-
{{ domxref("CameraControl.autoFocus()") }}
-
Tells the camera to attempt to focus the image.
-
{{ domxref("CameraControl.getPreviewStream()") }}
-
Gets a video stream from the camera; you can use this in an arbitrary context.
-
{{ domxref("CameraControl.getPreviewStreamVideoMode()") }}
-
Gets a video stream from the camera based on a specific video mode.
-
{{ domxref("CameraControl.release()") }}
-
Releases the camera so that other applications can use it.
-
{{ domxref("CameraControl.resumePreview()") }}
-
Resumes the preview video stream after it's been paused by a call to {{domxref("CameraControl.takePicture()")}}.
-
{{ domxref("CameraControl.setExposureCompensation()") }}
-
Lets you specify the exposure compensation factor.
-
{{ domxref("CameraControl.startRecording()") }}
-
Lets you start recording a video stream.
-
{{ domxref("CameraControl.stopRecording()") }}
-
Lets you stop recording a video stream.
-
{{ domxref("CameraControl.takePicture()") }}
-
Lets you capture a single image, receiving it as a {{domxref("Blob")}}.
-
- -

Specification

- -

{{page("/en-US/docs/Web/API/Navigator.MozCameras","Specification")}}

- -

Permissions

- -

{{page("/en-US/docs/Web/API/Navigator.MozCameras","Permissions")}}

- -

See also

- - diff --git a/files/zh-cn/web/api/identitymanager/index.html b/files/zh-cn/web/api/identitymanager/index.html deleted file mode 100644 index 35dab1a6c2..0000000000 --- a/files/zh-cn/web/api/identitymanager/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: IdentityManager -slug: Web/API/IdentityManager -translation_of: Archive/IdentityManager ---- -

{{APIRef("Persona")}}{{non-standard_header}}

- -

The IdentityManager of the  BrowserID protocol exposes the BrowserID API, via {{domxref("navigator.id")}}. This API has gone through several significant revisions. Each generation is listed separately below.

- -

The "Observer" API (Current)

- -

The Observer API introduces much-requested features, such as an improved post-verification experience for first-time users, automatic persistent logins, and easier integration with native applications.

- -
-
{{ domxref("IdentityManager.watch()")}}
-
Registers callbacks to be invoked when a user logs into or out of a website.
-
{{ domxref("IdentityManager.request()")}}
-
Requests a signed identity assertion from the user.
-
{{ domxref("IdentityManager.logout()")}}
-
Logs the user out of a website and prevents the onlogin action from automatically firing on their next visit.
-
- -
-

Users with third-party cookies disabled may experience problems logging in using the Observer API as detailed in issue 2999.

-
- -

The "Callback" API (Current)

- -

The Callback API was introduced in November 2011. It improved upon the initial API by allowing options to be passed to navigator.id.get() and offering experimental support for BrowserID-managed persistent sessions.

- -
-
{{ domxref("IdentityManager.get()")}}
-
Gets the user's BrowserID in a signed assertion.
-
- -

The "VerifiedEmail" API (Deprecated)

- -

The VerifiedEmail API was BrowserID's first API. It was deprecated at the end of 2011.

- -
-
{{ domxref("IdentityManager.getVerifiedEmail()")}} {{ deprecated_inline() }}
-
Gets the user's BrowserID in a signed assertion. This method is deprecated; {{ domxref("navigator.id.get()")}} is backwards compatible and can be used instead.
-
diff --git a/files/zh-cn/web/api/identitymanager/watch/index.html b/files/zh-cn/web/api/identitymanager/watch/index.html deleted file mode 100644 index 1660ccdacf..0000000000 --- a/files/zh-cn/web/api/identitymanager/watch/index.html +++ /dev/null @@ -1,59 +0,0 @@ ---- -title: IdentityManager.watch() -slug: Web/API/IdentityManager/watch -translation_of: Archive/IdentityManager/watch ---- -

{{ ApiRef("Persona") }}

- -
注意: 不是所有的浏览器都支持这项功能. 使用 Persona 的网站必须在他们的页面中包含 polyfill library .
- -

概要

- -

This function registers callbacks that respond to a Persona user logging in or out.

- -

语法

- -
navigator.id.watch({
-  loggedInUser: 'bob@example.org',
-  onlogin: function(assertion) {
-    // A user has logged in! Here you need to:
-    // 1. Send the assertion to your backend for verification and to create a session.
-    // 2. Update your UI.
-  },
-  onlogout: function() {
-    // A user has logged out! Here you need to:
-    // Tear down the user's session by redirecting the user or making a call to your backend.
-  }
-});
-
- -

参数

- -
-
loggedInUser {{ optional_inline() }}
-
NOTE: This parameter was renamed from loggedInEmail in early September. Both names will continue to work for the time being, but code should be changed to use loggedInUser instead.
-
The email address of the currently logged in user. This should be a string containing the user's email address if the website believes that a user is currently logged in, or null otherwise. If the website is unsure, this should be set to undefined or omitted.
-
Persona compares its knowledge of the local user to the value of loggedInUser to determine which callback—onlogin, onlogout, or none at all—to automatically invoke when your page loads. If loggedInUser is undefined or omitted, Persona will invoke either onlogin or onlogout, depending on whether or not a local user should be logged in to your site. These callbacks are not invoked automatically if both BrowserID and loggedInUser agree on the local user's state.
-
Note that Persona may automatically call either onlogin or onlogout when your page loads, but not both. If loggedInUser is set to foo@example.com, but Persona believes bar@example.com should be logged in, only onlogin will be called. It will have an assertion for bar@example.com as its first parameter.
-
onlogin
-
A function which will be invoked and passed a single argument, an assertion, when the user logs in. This function should send the assertion to the site's backend for verification. If verification succeeds, the backend should establish a session for the user and the function should update the UI as appropriate.
-
onlogout
-
A function that will be invoked, without any arguments, when the user logs out. This should tear down the user's session by making a call to the site's backend, or by redirecting the user.
-
- -

示例

- -

需要示例.

- -

技术规范

- -

没有包含在任何技术规范中.

- -

查看其它内容

- - diff --git a/files/zh-cn/web/api/indexeddb_api/using_indexeddb_in_chrome/index.html b/files/zh-cn/web/api/indexeddb_api/using_indexeddb_in_chrome/index.html deleted file mode 100644 index d9d9aa2cbf..0000000000 --- a/files/zh-cn/web/api/indexeddb_api/using_indexeddb_in_chrome/index.html +++ /dev/null @@ -1,27 +0,0 @@ ---- -title: Using IndexedDB in chrome -slug: Web/API/IndexedDB_API/Using_IndexedDB_in_chrome -translation_of: Mozilla/Tech/XPCOM/Using_IndexedDB_in_chrome ---- -

indexedDB API 通常被用来在用户的浏览器端存储来自JavaScript的数据。（点击 Using IndexedDB 复习）。然而，使用system-privileged JavaScript的 Components.utils.importGlobalProperties() 函数也能获取这些API：

- -
Components.utils.importGlobalProperties(["indexedDB"]);
-
-// From here on, it's like using IndexedDB from content
-var req = indexedDB.open("my-database");
-// ...
- -

如果你要创建一个 sandbox ，并且打算在sandbox中使用indexedDB,那么在 Sandbox 的构造函数中使用 wantGlobalProperties配置项：

- -
var options = {
-  "wantGlobalProperties": ["indexedDB"]
-}
-var principal = Cc["@mozilla.org/systemprincipal;1"].createInstance(Ci.nsIPrincipal);
-var sandbox = Components.utils.Sandbox(principal, options);
-
-// The sandbox will have access to indexedDB
-var sandboxScript = 'var req = indexedDB.open("my-database");';
-Components.utils.evalInSandbox(sandboxScript, sandbox);
-
- -

在Firefox 33之前，你可能要使用nsIIndexedDatabaseManager的initWindowless方法，从chrome的代码中方法获取indexedDB。这种方法在Firefox 33时，已经被移除。

diff --git a/files/zh-cn/web/api/navigator/id/index.html b/files/zh-cn/web/api/navigator/id/index.html deleted file mode 100644 index c2d8597274..0000000000 --- a/files/zh-cn/web/api/navigator/id/index.html +++ /dev/null @@ -1,45 +0,0 @@ ---- -title: Navigator.id -slug: Web/API/Navigator/id -translation_of: Archive/Navigator-id ---- -
{{ ApiRef("Persona") }}
- -

{{ non-standard_header() }}

- -
注意: 这个功能的支持还没有构建到任何浏览器中，使用 Persona 的网站必须包含托管在 https://login.persona.org/include.js 上的填充库。
- -

概述

- -

BrowserID 协议定义了 {{ domxref ("window.navigator")}} 对象上的一个新的 id 属性，通过这个属性暴露 BrowserID API。这个 API 已经经历了几个重要修订。下面独立列出了每代 API。

- -

观察者 API（当前）

- -

观察者 API 引入了非常请求化的特性，诸如一个为新手用户改进的提交-验证体验、自动持久化登入和更简单的本地应用集成。

- -
-
{{ domxref("navigator.id.watch()")}}
-
登记在用户登入或登出网站时调用的回调。
-
{{ domxref("navigator.id.request()")}}
-
从用户请求一个签名的身份断言。
-
{{ domxref("navigator.id.logout()")}}
-
把用户登出网站并阻止 onlogin 行为在他们下次访问时触发。
-
- -

回调 API（当前）

- -

回调 API 在 2011 年 11 月被引入。它通过允许传递给 navigator.id.get()和提供 BrowserID 管理的持久会话的实验性支持改进了初始的 API。

- -
-
{{ domxref("navigator.id.get()")}}
-
Gets the user's BrowserID in a signed assertion.
-
- -

VerifiedEmail API（弃用）

- -

VerifiedEmail API 是 BrowserID 的第一个 API。它在 2011 年末被弃用。

- -
-
{{ domxref("navigator.id.getVerifiedEmail()")}} {{ deprecated_inline() }}
-
在一个签名的断言里获取用户的 BrowserID。这个方法已经弃用了；{{ domxref("navigator.id.get()")}} 是向后兼容的替代方法。
-
diff --git a/files/zh-cn/web/api/navigator/mozsettings/index.html b/files/zh-cn/web/api/navigator/mozsettings/index.html deleted file mode 100644 index bd96466118..0000000000 --- a/files/zh-cn/web/api/navigator/mozsettings/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: Navigator.mozSettings -slug: Web/API/Navigator/mozSettings -translation_of: Archive/B2G_OS/API/Navigator/mozSettings ---- -

{{APIRef("Firefox OS")}}{{ non-standard_header() }}

- -

{{ B2GOnlyHeader2('certified') }}

- -

概述

- -

返回一个{{ domxref("SettingsManager") }}对象,你可以使用返回的对象来修改设备的各项设置.

- -

语法

- -
var settings = window.navigator.mozSettings;
-
- -

值

- -

navigator.mozSettings是一个{{domxref("SettingsManager")}}对象,你可以使用该对象来修改设备的各项设置.

- -

规范

- -

目前还不属于任何的规范,不过这个API将作为System Applications Working Group规范的一部分在W3C上讨论.

- -

相关链接

- - diff --git a/files/zh-cn/web/api/navigator/mozsms/index.html b/files/zh-cn/web/api/navigator/mozsms/index.html deleted file mode 100644 index c6c9aff864..0000000000 --- a/files/zh-cn/web/api/navigator/mozsms/index.html +++ /dev/null @@ -1,112 +0,0 @@ ---- -title: Navigator.mozSms -slug: Web/API/Navigator/mozSms -translation_of: Archive/B2G_OS/API/Navigator/mozSms ---- -

{{APIRef("Firefox OS")}}

- -

{{ non-standard_header() }}

- -

{{ obsolete_header(25) }}

- -

{{ B2GOnlyHeader2('certified') }}

- -

返回 {{ domxref("SmsManager") }} 对象，你可以通过该对象进行短消息的收发操作。

- -
-

注意: 废弃! 该对象已被废弃，请参考使用： {{ domxref("window.navigator.mozMobileMessage") }}。

-
- -

语法

- -
var sms = window.navigator.mozSms;
-
- -

参数说明

- -

这是一个非标准接口，不过该接口有在 W3C 部分提及： System Application Working Group.

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Messaging')}}{{Spec2('Messaging')}}Editor Draft (WIP).
- -

浏览器兼容

- -

For obvious reasons, support is primarily expected on mobile browsers.

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatNo() }}{{ CompatGeckoMobile("12.0") }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}
-
- -

Preferences & availability

- - - -

参阅

- - diff --git a/files/zh-cn/web/api/using_the_browser_api/index.html b/files/zh-cn/web/api/using_the_browser_api/index.html deleted file mode 100644 index a829b11d58..0000000000 --- a/files/zh-cn/web/api/using_the_browser_api/index.html +++ /dev/null @@ -1,214 +0,0 @@ ---- -title: Using the browser API -slug: Web/API/Using_the_Browser_API -tags: - - API - - B2G - - Firefox OS - - WebAPI - - 指南 - - 浏览器 - - 非标准 -translation_of: Mozilla/Gecko/Chrome/API/Browser_API/Using ---- -

{{ non-standard_header() }}

- -

{{ B2GOnlyHeader2('privileged') }}

- -

概述

- -

HTML Browser API 是对 HTML {{HTMLElement("iframe")}} 元素的扩展，允许 web app 用来实现浏览器或浏览器类似的应用。主要涉及到两个方面：

- - - -

除此之外，也可以表示成嵌入的内容就是一个 Open Web App。在那种情况下，页面内容就会在适当的 app 上下文（如权限）中被装载。

- -

用法

- -

{{HTMLElement("iframe")}} 可以通过设置 {{htmlattrxref("mozbrowser","iframe")}} 属性而转化为浏览器框架

- -
<iframe src="http://hostname.tld" mozbrowser>
- -

要想嵌入一个 Open Web App,  必须要提供 {{htmlattrxref("mozapp","iframe")}} 以及 app manifest 路径。

- -
<iframe src="http://hostname.tld" mozapp='http://path/to/manifest.webapp' mozbrowser>
- -

最后， {{HTMLElement("iframe")}} 的内容可以在它单独的子进程中装载，通过使用{{htmlattrxref("remote","iframe")}}  属性可以单独嵌入到此页面的框架中。

- -
<iframe src="http://hostname.tld" mozbrowser remote>
- -
-

警告: That last attribute is necessary for security reasons if you plan to load content from an untrusted/unknown origin. If you don't use it, you take the risk of your application being compromised by a malicious web site.

-
- -

权限

- -

想要嵌入到 browser frame 中的任何应用必须要在其中的 app manifest 拥有 browser 权限。

- -
{
-  "permissions": {
-    "browser": {}
-  }
-}
- -

此外，要嵌入一个  Open Web App, app 必须具有 embed-apps 权限。

- -
{
-  "permissions": {
-    "browser": {},
-    "embed-apps": {}
-  }
-}
- -

额外方法

- -

Firefox OS 扩展了 {{domxref("HTMLIFrameElement")}} DOM 接口以支持 browser {{HTMLElement("iframe")}} 所产生的需求。这些新的方法赋予  {{HTMLElement("iframe")}} 了一些强大的功能：

- - - -

这些方法能够使 {{HTMLElement("iframe")}} 根据历史记录进行导航。此处也有必要来实现 back, forward, stop, and reload 按钮。

- - - -

性能方法

- -

Those methods are used to manage the resources used by a browser {{HTMLElement("iframe")}}. This is especially useful for implementing tabbed browser application.

- - - -

Event 方法

- -

In order to manage the browser {{HTMLElement("iframe")}}'s content, many new events were added (see below). The following methods are used to deal with those events:

- - - -

其他方法

- -

Those methods are utilities, useful for apps that host a browser {{HTMLElement("iframe")}}.

- - - -

Events

- -

In order to allow an application to manage the browser {{HTMLElement("iframe")}}, the application can listen for new events about what's happening within the browser {{HTMLElement("iframe")}}. The following new events can be listened for:

- - - -

示例

- -

In this example we'll see how to implement a very basic browser app.

- -

HTML

- -

In the HTML we just add a URL bar, a "Go" and "Stop" button, and a browser {{HTMLElement("iframe")}}.

- -
<header>
-  <input id="url">
-  <button id="go">Go</button>
-  <button id="stop">Stop</button>
-</header>
-
-<iframe src="about:blank" mozbrowser remote></iframe>
-
- -

CSS

- -

We switch between the go and stop button with a little css trick.

- -
button:disabled {
-  display: none;
-}
- -

JavaScript

- -

Now we can add the required functionalities:

- -
document.addEventListener("DOMContentLoaded", function () {
-  var url  = document.getElementById("url");
-  var go   = document.getElementById("go");
-  var stop = document.getElementById("stop");
-
-  var browser = document.getElementsByTagName("iframe")[0];
-
-  // This function is used to switch the Go and Stop button
-  // If the browser is loading content, "Go" is disabled and "Stop" is enabled
-  // Otherwise, "Go" is enabled and "Stop" is disabled
-  function uiLoading(isLoading) {
-      go.disabled =  isLoading;
-    stop.disabled = !isLoading;
-  }
-
-  go.addEventListener("touchend", function () {
-    browser.setAttribute("src", url.value);
-  });
-
-  stop.addEventListener("touchend", function () {
-    browser.stop();
-  });
-
-  // When the browser starts loading content, we switch the "Go" and "Stop" buttons
-  browser.addEventListener('mozbrowserloadstart', function () {
-    uiLoading(true);
-  });
-
-  // When the browser finishes loading content, we switch back the "Go" and "Stop" buttons
-  browser.addEventListener('mozbrowserloadend', function () {
-    uiLoading(false);
-  });
-
-  // In case of error, we also switch back the "Go" and "Stop" buttons
-  browser.addEventListener('mozbrowsererror', function (event) {
-    uiLoading(false);
-    alert("Loading error: " + event.detail);
-  });
-
-  // When a user follows a link, we make sure the new location is displayed in the address bar
-  browser.addEventListener('mozbrowserlocationchange', function (event) {
-    url.value = event.detail;
-  });
-});
- -

参考

- - diff --git a/files/zh-cn/web/api/webvr_api/webvr_environment_setup/index.html b/files/zh-cn/web/api/webvr_api/webvr_environment_setup/index.html deleted file mode 100644 index d3ede8add1..0000000000 --- a/files/zh-cn/web/api/webvr_api/webvr_environment_setup/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: WebVR环境配置 -slug: Web/API/WebVR_API/WebVR_environment_setup -translation_of: Archive/WebVR/WebVR_environment_setup ---- -

{{draft("WebVR API文档目前正在更新中以涵盖1.0版本规范， 因此这些信息中的一部分将会过时。如果你对此有任何疑问请联系 ~~chrisdavidmills。")}}

- -

在这篇文章中， 我们将带你了解配置你的WebVR测试环境所需要做的工作 — 包括硬件和软件配置以及一些常见的错误的解决方法.

- -

硬件

- -

首先来看WebVR的硬件需求。

- -

头戴式显示器与位置追踪器

- -

目前有几款产品可作为VR头戴式显示器，其中最好的是Oculus Rift，它具有坚固的头戴式显示器和安装在三脚架或监视器上的位置追踪相机。Oculus Rift DK2 目前的零售价是350美元(约2410人民币)，但是随着技术的进步和越来越多的头戴设备的出现，预计Oculus Rigt的价格会下降。

- -

- -

对于那些没有能力购买整套VR设备的人，也有其他便宜的产品可以选择。一个VR头戴式显示器其实就是一个高分辨率的屏幕，这个屏幕前面有一组眼镜。显示屏显示的是两个并排的有些偏移和渐晕的屏幕影像的副本，人的两眼各看其中一个，这样就给用户带来立体感，这些对于创建VR景象都是至关重要的。

- -

- -

你可以使用支持的浏览器去感受几近相同的体验，比如使用 Android Nightly版的火狐浏览器—— 如同谷歌的Google Cardboard的想法那样，你可以用任何能固定在头部的装置将手机固定在双眼前面，然后通过手机运行VR软件。这里主要的缺点就是没有位置追踪器，手机处理器没有桌面PC的处理器强大，所以体验上相对就没有那么真实（你转动头部的时候你可能得不到和PC上相同的体验，它有可能比较卡），但是，作为一个便宜的入门的设备，它还是不错的。

- -

一台计算机：用于渲染VR场景

- -

VR硬件需要提供高精度，低延迟的数据，来提供令人满意的用户体验 — 显示刷新需要达到60fps，否则，用户会觉得卡顿、抖动。为了保证达到这点，单位时间有大量的数据需要处理。因此，运行VR应用的计算机的配置要求比较高。最理想的是，你有台带独显的高配的笔记本或台式电脑，如新版MacBook Pro 15“/ 17”或Mac Pro，或Windows游戏本。如果你的电脑运行比较慢，你的体验会比较糟糕。

- -

软件

- -

要运行WebVR软件，你需要如下描述的软件设置。

- -

Oculus Rift SDK

- -

如果你使用Oculus Rift，你需要在你的系统上下载并安装 Oculus Rift SDK 。它包含了VR软件所需的运行环境和OculusWorldDemo示例软件，它对排除故障很有用。

- -

Firefox Nightly与WebVR Enabler Add-on (或其他可替代的)

- -

要设置浏览器，请按照下列步骤操作:

- -
    -
  1. Firefox Nightly 和Developer Edition 都支持WebVR。如果你还没装选择其中之一安装，注意安装最新的版本。
    2. -
  2. 然后，安装 WebVR Enabler Add-on — 这将启用WebVR并禁用多处理浏览（E10S），这是一种新的Firefox浏览功能，目前与WebVR不兼容。
    3. -
  3. 最后，重启浏览器。
    4. -
- -
-

Note: 手动开启对WebVR的支持，你可以进入 about:config 然后打开dom.vr*选项。 WebVR Enabler Add-on更加的fang方便，它一次可以完成您所需要的一切。

-
- -
-

Note: 对于移动端用户，Android版Firefox在Nightly builds中也支持WebVR，但是现在还没优化，欢迎反馈意见。

-
- -
-

Note: 还有可用的WebVR支持的实验性Chrome产品。 要了解更多，请查看Brandon Jones的 Bringing VR to Chrome。

-
- -

显示配置

- -

为了获得最佳性能，以下步骤的显示器配置非常重要。 不这样做会导致过度抖动和延迟。 我们正在努力改进这些方面，使WebVR真正的即插即用，但是现在最好的结果需要手动配置。

- -

Windows

- -

在控制面板中，先进入Display > Screen Resolution（显示 > 屏幕分辨率）. 设置:

- - - -

- -

然后，进入 Advanced Settings > Monitor > Monitor Settings（高级显示设置 > 监视器 > 监视器设置）， 设置屏幕刷新频率为 60Hz.

- -

- -

Mac

- -

首先，进入System Preferences > Displays > Display. 设置:

- - - -

- -

然后，进入 System Preferences > Displays > Arrangement 设置Arrangement为Mirrored.

- -

- -

故障排除

- -

在这个部分，我们提供一些故障排除方法。

- -
-
我的头戴式显示器或者位置追踪器相机不工作
-
尝试使用Oculus Rift SDK附带的OculusWorldDemo测试系统，如果您使用的是其他的VR硬件设备，则使用配套的测试系统。 如果您的硬件设备完全不工作，请确保已完全按照随附手册中的说明进行设置。 常见的错误包括将镜头盖留在追踪相机上和忘记插入USB电缆。
-
我的头戴式显示器或者位置追踪器相机还是不工作
-
一个常见的问题是追踪摄像机停止工作，所以你仍然可以看到图像，但它不会跟着你的头一起旋转。 提示：如果摄像机工作，相机的蓝色指示灯将亮起。 如果WebVR应用程序仍然不工作，并且OculusWorldDemo正常运行，请尝试重新启动浏览器 —— Nightly仍然处于实验性阶段，有时会出现异常。
-
即使我正确的配置了 {{anch("Display configuration")}}，我看到显示的图像卡顿抖动
-
有可能是您的显卡太慢，您没有独显，或者当Oculus Rift打开时，您的计算机没有切换到显卡。 但我们不能确定适用于所有的电脑。无论哪种情况，你可以通过测试看看发生了什么，比如在Mac上使用gfxCardStatus软件来测试。 它会让你看到在什么时候集成或独显会切换，或强制使用某一个。 如果它返回消息“您正在使用gfxCardStatus不支持的系统，请确保您使用的是具有双GPU的MacBook Pro。 那么你可能没有GPU，你需要一个更快的处理器或选择容忍。 对于Windows，目前没有类似的应用程序，您必须手动进行更改。
-
我的VR设备旁的第二个监视器表现很奇怪。
-
如果你有第二个监视器（或者笔记本的外接显示器），当你使用 VR设备的时候最好将它断开，否则，有时候它会造成奇怪的问题。
-
Linux系统可以使用吗？
-
WebVR在Linux系统上目前不能使用。未完待续
-
-- cgit v1.2.3-54-g00ecf