From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../signaling_and_video_calling/index.html | 38 +++++++++++----------- 1 file changed, 19 insertions(+), 19 deletions(-) (limited to 'files/ru/web/api/webrtc_api') diff --git a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html index 73db097039..2dbda88c71 100644 --- a/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html +++ b/files/ru/web/api/webrtc_api/signaling_and_video_calling/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling

First up is the addition of the function sendToOneUser(). As the name suggests, this sends a stringified JSON message to a particular username.

-
function sendToOneUser(target, msgString) {
+
function sendToOneUser(target, msgString) {
   var isUnique = true;
   var i;
 
@@ -49,7 +49,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 
 

Our original chat demo didn't support sending messages to a specific user. The next task is to update the main WebSocket message handler to support doing so. This involves a change near the end of the "connection" message handler:

-
if (sendToClients) {
+
if (sendToClients) {
   var msgString = JSON.stringify(msg);
   var i;
 
@@ -163,7 +163,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 
 

The HTML for our client needs a location for video to be presented. This requires video elements, and a button to hang up the call:

-
<div class="flexChild" id="camera-container">
+
<div class="flexChild" id="camera-container">
   <div class="camera-box">
     <video id="received_video" autoplay></video>
     <video id="local_video" autoplay muted></video>
@@ -187,7 +187,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 
 

Throughout our code, we call sendToServer() in order to send messages to the signaling server. This function uses the WebSocket connection to do its work:

-
function sendToServer(msg) {
+
function sendToServer(msg) {
   var msgJSON = JSON.stringify(msg);
 
   connection.send(msgJSON);
@@ -199,7 +199,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 
 

The code which handles the "userlist" message calls handleUserlistMsg(). Here we set up the handler for each connected user in the user list displayed to the left of the chat panel. This function receives a message object whose users property is an array of strings specifying the user names of every connected user.

-
function handleUserlistMsg(msg) {
+
function handleUserlistMsg(msg) {
   var i;
   var listElem = document.querySelector(".userlistbox");
 
@@ -230,7 +230,7 @@ translation_of: Web/API/WebRTC_API/Signaling_and_video_calling
 
 

When the user clicks on a username they want to call, the invite() function is invoked as the event handler for that {{event("click")}} event:

-
var mediaConstraints = {
+
var mediaConstraints = {
   audio: true, // We want an audio track
   video: true // ...and we want a video track
 };
@@ -280,7 +280,7 @@ function invite(evt) {
 
 

If the promise returned by getUserMedia() concludes in a failure, our handleGetUserMediaError() function performs.

-
function handleGetUserMediaError(e) {
+
function handleGetUserMediaError(e) {
   switch(e.name) {
     case "NotFoundError":
       alert("Unable to open your call because no camera and/or microphone" +
@@ -306,7 +306,7 @@ function invite(evt) {
 
 

The createPeerConnection() function is used by both the caller and the callee to construct their {{domxref("RTCPeerConnection")}} objects, their respective ends of the WebRTC connection. It's invoked by invite() when the caller tries to start a call, and by handleVideoOfferMsg() when the callee receives an offer message from the caller.

-
function createPeerConnection() {
+
function createPeerConnection() {
   myPeerConnection = new RTCPeerConnection({
       iceServers: [     // Information about ICE servers - Use your own!
         {
@@ -358,7 +358,7 @@ function invite(evt) {
 
 

Once the caller has created its  {{domxref("RTCPeerConnection")}}, created a media stream, and added its tracks to the connection as shown in {{anch("Starting a call")}}, the browser will deliver a {{event("negotiationneeded")}} event to the {{domxref("RTCPeerConnection")}} to indicate that it's ready to begin negotiation with the other peer. Here's our code for handling the {{event("negotiationneeded")}} event:

-
function handleNegotiationNeededEvent() {
+
function handleNegotiationNeededEvent() {
   myPeerConnection.createOffer().then(function(offer) {
     return myPeerConnection.setLocalDescription(offer);
   })
@@ -406,7 +406,7 @@ function invite(evt) {
 
 

When the offer arrives, the callee's handleVideoOfferMsg() function is called with the "video-offer" message that was received. This function needs to do two things. First, it needs to create its own {{domxref("RTCPeerConnection")}} and add the tracks containing the audio and video from its microphone and webcam to that. Second, it needs to process the received offer, constructing and sending its answer.

-
function handleVideoOfferMsg(msg) {
+
function handleVideoOfferMsg(msg) {
   var localStream = null;
 
   targetUsername = msg.name;
@@ -460,7 +460,7 @@ function invite(evt) {
 
 

Your {{domxref("RTCPeerConnection.onicecandidate", "onicecandidate")}} handler receives an event whose candidate property is the SDP describing the candidate (or is null to indicate that the ICE layer has run out of potential configurations to suggest). The contents of candidate are what you need to transmit using your signaling server. Here's our example's implementation:

-
function handleICECandidateEvent(event) {
+
function handleICECandidateEvent(event) {
   if (event.candidate) {
     sendToServer({
       type: "new-ice-candidate",
@@ -491,7 +491,7 @@ function invite(evt) {
 
 

The signaling server delivers each ICE candidate to the destination peer using whatever method it chooses; in our example this is as JSON objects, with a type property containing the string "new-ice-candidate". Our handleNewICECandidateMsg() function is called by our main WebSocket incoming message code to handle these messages:

-
function handleNewICECandidateMsg(msg) {
+
function handleNewICECandidateMsg(msg) {
   var candidate = new RTCIceCandidate(msg.candidate);
 
   myPeerConnection.addIceCandidate(candidate)
@@ -514,7 +514,7 @@ function invite(evt) {
 
 

When new tracks are added to the RTCPeerConnection— either by calling its {{domxref("RTCPeerConnection.addTrack", "addTrack()")}} method or because of renegotiation of the stream's format—a {{event("track")}} event is set to the RTCPeerConnection for each track added to the connection. Making use of newly added media requires implementing a handler for the track event. A common need is to attach the incoming media to an appropriate HTML element. In our example, we add the track's stream to the {{HTMLElement("video")}} element that displays the incoming video:

-
function handleTrackEvent(event) {
+
function handleTrackEvent(event) {
   document.getElementById("received_video").srcObject = event.streams[0];
   document.getElementById("hangup-button").disabled = false;
 }
@@ -527,7 +527,7 @@ function invite(evt) {

Your code receives a {{event("removetrack")}} event when the remote peer removes a track from the connection by calling {{domxref("RTCPeerConnection.removeTrack()")}}. Our handler for "removetrack" is:

-
function handleRemoveTrackEvent(event) {
+
function handleRemoveTrackEvent(event) {
   var stream = document.getElementById("received_video").srcObject;
   var trackList = stream.getTracks();
 
@@ -548,7 +548,7 @@ function invite(evt) {
 
 

When the user clicks the "Hang Up" button to end the call, the hangUpCall() function is called:

-
function hangUpCall() {
+
function hangUpCall() {
   closeVideoCall();
   sendToServer({
     name: myUsername,
@@ -563,7 +563,7 @@ function invite(evt) {
 
 

The closeVideoCall() function, shown below, is responsible for stopping the streams, cleaning up, and disposing of the {{domxref("RTCPeerConnection")}} object:

-
function closeVideoCall() {
+
function closeVideoCall() {
   var remoteVideo = document.getElementById("received_video");
   var localVideo = document.getElementById("local_video");
 
@@ -620,7 +620,7 @@ function invite(evt) {
 
 

{{event("iceconnectionstatechange")}} events are sent to the {{domxref("RTCPeerConnection")}} by the ICE layer when the connection state changes (such as when the call is terminated from the other end).

-
function handleICEConnectionStateChangeEvent(event) {
+
function handleICEConnectionStateChangeEvent(event) {
   switch(myPeerConnection.iceConnectionState) {
     case "closed":
     case "failed":
@@ -636,7 +636,7 @@ function invite(evt) {
 
 

Similarly, we watch for {{event("signalingstatechange")}} events. If the signaling state changes to closed, we likewise close the call out.

-
function handleSignalingStateChangeEvent(event) {
+
function handleSignalingStateChangeEvent(event) {
   switch(myPeerConnection.signalingState) {
     case "closed":
       closeVideoCall();
@@ -652,7 +652,7 @@ function invite(evt) {
 
 

{{event("icegatheringstatechange")}} events are used to let you know when the ICE candidate gathering process state changes. Our example doesn't use this for anything, but it can be useful to watch these events for debugging purposes, as well as to detect when candidate collection has finished.

-
function handleICEGatheringStateChangeEvent(event) {
+
function handleICEGatheringStateChangeEvent(event) {
   // Our sample just logs information to console here,
   // but you can do whatever you need.
 }
-- 
cgit v1.2.3-54-g00ecf