From 2f2e8c2e43632c9150eedf746247dab8209bc656 Mon Sep 17 00:00:00 2001
From: Xiaofeng Wang <wasphin@gmail.com>
Date: Mon, 24 Jun 2024 09:28:43 +0800
Subject: [PATCH] Adjust video layout (#3658)

---
 www/webrtc/index.html | 33 ++++++++++++++++++++++-----------
 1 file changed, 22 insertions(+), 11 deletions(-)
diff --git a/www/webrtc/index.html b/www/webrtc/index.html
index 5fe5caee..a0879bea 100644
--- a/www/webrtc/index.html
+++ b/www/webrtc/index.html
@@ -3,17 +3,25 @@
   <head>
     <title>ZLM RTC demo</title>
     <script src="./ZLMRTCClient.js"></script>
+    <style>
+      video {
+        width: 40vw;
+        max-height: 50vh;
+        height: 22.5vw; /* 默认和宽:高为 16:9 */
+        object-fit: contain;
+        background-color: grey;
+      }
+    </style>
   </head>
     
   <body>
-
     <div style="text-align: center;">
         <div>
-          <video id='video' controls autoplay style="text-align:left;">
+          <video id='video' controls autoplay>
             Your browser is too old which doesn't support HTML5 video.
           </video>
 
-          <video id='selfVideo' controls autoplay style="text-align:right;">
+          <video id='selfVideo' controls autoplay>
             Your browser is too old which doesn't support HTML5 video.
           </video>
         </div>
@@ -27,7 +35,6 @@
         </div>
 
         <div style="float: right; width: 70%">
-
             <p>
                 <label for="streamUrl">url:</label>
                 <input type="text" style="co; width:70%" id='streamUrl' value="http://192.168.1.101/index/api/webrtc?app=live&stream=xiong&type=play">
@@ -88,7 +95,6 @@
               </select>
             </p>
 
-
             <p>
               <label for="audioDevice">audiodevice:</label>
               <select id="audioDevice">
@@ -101,10 +107,6 @@
             </p>
             <button onclick="switchVideo()">切换视频(switch video)</button>
             <button onclick="switchAudio()">切换音频(switch  audio)</button>
-            
-
-        <div>11111</div>
-            
         </div>
     </div>
 
@@ -198,8 +200,17 @@
         let elv = document.getElementById("videoDevice");
         let ela = document.getElementById("audioDevice");
 
-        let vdevid = JSON.parse(elv.options[elv.selectedIndex].value).deviceId
-        let adevid = JSON.parse(ela.options[ela.selectedIndex].value).deviceId
+        let vdevid = ''
+        let adevid = ''
+
+        if (!recvOnly) {
+            if (elv.selectedIndex !== -1) {
+                vdevid = JSON.parse(elv.options[elv.selectedIndex].value).deviceId
+            }
+            if (ela.selectedIndex !== -1) {
+                adevid = JSON.parse(ela.options[ela.selectedIndex].value).deviceId
+            }
+        }
 
         player = new ZLMRTCClient.Endpoint(
                 {
