From fb5512bec7df7d75574e92ceff45a16f0b0744d3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=98=8E=E6=9C=88=E6=83=8A=E9=B9=8A?=
 <mingyuejingque@gmail.com>
Date: Mon, 3 Apr 2023 10:03:04 +0800
Subject: [PATCH] =?UTF-8?q?webrtc=E9=A1=B5=E9=9D=A2=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E8=8E=B7=E5=8F=96=E5=9C=A8=E7=BA=BF=E6=B5=81=E5=88=97=E8=A1=A8?=
 =?UTF-8?q?=E5=B9=B6=E7=9B=B4=E6=8E=A5=E7=82=B9=E5=87=BB=E6=92=AD=E6=94=BE?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20(#2359)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 www/webrtc/index.html | 70 +++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 68 insertions(+), 2 deletions(-)

diff --git a/www/webrtc/index.html b/www/webrtc/index.html
index d4eb1776..0ff074f4 100644
--- a/www/webrtc/index.html
+++ b/www/webrtc/index.html
@@ -18,11 +18,19 @@
           </video>
         </div>
 
-        <div>
+        <div style="float: left; width:30%;">
+          <span>已存在的流列表，点击自动播放:</span>
+          <ol id="olstreamlist">
+            <li>初始演示</li>
+            <li>每秒自动刷新</li>
+          </ol>
+        </div>
+
+        <div style="float: right; width: 70%">
 
             <p>
                 <label for="streamUrl">url:</label>
-                <input type="text" style="co" id='streamUrl' value="http://192.168.1.101/index/api/webrtc?app=live&stream=xiong&type=play">
+                <input type="text" style="co; width:70%" id='streamUrl' value="http://192.168.1.101/index/api/webrtc?app=live&stream=xiong&type=play">
             </p>
 
             <p>
@@ -252,6 +260,64 @@
         }
       }
 
+
+      function on_click_to_play(app, stream) {
+        console.log(`on_click_to_play: ${app}/${stream}`);
+        var url = `${document.location.protocol}//${window.location.host}/index/api/webrtc?app=${app}&stream=${stream}&type=play`;
+        document.getElementById('streamUrl').value = url;
+        start();
+      }
+      function clearStreamList() {
+        let content = document.getElementById("olstreamlist");
+          while (content.hasChildNodes()) {
+            content.removeChild(content.firstChild);
+          }
+      }
+      function fillStreamList(json) {
+          clearStreamList();
+          if (json.code != 0) {
+            return;
+          }
+          let ss = {};
+          for (let o of json.data) {
+            if (ss[o.app]) {
+              ss[o.app].add(o.stream);
+            } else {
+              let set = new Set();
+              set.add(o.steram);
+              ss[o.app] = set;
+            }
+          }
+
+          for (let o in ss) {
+            let app = o;
+            for (let s of ss[o]) {
+              if (s) {
+                //console.log(app, s);
+                let content = document.getElementById("olstreamlist");
+                let child = `<li app="${app}"  stream="${s}" onmouseover="this.style.color='blue';" onclick="on_click_to_play('${app}', '${s}')">${app}/${s}</li>`;
+                content.insertAdjacentHTML("beforeend", child);
+              }
+            }
+          }
+      }
+      async function getData(url) {
+        const response = await fetch(url, {
+            method: 'GET'
+        });
+        const data = await response.json();
+        //console.log(data);
+        return data;
+      }
+      function get_media_list() {
+        let url = document.location.protocol+"//"+window.location.host+"/index/api/getMediaList?secret=035c73f7-bb6b-4889-a715-d9eb2d1925cc";
+        let json = getData(url);
+        json.then((json)=> fillStreamList(json));
+      }
+      setInterval(() => {
+       get_media_list(); 
+      }, 1000);
+
     </script>
     
   </body>