fix external image flaws in Web/API (2)

files/en-us/web/api/rtcremoteoutboundrtpstreamstats/localid/index.html

@@ -2,22 +2,22 @@
 title: RTCRemoteOutboundRtpStreamStats.localId
 slug: Web/API/RTCRemoteOutboundRtpStreamStats/localId
 tags:
-- API
-- Media
-- Outbound
-- Property
-- RTCRemoteOutboundRtpStreamStats
-- RTP
-- Reference
-- Remote
-- Statistics
-- Stats
-- Streams
-- WebRTC
-- WebRTC API
-- WebRTC Device API
-- id
-- localId
+  - API
+  - Media
+  - Outbound
+  - Property
+  - RTCRemoteOutboundRtpStreamStats
+  - RTP
+  - Reference
+  - Remote
+  - Statistics
+  - Stats
+  - Streams
+  - WebRTC
+  - WebRTC API
+  - WebRTC Device API
+  - id
+  - localId
 ---
 <p>{{APIRef("WebRTC")}}</p>
 
@@ -234,8 +234,7 @@ <h4 id="The_main_networkTestStop_function">The main networkTestStop() function</
 
 <p><img
     alt="A screenshot of the example showing logged statistics taken from paired remote-outbound-rtp and inbound-rtp statistics records"
-    src="https://mdn.mozillademos.org/files/17306/rtc-log-screenshot.png"
-    style="height: 410px; width: 650px;"></p>
+    src="rtc-log-screenshot.png"></p>
 
 <p>In the screenshot, we see a heading followed by the scrollable {{HTMLElement("div")}}
   we refer to as <code>statsBox</code>. The box contains a number of log entries, the last
@@ -254,14 +253,12 @@ <h3 id="Try_it_and_fork_it">Try it and fork it</h3>
   <div class="column-2"><a
       href="https://glitch.com/edit/?utm_content=project_websocket-webrtc-chat-with-stats&amp;utm_source=remix_this&amp;utm_medium=button&amp;utm_campaign=glitchButton#!/remix/websocket-webrtc-chat-with-stats"><img
         alt="Remix It"
-        src="https://cdn.glitch.com/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix%402x.png?1513093958726"
-        style="height: 20px;"> </a></div>
+        src="2bdfb3f8-05ef-4035-a06e-2043962a3a13%2fremix%402x.png"> </a></div>
 
   <div class="column-2"><a
       href="https://glitch.com/edit/?utm_content=project_websocket-webrtc-chat-with-stats&amp;utm_source=view_source&amp;utm_medium=button&amp;utm_campaign=glitchButton#!/websocket-webrtc-chat-with-stats"><img
         alt="View Source"
-        src="https://cdn.glitch.com/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fview-source%402x.png?1513093958802"
-        style="height: 20px;"></a></div>
+        src="2bdfb3f8-05ef-4035-a06e-2043962a3a13%2fview-source%402x.png"></a></div>
 </div>
 
 <h2 id="Specifications">Specifications</h2>

files/en-us/web/api/webvr_api/concepts/index.html

@@ -16,7 +16,7 @@
 ---
 <div>{{APIRef("WebVR API")}}{{deprecated_header}}</div>
 
-<div class="notecard note"><strong>Note:</strong> WebVR API is replaced by <a href="/en-US/docs/Web/API/WebXR_API">WebXR API</a>. WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers and supported a small number of devices.</div>
+<div class="notecard note"><strong>Note:</strong> WebVR API is replaced by <a href="/en-US/docs/Web/API/WebXR_Device_API">WebXR API</a>. WebVR was never ratified as a standard, was implemented and enabled by default in very few browsers and supported a small number of devices.</div>
 
 <p class="summary">This article discusses some of the concepts and theory behind virtual reality (VR). If you are a newcomer to the area, it is worthwhile getting an understanding of these topics before you start diving into code.</p>
 
@@ -26,11 +26,11 @@ <h2 id="The_history_of_VR">The history of VR</h2>
 
 <p>In 1939 the <a href="https://en.wikipedia.org/wiki/View-Master">View-Master device</a> was created, allowing people to see 3D pictures. The device displayed images stored on cardboard disks containing stereoscopic 3D pairs of small color photographs. After years of development the military got interested in using such technology, and Project Headsight was born in 1961 — this involved a helmet incorporating a video screen with a head-tracking system.</p>
 
-<p><img alt="" src="http://end3r.com/tmp/vr/view-master.jpg" style="display: block; margin: 0px auto;"></p>
+<p><img alt="" src="https://end3r.com/tmp/vr/view-master.jpg" style="display: block; margin: 0px auto;"></p>
 
 <p>There were various experiments conducted over the next few decades, but it wasn't resricted to science labs and battlefields anymore. Eventually pop culture took over with movie directors showing their visions of virtual reality. Movies like Tron (1982) and The Matrix (1999) were created, where people could transfer themselves into a whole new cyber world or were trapped in one without even knowing, accepting it as the real world.</p>
 
-<p><img alt="" src="http://end3r.com/tmp/vr/matrix.jpg" style="display: block; margin: 0px auto;"></p>
+<p><img alt="" src="https://end3r.com/tmp/vr/matrix.jpg" style="display: block; margin: 0px auto;"></p>
 
 <p>The first VR gaming attempts were big and expensive — in 1991 Virtuality Group created a VR-ready arcade machine with goggles and ported popular titles like Pac-Man to virtual reality. Sega introduced their VR glasses at the Consumer Electronics Show in 1993. Companies were experimenting, but the market and consumers weren't convinced — we had to wait until 2012 to see a real example of a successful VR project.</p>
 
@@ -46,15 +46,15 @@ <h3 id="Input_devices">Input devices</h3>
 
 <p>Handling input for virtual reality applications is an interesting topic — it's a totally new experience for which dedicated user interfaces have to be designed. There are various approaches right now from classic keyboard and mouse, to new ones like Leap Motion and the VIVE controllers. It's a matter of trial and error to see what works in given situations and what inputs fit best for your type of game.</p>
 
-<p><img alt="" src="http://end3r.com/tmp/vr/oculus-touch.jpg" style="display: block; margin: 0px auto;"></p>
+<p><img alt="" src="https://end3r.com/tmp/vr/oculus-touch.jpg" style="display: block; margin: 0px auto;"></p>
 
 <h2 id="VR_Hardware_setup">VR Hardware setup</h2>
 
 <p>There are two main types of setup, mobile or computer-connected. Their minimum hardware set ups are as follows:</p>
 
 <ul>
- <li>Mobile: A Head-mounted display (HMD) is created using a smartphone — which acts as the VR display — mounted in a VR mount such as Google Cardboard, which contains the required lenses to provide stereoscopic vision of what is projected on the mobile screen.<img alt="Mobile based VR setup" src="https://mdn.mozillademos.org/files/11085/mobileBasedVRSetup.png" style="width: 100%;"></li>
- <li>Computer-connected: A VR setup is connected to your computer — this consists of a Head Mounted Display (HMD) containing a high resolution landscape-oriented screen onto which the visuals for both the left and right eye are displayed, which also includes a lens for each eye to promote separation of the left and right eye scene (stereoscopic vision.) The setup also includes a separate position sensor that works out the position/orientation/velocity/acceleration of your head and constantly passes that information the computer. <img alt="Computer based VR Setup" src="https://mdn.mozillademos.org/files/11089/computerBasedVRSetup.png" style="width: 100%;"></li>
+ <li>Mobile: A Head-mounted display (HMD) is created using a smartphone — which acts as the VR display — mounted in a VR mount such as Google Cardboard, which contains the required lenses to provide stereoscopic vision of what is projected on the mobile screen.<img alt="Mobile based VR setup" src="mobilebasedvrsetup.png"></li>
+ <li>Computer-connected: A VR setup is connected to your computer — this consists of a Head Mounted Display (HMD) containing a high resolution landscape-oriented screen onto which the visuals for both the left and right eye are displayed, which also includes a lens for each eye to promote separation of the left and right eye scene (stereoscopic vision.) The setup also includes a separate position sensor that works out the position/orientation/velocity/acceleration of your head and constantly passes that information the computer. <img alt="Computer based VR Setup" src="computerbasedvrsetup.png"></li>
 </ul>
 
 <div class="note">
@@ -75,7 +75,7 @@ <h2 id="Position_and_orientation_velocity_and_acceleration">Position and orienta
 
 <p>As mentioned above, the position sensor detects information concerning the HMD and constantly outputs it, allowing you to continually update a scene according to head movement, rotation, etc. But what exactly is the information?</p>
 
-<p><img alt="Position and Orientation VR setup" src="https://mdn.mozillademos.org/files/11083/positionOrientationVR.png" style="width: 100%;"></p>
+<p><img alt="Position and Orientation VR setup" src="positionorientationvr.png"></p>
 
 <p>The output information falls into four categories:</p>
 
@@ -100,7 +100,7 @@ <h2 id="Field_of_view">Field of view</h2>
 
 <p>The field of view (FOV) is the area that each of the user's eyes can reasonably be expected to see. It roughly takes the form of a pyramid shape, laid down on one side, with the apex inside the user's head, and the rest of the pyramid eminating from the user's eye. Each eye has it's own FOV, one slightly overlapping the other.</p>
 
-<p><img alt="FOV related properties" src="https://mdn.mozillademos.org/files/11091/FOVrelatedProperties.png" style="width: 100%;"></p>
+<p><img alt="FOV related properties" src="fovrelatedproperties.png"></p>
 
 <p>The FOV is defined by the following values:</p>
 
@@ -127,7 +127,7 @@ <h3 id="Stereoscopic_vision">Stereoscopic vision</h3>
 
 <p>Stereoscopic vision is the normal vision humans and (most) animals have — <span class="hvr">the</span> <span class="hvr">perception</span> of two <span class="hvr">slightly</span> <span class="hvr">differing</span> <span class="hvr">images</span> (one <span class="hvr">from</span> <span class="hvr">each</span> <span class="hvr">eye) as a single image. This</span> <span class="hvr">results</span> in <span class="hvr">depth</span> <span class="hvr">perception, helping us to see the world in glorious 3D. To recreate this in VR apps, you need to render two very slightly different views side by side, which will be taken in by the left and right eyes when the user is using the HMD.</span></p>
 
-<p><img alt="How to create stereoscopic 3D images" src="https://mdn.mozillademos.org/files/11095/createStereoscopicImages.png" style="width: 100%;"></p>
+<p><img alt="How to create stereoscopic 3D images" src="createstereoscopicimages.png"></p>
 
 <h3 id="Head_tracking">Head tracking</h3>
 

files/en-us/web/api/webxr_device_api/bounded_reference_spaces/index.html

@@ -48,7 +48,7 @@ <h2 id="Understanding_boundaries">Understanding boundaries</h2>
 
 <p>As mentioned previously, the boundary is defined as an array of points located at floor level, each defining a corner of the boundary area, going around the origin in a clockwise manner. This is demonstrated in the diagram below.</p>
 
-<p><img alt="Diagram showing how a bounded space's boundary is defined" src="https://mdn.mozillademos.org/files/17076/BoundedSpace.svg" style="height: 508px; width: 640px;"></p>
+<p><img alt="Diagram showing how a bounded space's boundary is defined" src="boundedspace.svg"></p>
 
 <p>This diagram defines the boundaries of room with the origin in the center, as required, and a set of 12 points representing the vertices of the available physical space. There are two cut-out areas in the room, possibly representing a couch, sofa, or bench behind the user and a stand or table on which the computer or other hardware is located. As this suggests, the safe area is not required to be convex, but may have any number of indentations or extrusions, as long as it's a contiguous shape,</p>
 

files/en-us/web/api/webxr_device_api/lighting/index.html

@@ -31,7 +31,7 @@ <h3 id="Reflection_of_light">Reflection of light</h3>
 <figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;">
 <figcaption><strong>A diagram showing how the angle of reflection corresponds to the angle of incidence.</strong></figcaption>
 
-<div style="background-color: #FFF;"><img alt="A diagram showing how the angle of reflection corresponds to the angle of incidence." src="https://mdn.mozillademos.org/files/17280/Law-of-Reflection.svg" style="width: 100%;"></div>
+<div style="background-color: #FFF;"><img alt="A diagram showing how the angle of reflection corresponds to the angle of incidence." src="law-of-reflection.svg"></div>
 </figure>
 </div>
 </div>
@@ -53,7 +53,7 @@ <h3 id="Components_of_a_light_source">Components of a light source</h3>
 <figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;">
 <figcaption><strong>A sphere with only ambient lighting. Note the total lack of any shading to indicate the depth of the sphere.</strong></figcaption>
 
-<div style="background-color: #FFF;"><img alt="A sphere which only has ambient lighting. Note the total lack of any shading to indicate the depth of the sphere." src="https://mdn.mozillademos.org/files/17278/Sphere-Ambient-Light-Only.jpg" style="width: 100%;"></div>
+<div style="background-color: #FFF;"><img alt="A sphere which only has ambient lighting. Note the total lack of any shading to indicate the depth of the sphere." src="sphere-ambient-light-only.jpg"></div>
 </figure>
 </div>
 </div>
@@ -73,7 +73,7 @@ <h4 id="Ambient_light">Ambient light</h4>
 <figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;">
 <figcaption><strong>Saturn's fifth-largest moon, Tethys, bathed in sunlight, coming from the lower left.</strong></figcaption>
 
-<div style="background-color: #FFF;"><img alt="Saturn's fifth-largest moon, Tethys, is lit primarily by the sun, with some light reflected from Saturn. This is diffuse lighting." src="https://mdn.mozillademos.org/files/17277/Tethys.jpg" style="width: 100%;"></div>
+<div style="background-color: #FFF;"><img alt="Saturn's fifth-largest moon, Tethys, is lit primarily by the sun, with some light reflected from Saturn. This is diffuse lighting." src="tethys.jpg"></div>
 </figure>
 </div>
 </div>
@@ -89,7 +89,7 @@ <h4 id="Diffuse_light">Diffuse light</h4>
 <figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;">
 <figcaption><strong>A photo taken by NASA's Cassini spacecraft showing specular reflection of light from a lake of liquid methane on the surface of Saturn's moon Titan.</strong></figcaption>
 
-<div style="background-color: #FFF;"><img alt="A photo taken by NASA's Cassini spacecraft showing specular reflection of light from a lake of liquid methane on the surface of Saturn's moon Titan." src="https://mdn.mozillademos.org/files/17276/SpecularLight-Titan.jpg" style="width: 100%;"></div>
+<div style="background-color: #FFF;"><img alt="A photo taken by NASA's Cassini spacecraft showing specular reflection of light from a lake of liquid methane on the surface of Saturn's moon Titan." src="specularlight-titan.jpg"></div>
 </figure>
 </div>
 </div>
@@ -115,7 +115,7 @@ <h4 id="Ambient_light_sources">Ambient light sources</h4>
 <figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;">
 <figcaption><strong>Earth and moon both half-lit by the sun's directional lighting.</strong></figcaption>
 
-<div style="background-color: #FFF;"><img alt="A photo taken by the Galileo spacecraft from about 6.3 million kilometers away, with Earth and moon both half-lit by the sun." src="https://mdn.mozillademos.org/files/17279/EarthAndMoon.jpg" style="width: 100%;"></div>
+<div style="background-color: #FFF;"><img alt="A photo taken by the Galileo spacecraft from about 6.3 million kilometers away, with Earth and moon both half-lit by the sun." src="earthandmoon.jpg"></div>
 </figure>
 </div>
 </div>
@@ -137,7 +137,7 @@ <h4 id="Point_light_sources">Point light sources</h4>
 <figure style="background: #eee; padding: 0.5em; border: 1px solid #aaa; border-radius: 1em; max-width: 504px; padding: 1em; margin: 1em auto;">
 <figcaption><strong>Photo of a spotlight shining upon a stucco wall at night.</strong></figcaption>
 
-<div style="background-color: #FFF;"><img alt="Photo of a spotlight shining upon a stucco wall at night." src="https://mdn.mozillademos.org/files/17281/Spotlight-on-Stucco.jpg" style="width: 100%;"></div>
+<div style="background-color: #FFF;"><img alt="Photo of a spotlight shining upon a stucco wall at night." src="spotlight-on-stucco.jpg"></div>
 </figure>
 </div>
 </div>
@@ -216,7 +216,7 @@ <h2 id="Security_and_privacy_concerns">Security and privacy concerns</h2>
 
 <h3 id="Ambient_Light_Sensor_API">Ambient Light Sensor API</h3>
 
-<p>The collection of light data using the <a href="/en-US/docs/Web/API/Ambient_Light_Sensor_API">Ambient Light Sensor API</a> introduces various potential privacy issues.</p>
+<p>The collection of light data using the <a href="/en-US/docs/Web/API/AmbientLightSensor">Ambient Light Sensor API</a> introduces various potential privacy issues.</p>
 
 <ul>
  <li>Lighting information can leak to the web information about the user's surroundings and device usage patterns. Such information can be used to enhance user profiling and behavior analysis data.</li>