webRTC Hotwire and Ruby on Rails

The Stimulus room controller handles Enter button click.It gets the user's local audio and video and feeds them into the local video element. It also starts Action Cable subscriptions specific to the current room: one for communicating WebRTC messages: the Signaller; and one for clients to ping others: the RoomSubscription.

Stimulus控制器处理Enter按钮的点击。它获取用户的本地音频和视频，并将其送到本地视频元素中。它也启动了在针对当前room的 Action Cable 订阅（signaling subscription and room subscription）分别处理webRTC消息和ping其他客户端。

Once connected, the room channel broadcasts the presence of this new client.Each connected client then "greets" this newcomer by calling the greet action on the room channel and specifying to and from fields.

连接后，房间频道会广播此新客户端的存在。然后，每个连接的客户端通过在房间通道上调用问候动作并指定往返字段来“问候”这个新来者。

The greet action broadcasts specifically to the newcomer, a Turbo Stream update which appends a media element representing the remote client.

问候动作专门向新来者广播，这是一个Turbo Stream更新，它附加了一个代表远程客户端的媒体元素。

It's important we do this first so that it's ready for incoming streams. The medium controller messages the room controller to notify that it has been added. This begins the WebRTC negotiation to form a connection between the two clients.

重要的是，我们首先要这样做，以便为传入流做好准备。介质控制器向房间控制器发送消息，通知其已被添加。这将启动WebRTC协商，以在两个客户端之间建立连接。

The WebRTC negotiation is quite complex, and even though things are required to happen in a particular order, responses are triggered asynchronously, making it tricky to get right.

WebRTC协商非常复杂，即使事情需要以特定的顺序发生，响应也是异步触发的，因此很难正确处理。

This is where the WebRTC Perfect Negotiation pattern comes in.We don't go into it too much here, as it's covered well elsewhere; but for the purpose of this description (deep breath).

这就是WebRTC完美协商模式发挥作用的地方。我们在这里不会过多地讨论它，因为它在其他地方都有很好的介绍；但就本描述而言（深呼吸）。

SDP:

Session Description Protocol descriptions.

会话描述协议描述。

ICE:

Interactive Connectivity Establishment .

交互式连接建立。

SDP descriptions and ICE' candidates are exchanged over the Signaller.

SDP描述和ICE候选人通过Signaller签署人进行交换。

The negotiation is "perfect" as it ensures that the RTCPeerConnection is in the correct state for setting descriptions, and avoids collision errors by having one client be "polite" and other "impolite"-the polite one backs down in the case of a collision.

协商是“完美的”，因为它确保RTCPeerConnection处于设置描述的正确状态，并通过让一个客户端“礼貌”而另一个“不礼貌”来避免冲突错误——在发生冲突时，礼貌的客户端会退缩。

Anyway, the code for this has been mostly lifted from the spec and handled by the Signaller /WebrtcNegotiation. When creating the negotiation, the room controller listens for track events on the TRCPeerConnection, so it can start streaming from the remote client.

无论如何，此代码大多是从规范中提取的，由Signaler/WebrtcNegotiation处理。创建协商时，房间控制器会监听TRCPeerConnection上的跟踪事件，以便它可以从远程客户端开始流式传输。

Once the negotiation has been created, the newcomer client notifies the other client by reciprocating the greeting i.e. calling greet on the room channel.

一旦创建了协商，新客户通过在房间频道上来回问候（即打招呼）来通知其他客户。

This triggers the same process as above on the other client: appending a media element via a Turbo Stream update, and starting a webRTC negotiation.

这在另一个客户端上触发了与上述相同的过程：通过Turbo Stream更新附加媒体元素，并启动webRTC协商。

This time though, instead of a greeting (which would be very polite,but awkward and endless!), the client starts streaming to the other client, by adding media tracks to the connection.

不过，这一次，客户端不是问候（这将是非常礼貌的，但又尴尬又无休止！），而是通过在连接中添加媒体曲目开始向另一个客户端流式传输。

This kicks off the complex exchange of SDP descriptions and ICE candidates, and once either is received by the newcomer, it can start the streaming process from its own stream to the other client. Now all clients are streaming to and from each other.

这启动了SDP描述和ICE候选者的复杂交换，一旦新来者收到其中任何一个，它就可以开始从自己的流到另一个客户端的流处理。现在，所有客户端都在相互之间进行流式传输。

Finally, when a client disconnects from the room channel, a Turbo Stream update removes the media element from the screen. The media controller broadcasts its removal so the room controller can clean up.

最后，当客户端与房间频道断开连接时，Turbo Stream更新会从屏幕上删除媒体元素。媒体控制器广播其移除，以便房间控制器可以进行清理。

To summaries the flow:.

1. A newcomer broadcasts its presence to others in the room.

1.新来的人向房间里的其他人广播自己的存在。

2. The connected clients greet this newcomer letting them know their ID.

2.连接的客户端向这位新来者打招呼，让他们知道自己的ID。

3. A Turbo Stream update creates a video element on the newcomer's screen for each greeting it receives.

3.Turbo Stream更新为新用户收到的每个问候语在新用户的屏幕上创建一个视频元素。

4.The newcomer creates a WebRTC negotiation and sends a greeting back to each of the other clients.

4.新人创建WebRTC协商，并向其他每个客户端发送问候。

5. TurboStream updtes create video elements on each of the other clients' screens.

5.TurboStream updtes在其他每个客户端的屏幕上创建视频元素。

6. WebRTC negotiations are created by each of the other clients, and they start streaming to the newcomer.

6.WebRTC协商由其他每个客户端创建，并开始向新客户端流式传输。

7. Reacting to negotiation activity (SDP descriptions and ICE candidate exchanges), the newcomer starts streaming to other clients.

7.对协商活动（SDP描述和ICE候选交换）做出反应后，新来者开始向其他客户端流式传输。