Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

zh-cn: batch space fix part 3 #15578

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/webgl_api/types/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ slug: Web/API/WebGL_API/Types

{{DefaultAPISidebar("WebGL")}}

以下是[WebGL](/zh-CN/docs/Web/API/WebGL_API)提供的接口中用到的变量类型。
以下是 [WebGL](/zh-CN/docs/Web/API/WebGL_API)提供的接口中用到的变量类型。

## WebGL 1

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/webglactiveinfo/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ slug: Web/API/WebGLActiveInfo

{{APIRef("WebGL")}}

**WebGLActiveInfo**是[WebGL API](/zh-CN/docs/Web/API/WebGL_API) 的一部分,并且代表了调用 {{domxref("WebGLRenderingContext.getActiveAttrib()")}} 和{{domxref("WebGLRenderingContext.getActiveUniform()")}} 这两个方法后传回的信息。
**WebGLActiveInfo**是 [WebGL API](/zh-CN/docs/Web/API/WebGL_API) 的一部分,并且代表了调用 {{domxref("WebGLRenderingContext.getActiveAttrib()")}} 和{{domxref("WebGLRenderingContext.getActiveUniform()")}} 这两个方法后传回的信息。

## 属性值

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ WebGLTexture gl.createTexture();

## 示例

另见 [Using textures in WebGL](/zh-CN/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL)上的[WebGL tutorial](/zh-CN/docs/Web/API/WebGL_API/Tutorial)
另见 [Using textures in WebGL](/zh-CN/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL)上的 [WebGL tutorial](/zh-CN/docs/Web/API/WebGL_API/Tutorial)

### 创建一个纹理

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ slug: Web/API/WebGLRenderingContext/enableVertexAttribArray

> **备注:** 你可以通过以下方法关闭顶点属性数组 {{domxref("WebGLRenderingContext.disableVertexAttribArray", "disableVertexAttribArray()")}}.

在 WebGL 中,作用于顶点的数据会先储存在[attributes](/zh-CN/docs/Web/API/WebGL_API/Data#Attributes)。这些数据仅对 JavaScript 代码和顶点着色器可用。属性由索引号引用到 GPU 维护的属性列表中。在不同的平台或 GPU 上,某些顶点属性索引可能具有预定义的值。创建属性时,WebGL 层会分配其他属性。
在 WebGL 中,作用于顶点的数据会先储存在 [attributes](/zh-CN/docs/Web/API/WebGL_API/Data#Attributes)。这些数据仅对 JavaScript 代码和顶点着色器可用。属性由索引号引用到 GPU 维护的属性列表中。在不同的平台或 GPU 上,某些顶点属性索引可能具有预定义的值。创建属性时,WebGL 层会分配其他属性。

无论怎样,都需要你使用 `enableVertexAttribArray()` 方法,来激活每一个属性以便使用,不被激活的属性是不会被使用的。一旦激活,以下其他方法就可以获取到属性的值了,包括{{domxref("WebGLRenderingContext.vertexAttribPointer", "vertexAttribPointer()")}}、{{domxref("WebGLRenderingContext.vertexAttrib", "vertexAttrib*()")}} 和 {{domxref("WebGLRenderingContext.getVertexAttrib", "getVertexAttrib()")}}。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ slug: Web/API/WebGLRenderingContext/getTexParameter

{{APIRef("WebGL")}}

**`WebGLRenderingContext.getTexParameter()`** 此[WebGL API](/zh-CN/docs/Web/API/WebGL_API)方法返回特定的纹理信息。
**`WebGLRenderingContext.getTexParameter()`** 此 [WebGL API](/zh-CN/docs/Web/API/WebGL_API)方法返回特定的纹理信息。

## 语法

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/webglshaderprecisionformat/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: WebGLShaderPrecisionFormat
slug: Web/API/WebGLShaderPrecisionFormat
---

**WebGLShaderPrecisionFormat** 接口是[WebGL API](/zh-CN/docs/Web/API/WebGL_API) 的一部分,它表示通过调用{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}返回信息的信息。
**WebGLShaderPrecisionFormat** 接口是 [WebGL API](/zh-CN/docs/Web/API/WebGL_API) 的一部分,它表示通过调用{{domxref("WebGLRenderingContext.getShaderPrecisionFormat()")}}返回信息的信息。

## 属性

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/webgltexture/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: WebGLTexture
slug: Web/API/WebGLTexture
---

**WebGLTexture**接口是[WebGL API](/zh-CN/docs/Web/API/WebGL_API)的一部分,为不透明的纹理对象提供储存和状态等纹理操作。
**WebGLTexture**接口是 [WebGL API](/zh-CN/docs/Web/API/WebGL_API)的一部分,为不透明的纹理对象提供储存和状态等纹理操作。

## 描述

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/webglvertexarrayobject/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ slug: Web/API/WebGLVertexArrayObject

{{APIRef("WebGL")}}

**`WebGLVertexArrayObject`**接口是[WebGL 2 API](/zh-CN/docs/Web/API/WebGL_API)的一部分,顶点数组对象 (VAOs) 指向顶点数组数据,并提供不同顶点数据集合的名称。
**`WebGLVertexArrayObject`**接口是 [WebGL 2 API](/zh-CN/docs/Web/API/WebGL_API)的一部分,顶点数组对象 (VAOs) 指向顶点数组数据,并提供不同顶点数据集合的名称。

当使用`WebGLVertexArrayObject`对象时,这些方法会很有用:

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/webrtc_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ WebRTC 包含了若干相互关联的 API 和协议以达到这个目标。你
- [使用 WebRTC 拍摄静止的照片](/zh-CN/docs/Web/API/WebRTC_API/Taking_still_photos)
- : 这篇文章介绍了如何在 WebRTC 的支持下可以访问到电脑或者手机的摄像头并且使用它来拍摄照片。
- [一个简易 RTCDataChannel 的例子](/zh-CN/docs/Web/API/WebRTC_API/Simple_RTCDataChannel_sample)
- : {{domxref("RTCDataChannel")}} 接口是一个特性,使用它你可以在两个点之间发送和接收任意数据。它的 API 和[WebSocket API](/zh-CN/docs/Web/API/WebSocket_API)非常相似,所以同样的代码对他们来说都可以使用。
- : {{domxref("RTCDataChannel")}} 接口是一个特性,使用它你可以在两个点之间发送和接收任意数据。它的 API 和 [WebSocket API](/zh-CN/docs/Web/API/WebSocket_API)非常相似,所以同样的代码对他们来说都可以使用。

## 资源

Expand Down
8 changes: 4 additions & 4 deletions files/zh-cn/web/api/webrtc_api/protocols/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,29 +13,29 @@ slug: Web/API/WebRTC_API/Protocols

## STUN

NAT 的会话穿越功能[Session Traversal Utilities for **NAT** (STU**N**)](http://en.wikipedia.org/wiki/STUN) (缩略语的最后一个字母是 NAT 的首字母) 是一个允许位于 NAT 后的客户端找出自己的公网地址,判断出路由器阻止直连的限制方法的协议。
NAT 的会话穿越功能 [Session Traversal Utilities for **NAT** (STU**N**)](http://en.wikipedia.org/wiki/STUN) (缩略语的最后一个字母是 NAT 的首字母) 是一个允许位于 NAT 后的客户端找出自己的公网地址,判断出路由器阻止直连的限制方法的协议。

客户端通过给公网的 STUN 服务器发送请求获得自己的公网地址信息,以及是否能够被(穿过路由器)访问。

![An interaction between two users of a WebRTC application involving a STUN server.](webrtc-stun.png)

## NAT

网络地址转换协议[Network Address Translation (NAT)](http://en.wikipedia.org/wiki/NAT) 用来给你的(私网)设备映射一个公网的 IP 地址的协议。一般情况下,路由器的 WAN 口有一个公网 IP,所有连接这个路由器 LAN 口的设备会分配一个私有网段的 IP 地址(例如 192.168.1.3)。私网设备的 IP 被映射成路由器的公网 IP 和唯一的端口,通过这种方式不需要为每一个私网设备分配不同的公网 IP,但是依然能被外网设备发现。
网络地址转换协议 [Network Address Translation (NAT)](http://en.wikipedia.org/wiki/NAT) 用来给你的(私网)设备映射一个公网的 IP 地址的协议。一般情况下,路由器的 WAN 口有一个公网 IP,所有连接这个路由器 LAN 口的设备会分配一个私有网段的 IP 地址(例如 192.168.1.3)。私网设备的 IP 被映射成路由器的公网 IP 和唯一的端口,通过这种方式不需要为每一个私网设备分配不同的公网 IP,但是依然能被外网设备发现。

一些路由器严格地限定了谁能连接内网的设备。这种情况下,即使 STUN 服务器识别了该内网设备的公网 IP 和端口的映射,依然无法和这个内网设备建立连接。这种情况下就需要转向 TURN 协议。

## TURN

一些路由器使用一种“对称型 NAT”的 NAT 模型。这意味着路由器只接受和对端先前建立的连接(就是下一次请求建立新的连接映射)。

NAT 的中继穿越方式[Traversal Using Relays around NAT (TURN)](http://en.wikipedia.org/wiki/TURN) 通过 TURN 服务器中继所有数据的方式来绕过“对称型 NAT”。你需要在 TURN 服务器上创建一个连接,然后告诉所有对端设备发包到服务器上,TURN 服务器再把包转发给你。很显然这种方式是开销很大的,所以只有在没得选择的情况下采用。
NAT 的中继穿越方式 [Traversal Using Relays around NAT (TURN)](http://en.wikipedia.org/wiki/TURN) 通过 TURN 服务器中继所有数据的方式来绕过“对称型 NAT”。你需要在 TURN 服务器上创建一个连接,然后告诉所有对端设备发包到服务器上,TURN 服务器再把包转发给你。很显然这种方式是开销很大的,所以只有在没得选择的情况下采用。

![An interaction between two users of a WebRTC application involving STUN and TURN servers.](webrtc-turn.png)

## SDP

会话描述协议[Session Description Protocol (SDP)](http://en.wikipedia.org/wiki/Session_Description_Protocol) 是一个描述多媒体连接内容的协议,例如分辨率,格式,编码,加密算法等。所以在数据传输时两端都能够理解彼此的数据。本质上,这些描述内容的元数据并不是媒体流本身。
会话描述协议 [Session Description Protocol (SDP)](http://en.wikipedia.org/wiki/Session_Description_Protocol) 是一个描述多媒体连接内容的协议,例如分辨率,格式,编码,加密算法等。所以在数据传输时两端都能够理解彼此的数据。本质上,这些描述内容的元数据并不是媒体流本身。

从技术上讲,SDP 并不是一个真正的协议,而是一种数据格式,用于描述在设备之间共享媒体的连接。

Expand Down
2 changes: 1 addition & 1 deletion files/zh-cn/web/api/webrtc_api/session_lifetime/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ slug: Web/API/WebRTC_API/Session_lifetime

### 信令

信令是在两个设备之间发送控制信息以确定通信协议、信道、媒体编解码器和格式以及数据传输方法以及任何所需的路由信息的过程。关于 WebRTC 的信令流程最重要的一点是:**信令在规范中并没有定义。**所以开发者需要自己决定如何实现这个过程。开发者可以为应用程序引擎选择任意的信息协议(如 SIP 或 XMPP),任意双向通信信道(如 WebSocket 或 XMLHttpRequest) 与持久连接服务器的 API(如[Google Channel API](https://developers.google.com/appengine/docs/python/channel/overview))一起工作。
信令是在两个设备之间发送控制信息以确定通信协议、信道、媒体编解码器和格式以及数据传输方法以及任何所需的路由信息的过程。关于 WebRTC 的信令流程最重要的一点是:**信令在规范中并没有定义。**所以开发者需要自己决定如何实现这个过程。开发者可以为应用程序引擎选择任意的信息协议(如 SIP 或 XMPP),任意双向通信信道(如 WebSocket 或 XMLHttpRequest) 与持久连接服务器的 API(如 [Google Channel API](https://developers.google.com/appengine/docs/python/channel/overview))一起工作。

你可能会想,为什么这么一个对于建立 WebRTC 连接至关重要的基本过程居然没有定义在规范里?答案很简单:由于两个设备无法直接相互联系,规范无法预测 WebRTC 的所有可能用例,因此更明智的做法就是让开发人员们自己选择合适的网络技术和消息传递协议。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,15 @@ slug: Web/API/WebRTC_API/Signaling_and_video_calling

[WebRTC](/zh-CN/docs/Web/API/WebRTC_API) 是一个完全对等技术,用于实时交换音频、视频和数据,同时提供一个中心警告。如其他地方所讨论的,必须进行一种发现和媒体格式协商,以使不同网络上的两个设备相互定位。这个过程被称为**信令**,并涉及两个设备连接到第三个共同商定的服务器。通过这个第三方服务器,这两台设备可以相互定位,并交换协商消息。

在本文中,我们将进一步扩充 [WebSocket chat](https://webrtc-from-chat.glitch.me/) 作为我们的 WebSocket 文档的一部分(本文链接即将发布;它实际上还没有在线),以支持在用户之间的双向视频通话。你可以在[Glitch](https://webrtc-from-chat.glitch.me/)上查看这个例子,你也尝试[修改](https://glitch.com/edit/#!/remix/webrtc-from-chat)这个例子。你还可以在[GitHub](https:/mdn/samples-server/tree/master/s/webrtc-from-chat)上查看完整的项目代码。
在本文中,我们将进一步扩充 [WebSocket chat](https://webrtc-from-chat.glitch.me/) 作为我们的 WebSocket 文档的一部分(本文链接即将发布;它实际上还没有在线),以支持在用户之间的双向视频通话。你可以在 [Glitch](https://webrtc-from-chat.glitch.me/)上查看这个例子,你也尝试[修改](https://glitch.com/edit/#!/remix/webrtc-from-chat)这个例子。你还可以在 [GitHub](https:/mdn/samples-server/tree/master/s/webrtc-from-chat)上查看完整的项目代码。

> **备注:** 如果你尝试在 Glitch 的例子,请注意任何代码的改动将立即重置所有连接。并且这个例子有短暂的延迟;Glitch 的例子仅仅作为简单的实验和测试用途。

## 信令服务器

两个设备之间建立 WebRTC 连接需要一个**信令服务器**来实现双方通过网络进行连接。信令服务器的作用是作为一个中间人帮助双方在尽可能少的暴露隐私的情况下建立连接。那我们如何实现这个服务器并且它是如何工作的呢?

WebRTC 并没有提供信令传递机制,你可以使用任何你喜欢的方式如[WebSocket](/zh-CN/docs/Web/API/WebSocket_API) 或者{{domxref("XMLHttpRequest")}} 等等,来交换彼此的令牌信息。
WebRTC 并没有提供信令传递机制,你可以使用任何你喜欢的方式如 [WebSocket](/zh-CN/docs/Web/API/WebSocket_API) 或者{{domxref("XMLHttpRequest")}} 等等,来交换彼此的令牌信息。

重要的是信令服务器并不需要理解和解释信令数据内容。虽然它基于 {{Glossary("SDP")}}但这并不重要:通过信令服务器的消息的内容实际上是一个黑盒。重要的是,当{{Glossary("ICE")}}子系统指示你将信令数据发送给另一个对等方时,你就这样做,而另一个对等方知道如何接收此信息并将其传递给自己的 ICE 子系统。你所要做的就是来回传递信息。内容对信令服务器一点都不重要。

Expand Down Expand Up @@ -181,7 +181,7 @@ if (sendToClients) {

#### 向信令服务器发送信息

在整个代码中,我们调用 `sendToServer()` 以便向信令服务器发送消息。此函数使用[WebSocket](/zh-CN/docs/Web/API/WebSockets_API)连接执行其工作:
在整个代码中,我们调用 `sendToServer()` 以便向信令服务器发送消息。此函数使用 [WebSocket](/zh-CN/docs/Web/API/WebSockets_API)连接执行其工作:

```js
function sendToServer(msg) {
Expand Down Expand Up @@ -349,11 +349,11 @@ function createPeerConnection() {
- {{domxref("RTCPeerConnection.onremovetrack")}}
- : 调用与 `ontrack`相对应的对象来处理 `removetrack` 事件;当远程对等端从正在发送的媒体中删除磁道时,它将发送到`RTCPeerConnection`。参见[处理流的移除](#处理流的移除) 。
- {{domxref("RTCPeerConnection.oniceconnectionstatechange")}}
- : ICE 层发送 `iceconnectionstatechange` 事件,让你了解 ICE 连接状态的更改。这可以帮助你了解连接何时失败或丢失。我们将在下面的[ICE 连接状态](#ice_连接状态)中查看此示例的代码。
- : ICE 层发送 `iceconnectionstatechange` 事件,让你了解 ICE 连接状态的更改。这可以帮助你了解连接何时失败或丢失。我们将在下面的 [ICE 连接状态](#ice_连接状态)中查看此示例的代码。
- {{domxref("RTCPeerConnection.onicegatheringstatechange")}}
- : 当 ICE 代理收集候选对象的过程从一个状态切换到另一个状态(例如开始收集候选对象或完成协商)时,ICE 层将向你发送事件(“ICegulatingStateChange”)事件。见下文 [ICE 收集状态](#ice_收集状态)。
- {{domxref("RTCPeerConnection.onsignalingstatechange")}}
- : 当信令进程的状态更改时(或如果到信令服务器的连接更改时),WebRTC 架构将向你发送 `signalingstatechange` 消息。参见[ICE 信令状态](#ice_信令状态)查看我们的代码。
- : 当信令进程的状态更改时(或如果到信令服务器的连接更改时),WebRTC 架构将向你发送 `signalingstatechange` 消息。参见 [ICE 信令状态](#ice_信令状态)查看我们的代码。

#### 开始协商

Expand Down Expand Up @@ -488,7 +488,7 @@ function handleICECandidateEvent(event) {

##### 接收 ICE 候选

信令服务器使用它选择的任何方法将每个 ICE 候选传递给目标对等机;在我们的示例中,我们用的是 JSON 对象, `type` 属性包含字符串 `"new-ice-candidate"`。我们的 r `handleNewICECandidateMsg()` 函数由主[WebSocket](/zh-CN/docs/MDN/Doc_status/API/WebSockets)传入消息代码调用,以处理这些消息:
信令服务器使用它选择的任何方法将每个 ICE 候选传递给目标对等机;在我们的示例中,我们用的是 JSON 对象, `type` 属性包含字符串 `"new-ice-candidate"`。我们的 r `handleNewICECandidateMsg()` 函数由主 [WebSocket](/zh-CN/docs/MDN/Doc_status/API/WebSockets)传入消息代码调用,以处理这些消息:

```js
function handleNewICECandidateMsg(msg) {
Expand Down Expand Up @@ -611,7 +611,7 @@ function closeVideoCall() {
3. 通过调用{{domxref("RTCPeerConnection.close", "myPeerConnection.close()")}}.关闭 {{domxref("RTCPeerConnection")}} 。
4. 设置 `myPeerConnection` 为 `null`,确保我们的代码知道没有正在进行的调用;当用户单击用户列表中的名称时,这很有用。

然后,对于传入和传出的{{HTMLElement("video")}}元素,我们使用它们的{{domxref("Element.removeAttribute", "removeAttribute()")}} 方法删除它们的 [`srcobject`](/zh-CN/docs/Web/HTML/Element/video#srcobject)和[`src`](/zh-CN/docs/Web/HTML/Element/video#src) 属性。这就完成了流与视频元素的分离。
然后,对于传入和传出的{{HTMLElement("video")}}元素,我们使用它们的{{domxref("Element.removeAttribute", "removeAttribute()")}} 方法删除它们的 [`srcobject`](/zh-CN/docs/Web/HTML/Element/video#srcobject)和 [`src`](/zh-CN/docs/Web/HTML/Element/video#src) 属性。这就完成了流与视频元素的分离。

最后,我们在"Hang Up"按钮上将{{domxref("HTMLElement.disabled", "disabled")}}属性设置为 `true`,使其在没有调用的情况下不可点击;然后我们将`targetUsername` 设置为 `null` ,因为我们不再与任何人交谈。这允许用户呼叫另一个用户,或接收来电。

Expand Down Expand Up @@ -666,6 +666,6 @@ function handleICEGatheringStateChangeEvent(event) {

## 下一步

现在你可以[在 Glitch 上尝试这个例子](https://webrtc-from-chat.glitch.me/),以看到它的实际效果。打开两个设备上的 Web 控制台并查看记录的输出,尽管你在上面所示的代码中看不到它,但是服务器上(以及[GitHub](https:/mdn/samples-server/tree/master/s/webrtc-from-chat)上)的代码有很多控制台输出,因此你可以看到信令和连接进程在工作。
现在你可以[在 Glitch 上尝试这个例子](https://webrtc-from-chat.glitch.me/),以看到它的实际效果。打开两个设备上的 Web 控制台并查看记录的输出,尽管你在上面所示的代码中看不到它,但是服务器上(以及 [GitHub](https:/mdn/samples-server/tree/master/s/webrtc-from-chat)上)的代码有很多控制台输出,因此你可以看到信令和连接进程在工作。

另一个明显的改进是添加了一个“铃声”功能,这样一来,一个"用户 X 正在呼叫。你是否要应答?" 提示会首先出现,而不仅仅是请求用户允许使用相机和麦克风。
Loading
Loading