From fe53eb5a1419c190bd9eb125f03a010bdd4525a8 Mon Sep 17 00:00:00 2001
From: Nils Ohlmeier <nils-ohlmeier@users.noreply.github.com>
Date: Mon, 22 Jul 2019 15:15:05 -0400
Subject: [PATCH] Red warning (#29)

* added warnings for gUM an PC on top of test pages for direct accessing
---
 gum_test.html | 12 ++++++++++++
 index.html    | 28 +++++++++++++++-------------
 pc_test.html  | 13 ++++++++++++-
 3 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/gum_test.html b/gum_test.html
index 5130d34..e1a2253 100644
--- a/gum_test.html
+++ b/gum_test.html
@@ -48,6 +48,14 @@
   <div id="main">
     <h2><b>getUserMedia Test Page</b></h2>
     <p><a href="https://mozilla.github.io/webrtc-landing">Main webrtc demo page</a></p>
+
+    <div id="gum_warn" class="hidden">
+      <font color="red">
+      <h4>getUserMedia is missing!</h4>
+      This page only works when loaded loaded <a href="https://mozilla.github.io/webrtc-landing/gum_test.html">via HTTPS</a> as getUserMedia() can only be accessed via HTTPS.<br><br>
+      </font>
+    </div>
+
     <div id="startbuttons">
       <input value="Video" onclick="startVideo();" type="button">
       <input value="Audio" onclick="startAudio();" type="button">
@@ -73,6 +81,10 @@
   </div>
 
   <script type="application/javascript">
+  if (!navigator.mediaDevices.getUserMedia) {
+    document.getElementById("gum_warn").style.display = "block";
+  }
+
   var video_status = false;
   var video = document.createElement("video");
   video.setAttribute("width", 640);
diff --git a/index.html b/index.html
index a2ef238..ef8a5fe 100644
--- a/index.html
+++ b/index.html
@@ -16,20 +16,20 @@
         <p>Following are a few pages to test various aspects of Mozilla's implementation of WebRTC.</p>
     </div>
   </div>
-    
+
   <div class="row">
-  <div id="gum" class="span12 offset2 alert alert-error fade in" style="display: none;">
+  <div id="gum" class="span12 offset2 alert alert-error" style="display: none;">
     <button type="button" class="close" data-dismiss="alert">&times;</button>
-    <h4>mozGetUserMedia is missing!</h4>
-    Do you have the latest <a href="http://nightly.mozilla.org/">Nightly</a> and set <i>media.navigator.enabled</i> to true?
+    <h4>getUserMedia is missing!</h4>
+    This page only works when loaded loaded <a href="https://mozilla.github.io/webrtc-landing/">via HTTPS</a> as getUserMedia() can only be accessed via HTTPS.
   </div>
   </div>
-  
+
   <div class="row">
   <div id="pc" class="span12 offset2 alert alert-error" style="display: none;">
     <button type="button" class="close" data-dismiss="alert">&times;</button>
-    <h4>mozRTCPeerConnection is missing!</h4>
-    Do you have the latest <a href="http://nightly.mozilla.org/">Nightly</a> and set <i>media.peerconnection.enabled</i> to true?
+    <h4>RTCPeerConnection is missing!</h4>
+    This page only works when loaded loaded <a href="https://mozilla.github.io/webrtc-landing/">via HTTPS</a> as RTCPeerConnectio() is only available via HTTPS.
   </div>
   </div>
 
@@ -37,9 +37,11 @@
   <div id="pc" class="span12 offset2 alert" style="display: none;">
     <button type="button" class="close" data-dismiss="alert">&times;</button>
     <h4>Your Firefox is old.</h4>
-    You have an older version of Firefox that supports WebRTC but may have an incompatible API. For best results, please download the latest <a href="http://nightly.mozilla.org/">Nightly</a>!
+    You have an older version of Firefox that supports WebRTC but may have an
+    incompatible API. For best results, please download the latest <a
+    href="https://nightly.mozilla.org/">Nightly</a>!
   </div>
-  
+
   <div class="row offset2">
       <div class="span3">
       <div class="well">
@@ -50,7 +52,7 @@
         <p><a class="btn btn-small" href="gum_test_aec.html">AEC-in-gUM test</a></p>
       </div>
       </div>
-    
+
       <div class="span3">
       <div class="well">
         <h3>Single host 'chat'</h3>
@@ -58,7 +60,7 @@
         <p><a class="btn btn-large" href="pc_test.html">Try Demo</a></p>
       </div>
       </div>
-    
+
       <div class="span3">
       <div class="well">
         <h3>Single host DataChannels</h3>
@@ -116,10 +118,10 @@
 -->
 
   <script>
-    if (!navigator.mozGetUserMedia) {
+    if (!navigator.mediaDevices.getUserMedia) {
       document.getElementById("gum").style.display = "block";
     }
-    if (!window.mozRTCPeerConnection) {
+    if (!window.RTCPeerConnection) {
       document.getElementById("pc").style.display = "block";
     }
     if (BrowserDetect.browser != "Firefox" ||
diff --git a/pc_test.html b/pc_test.html
index e3bd964..56bf405 100644
--- a/pc_test.html
+++ b/pc_test.html
@@ -37,6 +37,13 @@
 
 <h1>Simple RTCPeerConnection Video Test</h1>
 
+<div id="pc_warn" class="hidden">
+  <font color="red">
+  <h4>RTCPeerConnection is missing!</h4>
+  This page only works when loaded loaded <a href="https://mozilla.github.io/webrtc-landing/pc_test.html">via HTTPS</a> as RTCPeerConnectio() is only available via HTTPS.<br><br>
+  </font>
+</div>
+
 <div>
 <button id="tehbutton" onclick="start();">Start!</button>
 <input type="checkbox" id="fake" value="Use Fake Video/Audio for one stream">
@@ -47,7 +54,7 @@
 <label for="audio_only">Audio-only call</label>
 <input type="checkbox" id="video_only" value="Video-only call">
 <label for="video_only">Video-only call</label>
-<br>    
+<br>
 <input type="checkbox" id="disable_video" value="Disable video" onclick="disable_media(pc1, 1, 0);">
 <label for="disable_video">Disable video</label>
 <input type="checkbox" id="disable_audio" value="Disable audio" onclick="disable_media(pc1, 0, 0);">
@@ -96,6 +103,10 @@
 
 
 <script type="application/javascript">
+  if (!window.RTCPeerConnection) {
+    document.getElementById("pc_warn").style.display = "block";
+  }
+
   // Lame clone function. Not efficient but we don't have jQuery.
   function copy_dictionary (obj) {
     return JSON.parse(JSON.stringify(obj));