From 9ed388523f22363f92b8b72e02a10f0754530113 Mon Sep 17 00:00:00 2001
From: winlin <winlin@vip.126.com>
Date: Fri, 21 May 2021 17:26:52 +0800
Subject: [PATCH] RTC: Refine demo H5 page

---
 trunk/research/players/rtc_player.html    | 84 +++++++++++------------
 trunk/research/players/rtc_publisher.html | 83 +++++++++++-----------
 2 files changed, 83 insertions(+), 84 deletions(-)

diff --git a/trunk/research/players/rtc_player.html b/trunk/research/players/rtc_player.html
index 0a4c3a3a5..c1e574e23 100644
--- a/trunk/research/players/rtc_player.html
+++ b/trunk/research/players/rtc_player.html
@@ -64,51 +64,51 @@
     </footer>
 </div>
 <script type="text/javascript">
-    $(function(){
-        var sdk = null; // Global handler to do cleanup when replaying.
-        var startPlay = function() {
-            $('#rtc_media_player').show();
+$(function(){
+    var sdk = null; // Global handler to do cleanup when replaying.
+    var startPlay = function() {
+        $('#rtc_media_player').show();
 
-            // Close PC when user replay.
-            if (sdk) {
-                sdk.close();
-            }
-            sdk = new SrsRtcPlayerAsync();
-
-            // https://webrtc.org/getting-started/remote-streams
-            $('#rtc_media_player').prop('srcObject', sdk.stream);
-            // Optional callback, SDK will add track to stream.
-            // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
-
-            // For example: webrtc://r.ossrs.net/live/livestream
-            var url = $("#txt_url").val();
-            sdk.play(url).then(function(session){
-                $('#sessionid').html(session.sessionid);
-                $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
-            }).catch(function (reason) {
-                sdk.close();
-                $('#rtc_media_player').hide();
-                console.error(reason);
-            });
-        };
-
-        $('#rtc_media_player').hide();
-        var query = parse_query_string();
-        srs_init_rtc("#txt_url", query);
-
-        $("#btn_play").click(function() {
-            $('#rtc_media_player').prop('muted', false);
-            startPlay();
-        });
-
-        if (query.autostart === 'true') {
-            $('#rtc_media_player').prop('muted', true);
-            console.warn('For autostart, we should mute it, see https://www.jianshu.com/p/c3c6944eed5a ' +
-                'or https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#audiovideo_elements');
-
-            startPlay();
+        // Close PC when user replay.
+        if (sdk) {
+            sdk.close();
         }
+        sdk = new SrsRtcPlayerAsync();
+
+        // https://webrtc.org/getting-started/remote-streams
+        $('#rtc_media_player').prop('srcObject', sdk.stream);
+        // Optional callback, SDK will add track to stream.
+        // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
+
+        // For example: webrtc://r.ossrs.net/live/livestream
+        var url = $("#txt_url").val();
+        sdk.play(url).then(function(session){
+            $('#sessionid').html(session.sessionid);
+            $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
+        }).catch(function (reason) {
+            sdk.close();
+            $('#rtc_media_player').hide();
+            console.error(reason);
+        });
+    };
+
+    $('#rtc_media_player').hide();
+    var query = parse_query_string();
+    srs_init_rtc("#txt_url", query);
+
+    $("#btn_play").click(function() {
+        $('#rtc_media_player').prop('muted', false);
+        startPlay();
     });
+
+    if (query.autostart === 'true') {
+        $('#rtc_media_player').prop('muted', true);
+        console.warn('For autostart, we should mute it, see https://www.jianshu.com/p/c3c6944eed5a ' +
+            'or https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#audiovideo_elements');
+
+        startPlay();
+    }
+});
 </script>
 </body>
 </html>
diff --git a/trunk/research/players/rtc_publisher.html b/trunk/research/players/rtc_publisher.html
index 1159d0e8f..3d1681051 100644
--- a/trunk/research/players/rtc_publisher.html
+++ b/trunk/research/players/rtc_publisher.html
@@ -68,53 +68,52 @@
     </footer>
 </div>
 <script type="text/javascript">
-    var pc = null; // Global handler to do cleanup when replaying.
-    $(function(){
-        var sdk = null; // Global handler to do cleanup when republishing.
-        var startPublish = function() {
-            $('#rtc_media_player').show();
+$(function(){
+    var sdk = null; // Global handler to do cleanup when republishing.
+    var startPublish = function() {
+        $('#rtc_media_player').show();
 
-            // Close PC when user replay.
-            if (sdk) {
-                sdk.close();
+        // Close PC when user replay.
+        if (sdk) {
+            sdk.close();
+        }
+        sdk = new SrsRtcPublisherAsync();
+
+        // User should set the stream when publish is done, @see https://webrtc.org/getting-started/media-devices
+        // However SRS SDK provides a consist API like https://webrtc.org/getting-started/remote-streams
+        $('#rtc_media_player').prop('srcObject', sdk.stream);
+        // Optional callback, SDK will add track to stream.
+        // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
+
+        // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
+        sdk.pc.onicegatheringstatechange = function (event) {
+            if (sdk.pc.iceGatheringState === "complete") {
+                $('#acodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "audio"));
+                $('#vcodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "video"));
             }
-            sdk = new SrsRtcPublisherAsync();
-
-            // User should set the stream when publish is done, @see https://webrtc.org/getting-started/media-devices
-            // However SRS SDK provides a consist API like https://webrtc.org/getting-started/remote-streams
-            $('#rtc_media_player').prop('srcObject', sdk.stream);
-            // Optional callback, SDK will add track to stream.
-            // sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
-
-            // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/WebRTC_codecs#getting_the_supported_codecs
-            sdk.pc.onicegatheringstatechange = function (event) {
-                if (sdk.pc.iceGatheringState === "complete") {
-                    $('#acodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "audio"));
-                    $('#vcodecs').html(SrsRtcFormatSenders(sdk.pc.getSenders(), "video"));
-                }
-            };
-
-            // For example: webrtc://r.ossrs.net/live/livestream
-            var url = $("#txt_url").val();
-            sdk.publish(url).then(function(session){
-                $('#sessionid').html(session.sessionid);
-                $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
-            }).catch(function (reason) {
-                sdk.close();
-                $('#rtc_media_player').hide();
-                console.error(reason);
-            });
         };
 
-        $('#rtc_media_player').hide();
-        var query = parse_query_string();
-        srs_init_rtc("#txt_url", query);
+        // For example: webrtc://r.ossrs.net/live/livestream
+        var url = $("#txt_url").val();
+        sdk.publish(url).then(function(session){
+            $('#sessionid').html(session.sessionid);
+            $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
+        }).catch(function (reason) {
+            sdk.close();
+            $('#rtc_media_player').hide();
+            console.error(reason);
+        });
+    };
 
-        $("#btn_publish").click(startPublish);
-        if (query.autostart === 'true') {
-            startPublish();
-        }
-    });
+    $('#rtc_media_player').hide();
+    var query = parse_query_string();
+    srs_init_rtc("#txt_url", query);
+
+    $("#btn_publish").click(startPublish);
+    if (query.autostart === 'true') {
+        startPublish();
+    }
+});
 </script>
 </body>
 </html>