You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<tdstyle="vertical-align: top;">Offers to send {{Glossary("RTP")}} data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active<sup>1</sup>.</td>
42
-
<tdstyle="vertical-align: top;">Offers to receive RTP data, and does so if the other peer accepts.</td>
<td>Offers to send {{Glossary("RTP")}} data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active<sup>1</sup>.</td>
42
+
<td>Offers to receive RTP data, and does so if the other peer accepts.</td>
<tdstyle="vertical-align: top;">Offers to send RTP data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active<sup>1</sup>.</td>
47
-
<tdstyle="vertical-align: top;">Does <em>not</em> offer to receive RTP data and will not do so.</td>
<td>Offers to send RTP data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active<sup>1</sup>.</td>
47
+
<td>Does <em>not</em> offer to receive RTP data and will not do so.</td>
Copy file name to clipboardexpand all lines: files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/answer_a_call/index.html
+2-2
Original file line number
Diff line number
Diff line change
@@ -45,7 +45,7 @@ <h4>Warning</h4>
45
45
});</pre>
46
46
47
47
<p>Let's walk through the most important parts of this code:</p>
48
-
<olstyle="list-style-type: upper-latin">
48
+
<ul>
49
49
<li>
50
50
<p><code>call.answer(window.localStream)</code>: if <code>answerCall</code> is <code>true</code>, you'll want to call peerJS’s <code>answer()</code> function on the call to create an answer, passing it the local stream.</p>
51
51
</li>
@@ -58,7 +58,7 @@ <h4>Warning</h4>
58
58
<li>
59
59
<p>If the person denies the call, we’re just going to log a message to the console.</p>
60
60
</li>
61
-
</ol>
61
+
</ul>
62
62
</li>
63
63
<li>
64
64
<p>The code you have now is enough for you to create a call and answer it. Refresh your browsers and test it out. You’ll want to make sure that both browsers have the console open or else you won’t get the prompt to answer the call. Click call, submit the peer ID for the other browser and then answer the call. The final page should look like this:</p>
Copy file name to clipboardexpand all lines: files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/creating_a_call/index.html
+2-2
Original file line number
Diff line number
Diff line change
@@ -31,7 +31,7 @@
31
31
})</pre>
32
32
33
33
<p>Let's walk through this code:</p>
34
-
<olstyle="list-style-type: upper-latin">
34
+
<ul>
35
35
<li>
36
36
<p><code>const call = peer.call(code, window.localStream)</code>: This will create a call with the <code>code</code> and <code>window.localStream</code> we've previously assigned. Note that the <code>localStream</code> will be the user's <code>localStream</code>. So for caller A it'll be their stream & for B, their own stream.</p>
37
37
</li>
@@ -50,7 +50,7 @@
50
50
<li>
51
51
<p>Finally you want to show the correct content, so call the <code>showConnectedContent()</code> function you created earlier.</p>
52
52
</li>
53
-
</ol>
53
+
</ul>
54
54
<li>
55
55
<p>To test this out, open <code>localhost:8000</code> in two browser windows and click Call inside one of them. You should see this:</p>
Copy file name to clipboardexpand all lines: files/en-us/web/api/webrtc_api/build_a_phone_with_peerjs/connect_peers/get_microphone_permission/index.html
+2-2
Original file line number
Diff line number
Diff line change
@@ -24,7 +24,7 @@
24
24
25
25
<p>Let's explain the most important lines:</p>
26
26
27
-
<olstyle="list-style-type:upper-latin;">
27
+
<ul>
28
28
<li>
29
29
<p><code>window.localStream = stream</code> attaches the <code>MediaStream</code> object (which we have assigned to <code>stream</code> on the previous line) to the window as the <code>localStream</code>.</p>
30
30
</li>
@@ -34,7 +34,7 @@
34
34
<li>
35
35
<p><code>window.localAudio.autoplay = true</code> sets the <code>autoplay</code> attribute of the <code><audio></code> element to true, so that the audio plays automatically.</p>
Copy file name to clipboardexpand all lines: files/en-us/web/api/webrtc_api/protocols/index.html
+2-2
Original file line number
Diff line number
Diff line change
@@ -31,7 +31,7 @@ <h2 id="STUN">STUN</h2>
31
31
32
32
<p>The client will send a request to a STUN server on the Internet who will reply with the client’s public address and whether or not the client is accessible behind the router’s NAT.</p>
33
33
34
-
<p><imgalt="An interaction between two users of a WebRTC application involving a STUN server." src="webrtc-stun.png"style="display: block; margin: 0px auto;"></p>
34
+
<p><imgalt="An interaction between two users of a WebRTC application involving a STUN server." src="webrtc-stun.png"></p>
35
35
36
36
<h2id="NAT">NAT</h2>
37
37
@@ -45,7 +45,7 @@ <h2 id="TURN">TURN</h2>
45
45
46
46
<p><ahref="https://en.wikipedia.org/wiki/TURN">Traversal Using Relays around NAT (TURN)</a> is meant to bypass the Symmetric NAT restriction by opening a connection with a TURN server and relaying all information through that server. You would create a connection with a TURN server and tell all peers to send packets to the server which will then be forwarded to you. This obviously comes with some overhead so it is only used if there are no other alternatives.</p>
47
47
48
-
<p><imgalt="An interaction between two users of a WebRTC application involving STUN and TURN servers." src="webrtc-turn.png"style="display: block; margin: 0px auto;"></p>
48
+
<p><imgalt="An interaction between two users of a WebRTC application involving STUN and TURN servers." src="webrtc-turn.png"></p>
Copy file name to clipboardexpand all lines: files/en-us/web/api/webrtc_api/taking_still_photos/index.html
+2-2
Original file line number
Diff line number
Diff line change
@@ -18,7 +18,7 @@
18
18
19
19
<p><spanclass="seoSummary">This article shows how to use WebRTC to access the camera on a computer or mobile phone with WebRTC support and take a photo with it.</span><ahref="https://mdn-samples.mozilla.org/s/webrtc-capturestill">Try this sample</a> then read on to learn how it works.</p>
20
20
21
-
<p><imgalt="WebRTC-based image capture app — on the left we have a video stream taken from a webcam and a take photo button, on the right we have the still image output from taking the photo" src="web-rtc-demo.png"style="display: block; margin: 0px auto;"></p>
21
+
<p><imgalt="WebRTC-based image capture app — on the left we have a video stream taken from a webcam and a take photo button, on the right we have the still image output from taking the photo" src="web-rtc-demo.png"></p>
22
22
23
23
<p>You can also jump straight to the <ahref="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill" rel="noopener">code on Github</a> if you like.</p>
24
24
@@ -47,7 +47,7 @@ <h2 id="The_HTML_markup">The HTML markup</h2>
47
47
48
48
<p>That's all of the relevant HTML. The rest is just some page layout fluff and a bit of text offering a link back to this page.</p>
<p>Now let's take a look at the <ahref="https://github.com/mdn/samples-server/tree/master/s/webrtc-capturestill/capture.js" rel="noopener">JavaScript code</a>. We'll break it up into a few bite-sized pieces to make it easier to explain.</p>
<td>Statistics describing the change from one {{domxref("RTCIceTransport")}} to another, such as during an <ahref="/en-US/docs/Web/API/WebRTC_API/Session_lifetime#ice_restart">ICE restart</a>.</td>
0 commit comments