From c830dc6700419c389c95a2aed9f4ad3587457ca1 Mon Sep 17 00:00:00 2001
From: winlin <winlin@vip.126.com>
Date: Wed, 18 Dec 2019 11:33:34 +0800
Subject: [PATCH] Detect whether flash enabled for srs-publisher.

---
 trunk/research/players/srs_player.html    |   2 +-
 trunk/research/players/srs_publisher.html | 470 ++++++++++++----------
 2 files changed, 265 insertions(+), 207 deletions(-)

diff --git a/trunk/research/players/srs_player.html b/trunk/research/players/srs_player.html
index 65a90c7b8..04190190b 100755
--- a/trunk/research/players/srs_player.html
+++ b/trunk/research/players/srs_player.html
@@ -67,7 +67,6 @@
             <input type="text" id="txt_url" class="input-xxlarge" value="">
             <button class="btn btn-primary" id="btn_play">播放视频</button>
             <button class="btn" id="btn_generate_link">生成链接</button>
-            <p></p>
         </div>
         <div id="link_modal" class="modal hide fade">
             <div class="modal-header">
@@ -260,6 +259,7 @@
     </div>
 
     <footer>
+        <p></p>
         <p><a href="https://github.com/ossrs/srs">SRS Team &copy; 2013</a></p>
     </footer>
 </div>
diff --git a/trunk/research/players/srs_publisher.html b/trunk/research/players/srs_publisher.html
index 892aa984d..e7430905f 100644
--- a/trunk/research/players/srs_publisher.html
+++ b/trunk/research/players/srs_publisher.html
@@ -31,237 +31,253 @@
     </div>
 </div>
 <div class="container">
-    <div class="alert alert-info fade in" id="txt_log">
-        <button type="button" class="close" data-dismiss="alert">×</button>
-        <strong><span id="txt_log_title">Usage:</span></strong>
-        <span id="txt_log_msg">设置编码参数，点“发布视频”，允许Flash访问摄像头即可推流</span>
-    </div>
-    <div class="control-group">
-        <div class="form-inline">
-            <button class="btn" id="btn_video_settings">视频编码配置</button>
-            <button class="btn" id="btn_audio_settings">音频编码配置</button>
+    <div name="detect_flash">
+        <div id="main_flash_alert" class="alert alert-danger fade in hide">
+            <button type="button" class="close" data-dismiss="alert">×</button>
+            <strong><span>Usage:</span></strong>
+            <span>
+                请点击下面的图标，启用Flash
+            </span>
+        </div>
+        <div id="main_flash_hdr" class="hide">
         </div>
     </div>
-    <div class="control-group">
-        <div class="form-inline">
-            发布地址:
-            <input type="text" id="txt_url" class="input-xxlarge" value=""></input>
-            <button class="btn btn-primary" id="btn_publish">发布视频</button>
-            <label class="checkbox">
-                <input type="checkbox" id="cb_preview">预览
-            </label>
+
+    <div id="main_content" class="hide">
+        <div class="alert alert-info fade in" id="txt_log">
+            <button type="button" class="close" data-dismiss="alert">×</button>
+            <strong><span id="txt_log_title">Usage:</span></strong>
+            <span id="txt_log_msg">设置编码参数，点“发布视频”，允许Flash访问摄像头即可推流</span>
         </div>
-    </div>
-    <div class="control-group">
-        <div class="form-inline">
-            播放地址
-            1.<a id="txt_play_realtime" class="input-xxlarge" href="#">RTMP低延时(请发布视频)</a>
-            2.<a id="txt_play_url" class="input-xxlarge" href="#">RTMP已转码(请发布视频)</a>
-            3.<a id="txt_play_hls" class="input-xxlarge" href="#">HLS-m3u8(请发布视频)</a>
-            4.<a id="txt_play_jwplayer" class="input-xxlarge" href="#">HLS-JWPlayer(请发布视频)</a>
-        </div>
-    </div>
-    <div id="video_modal" class="modal hide fade">
-        <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-            <h3>视频编码</h3>
-        </div>
-        <div class="modal-body">
-            <div class="form-horizontal">
-                <div class="control-group">
-                    <label class="control-label" for="sl_cameras">
-                        摄像头
-                        <a id="sl_cameras_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
-                            <img src="img/tooltip.png"/>
-                        </a>
-                    </label>
-                    <div class="controls">
-                        <select class="span4" id="sl_cameras"></select>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <label class="control-label" for="sl_vcodec">
-                        Codec
-                        <a id="sl_cameras_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
-                            <img src="img/tooltip.png"/>
-                        </a>
-                    </label>
-                    <div class="controls">
-                        <select class="span2" id="sl_vcodec"></select>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <label class="control-label" for="sl_profile">
-                        Profile
-                        <a id="sl_profile_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
-                            <img src="img/tooltip.png"/>
-                        </a>
-                    </label>
-                    <div class="controls">
-                        <select class="span2" id="sl_profile"></select>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <label class="control-label" for="sl_level">
-                        Level
-                        <a id="sl_level_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
-                            <img src="img/tooltip.png"/>
-                        </a>
-                    </label>
-                    <div class="controls">
-                        <select class="span2" id="sl_level"></select>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <label class="control-label" for="sl_gop">
-                        GOP
-                        <a id="sl_gop_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
-                            <img src="img/tooltip.png"/>
-                        </a>
-                    </label>
-                    <div class="controls">
-                        <select class="span2" id="sl_gop"></select>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <label class="control-label" for="sl_size">
-                        尺寸
-                        <a id="sl_size_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
-                            <img src="img/tooltip.png"/>
-                        </a>
-                    </label>
-                    <div class="controls">
-                        <select class="span2" id="sl_size"></select>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <label class="control-label" for="sl_fps">
-                        帧率
-                        <a id="sl_fps_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
-                            <img src="img/tooltip.png"/>
-                        </a>
-                    </label>
-                    <div class="controls">
-                        <select class="span2" id="sl_fps"></select>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <label class="control-label" for="sl_bitrate">
-                        码率
-                        <a id="sl_bitrate_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
-                            <img src="img/tooltip.png"/>
-                        </a>
-                    </label>
-                    <div class="controls">
-                        <select class="span2" id="sl_bitrate"></select>
-                    </div>
-                </div>
+        <div class="control-group">
+            <div class="form-inline">
+                <button class="btn" id="btn_video_settings">视频编码配置</button>
+                <button class="btn" id="btn_audio_settings">音频编码配置</button>
             </div>
         </div>
-        <div class="modal-footer">
-            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">设置</button>
-        </div>
-    </div>
-    <div id="audio_modal" class="modal hide fade">
-        <div class="modal-header">
-            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
-            <h3>音频编码</h3>
-        </div>
-        <div class="modal-body">
-            <div class="form-horizontal">
-                <div class="control-group">
-                    <label class="control-label" for="sl_microphones">
-                        麦克风
-                        <a id="worker_id_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
-                            <img src="img/tooltip.png"/>
-                        </a>
-                    </label>
-                    <div class="controls">
-                        <select class="span4" id="sl_microphones"></select>
-                    </div>
-                </div>
-                <div class="control-group">
-                    <label class="control-label" for="sl_acodec">
-                        编码
-                        <a id="sl_acodec_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
-                            <img src="img/tooltip.png"/>
-                        </a>
-                    </label>
-                    <div class="controls">
-                        <select class="span2" id="sl_acodec"></select>
-                    </div>
-                </div>
+        <div class="control-group">
+            <div class="form-inline">
+                发布地址:
+                <input type="text" id="txt_url" class="input-xxlarge" value=""></input>
+                <button class="btn btn-primary" id="btn_publish">发布视频</button>
+                <label class="checkbox">
+                    <input type="checkbox" id="cb_preview">预览
+                </label>
             </div>
         </div>
-        <div class="modal-footer">
-            <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">设置</button>
+        <div class="control-group">
+            <div class="form-inline">
+                播放地址
+                1.<a id="txt_play_realtime" class="input-xxlarge" href="#">RTMP低延时(请发布视频)</a>
+                2.<a id="txt_play_url" class="input-xxlarge" href="#">RTMP已转码(请发布视频)</a>
+                3.<a id="txt_play_hls" class="input-xxlarge" href="#">HLS-m3u8(请发布视频)</a>
+                4.<a id="txt_play_jwplayer" class="input-xxlarge" href="#">HLS-JWPlayer(请发布视频)</a>
+            </div>
         </div>
-    </div>
-    <div class="container">
-        <div class="row-fluid">
-            <div class="span6">
-                <div class="accordion-group">
-                    <div class="accordion-heading">
-                        <span class="accordion-toggle">
-                            <strong>本地摄像头</strong>
-                        </span>
+        <div id="video_modal" class="modal hide fade">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3>视频编码</h3>
+            </div>
+            <div class="modal-body">
+                <div class="form-horizontal">
+                    <div class="control-group">
+                        <label class="control-label" for="sl_cameras">
+                            摄像头
+                            <a id="sl_cameras_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
+                                <img src="img/tooltip.png"/>
+                            </a>
+                        </label>
+                        <div class="controls">
+                            <select class="span4" id="sl_cameras"></select>
+                        </div>
                     </div>
-                    <div class="accordion-body collapse in">
-                        <div class="accordion-inner">
-                            <div id="local_publisher"></div>
+                    <div class="control-group">
+                        <label class="control-label" for="sl_vcodec">
+                            Codec
+                            <a id="sl_cameras_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
+                                <img src="img/tooltip.png"/>
+                            </a>
+                        </label>
+                        <div class="controls">
+                            <select class="span2" id="sl_vcodec"></select>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="sl_profile">
+                            Profile
+                            <a id="sl_profile_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
+                                <img src="img/tooltip.png"/>
+                            </a>
+                        </label>
+                        <div class="controls">
+                            <select class="span2" id="sl_profile"></select>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="sl_level">
+                            Level
+                            <a id="sl_level_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
+                                <img src="img/tooltip.png"/>
+                            </a>
+                        </label>
+                        <div class="controls">
+                            <select class="span2" id="sl_level"></select>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="sl_gop">
+                            GOP
+                            <a id="sl_gop_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
+                                <img src="img/tooltip.png"/>
+                            </a>
+                        </label>
+                        <div class="controls">
+                            <select class="span2" id="sl_gop"></select>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="sl_size">
+                            尺寸
+                            <a id="sl_size_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
+                                <img src="img/tooltip.png"/>
+                            </a>
+                        </label>
+                        <div class="controls">
+                            <select class="span2" id="sl_size"></select>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="sl_fps">
+                            帧率
+                            <a id="sl_fps_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
+                                <img src="img/tooltip.png"/>
+                            </a>
+                        </label>
+                        <div class="controls">
+                            <select class="span2" id="sl_fps"></select>
+                        </div>
+                    </div>
+                    <div class="control-group">
+                        <label class="control-label" for="sl_bitrate">
+                            码率
+                            <a id="sl_bitrate_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
+                                <img src="img/tooltip.png"/>
+                            </a>
+                        </label>
+                        <div class="controls">
+                            <select class="span2" id="sl_bitrate"></select>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="span6">
-                <div class="accordion-group">
-                    <div class="accordion-heading">
-                        <span class="accordion-toggle">
-                            <strong>远程服务器</strong>
-                            <a id="remote_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
-                                黑屏<img src="img/tooltip.png"/>
+            <div class="modal-footer">
+                <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">设置</button>
+            </div>
+        </div>
+        <div id="audio_modal" class="modal hide fade">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3>音频编码</h3>
+            </div>
+            <div class="modal-body">
+                <div class="form-horizontal">
+                    <div class="control-group">
+                        <label class="control-label" for="sl_microphones">
+                            麦克风
+                            <a id="worker_id_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
+                                <img src="img/tooltip.png"/>
                             </a>
-                            <a id="remote_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
-                                播放地址<img src="img/tooltip.png"/>
-                            </a>
-                        </span>
+                        </label>
+                        <div class="controls">
+                            <select class="span4" id="sl_microphones"></select>
+                        </div>
                     </div>
-                    <div class="accordion-body collapse in">
-                        <div class="accordion-inner">
-                            <div id="remote_player"></div>
+                    <div class="control-group">
+                        <label class="control-label" for="sl_acodec">
+                            编码
+                            <a id="sl_acodec_tips" href="#" data-toggle="tooltip" data-placement="right" title="">
+                                <img src="img/tooltip.png"/>
+                            </a>
+                        </label>
+                        <div class="controls">
+                            <select class="span2" id="sl_acodec"></select>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">设置</button>
+            </div>
+        </div>
+        <div class="container">
+            <div class="row-fluid">
+                <div class="span6">
+                    <div class="accordion-group">
+                        <div class="accordion-heading">
+                            <span class="accordion-toggle">
+                                <strong>本地摄像头</strong>
+                            </span>
+                        </div>
+                        <div class="accordion-body collapse in">
+                            <div class="accordion-inner">
+                                <div id="local_publisher"></div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="span6">
+                    <div class="accordion-group">
+                        <div class="accordion-heading">
+                            <span class="accordion-toggle">
+                                <strong>远程服务器</strong>
+                                <a id="remote_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
+                                    黑屏<img src="img/tooltip.png"/>
+                                </a>
+                                <a id="remote_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
+                                    播放地址<img src="img/tooltip.png"/>
+                                </a>
+                            </span>
+                        </div>
+                        <div class="accordion-body collapse in">
+                            <div class="accordion-inner">
+                                <div id="remote_player"></div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
-    <div class="container">
-        <div class="row-fluid">
-            <div class="span6">
-                <div class="accordion-group">
-                    <div class="accordion-heading">
-                        <span class="accordion-toggle">
-                            <strong>远程服务器</strong>
-                            <a id="low_latecy_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
-                                低延时<img src="img/tooltip.png"/>
-                            </a>
-                            <a id="realtime_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
-                                播放地址<img src="img/tooltip.png"/>
-                            </a>
-                        </span>
-                    </div>
-                    <div class="accordion-body collapse in">
-                        <div class="accordion-inner">
-                            <div id="realtime_player"></div>
+        <div class="container">
+            <div class="row-fluid">
+                <div class="span6">
+                    <div class="accordion-group">
+                        <div class="accordion-heading">
+                            <span class="accordion-toggle">
+                                <strong>远程服务器</strong>
+                                <a id="low_latecy_tips" href="#" data-toggle="tooltip" data-placement="top" title="">
+                                    低延时<img src="img/tooltip.png"/>
+                                </a>
+                                <a id="realtime_player_url" href="#" data-toggle="tooltip" data-placement="top" title="">
+                                    播放地址<img src="img/tooltip.png"/>
+                                </a>
+                            </span>
+                        </div>
+                        <div class="accordion-body collapse in">
+                            <div class="accordion-inner">
+                                <div id="realtime_player"></div>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
-            <div class="span6">
+                <div class="span6">
+                </div>
             </div>
         </div>
     </div>
+
     <footer>
+        <p></p>
         <p><a href="https://github.com/ossrs/srs">SRS Team &copy; 2013</a></p>
     </footer>
 </div>
@@ -276,13 +292,55 @@
 <script type="text/javascript" src="js/srs.publisher.js"></script>
 <script type="text/javascript" src="js/srs.utility.js"></script>
 <script type="text/javascript" src="js/winlin.utility.js"></script>
+<script type="text/javascript">
+    var __on_flash_ready = null;
+
+    $(function(){
+        // 探测Flash是否正常启用。
+        $('#main_flash_hdr').html(
+            '\
+            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%"> \
+                <param name="movie" value="srs_player/release/srs_player.swf"> \
+                <param name="quality" value="autohigh"> \
+                <param name="swliveconnect" value="true"> \
+                <param name="allowScriptAccess" value="always"> \
+                <param name="bgcolor" value="#0"> \
+                <param name="allowFullScreen" value="true"> \
+                <param name="wmode" value="opaque"> \
+                <param name="FlashVars" value="log=1"> \
+                <param name="flashvars" value="id=1&on_player_ready=__on_flash_ready"> \
+                <embed src="srs_player/release/srs_player.swf" width="100%" height="100%" \
+                    quality="autohigh" bgcolor="#0" align="middle" allowfullscreen="true" allowscriptaccess="always" \
+                    type="application/x-shockwave-flash" swliveconnect="true" wmode="opaque" \
+                    flashvars="id=1&on_player_ready=__on_flash_ready" \
+                    pluginspage="http://www.macromedia.com/go/getflashplayer"> \
+            </object> \
+            '
+        );
+        $('#main_flash_hdr').show();
+
+        var showFlashHdr = setTimeout(function(){
+            $('#main_flash_alert').show();
+        }, 300);
+
+        __on_flash_ready = function (id) {
+            clearTimeout(showFlashHdr);
+
+            $('#main_flash_alert').hide();
+            $('#main_flash_hdr').hide();
+            $('#main_content').show();
+
+            autoLoadPage();
+        };
+    });
+</script>
 <script type="text/javascript">
     var srs_publisher = null;
     var remote_player = null;
     var realtime_player = null;
 
     var query = parse_query_string();
-    $(function(){
+    var autoLoadPage = function() {
         // get the vhost and port to set the default url.
         // for example: http://192.168.1.213/players/jwplayer6.html?port=1935&vhost=demo
         // url set to: rtmp://demo:1935/live/livestream
@@ -366,7 +424,7 @@
             }
             realtime_player.start();
         }
-    });
+    };
 
     function on_publish_stop() {
         if (!srs_can_republish()) {