webrtc: optimize publish page for mobile devices (#2066)

bluenviron · Oct 6, 2023 · b7020e4 · b7020e4
1 parent 412a48a
commit b7020e4
Showing 1 changed file with 56 additions and 25 deletions.
diff --git a/internal/core/webrtc_publish_index.html b/internal/core/webrtc_publish_index.html
@@ -8,7 +8,6 @@
  margin: 0;
  padding: 0;
  height: 100%;
- overflow: hidden;
 }
 body {
  display: flex;
@@ -21,11 +20,12 @@
  min-height: 0;
 }
 #controls {
- height: 200px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
+ min-height: 200px;
+ padding: 10px;
 }
 #device {
  flex-direction: column;
@@ -35,6 +35,14 @@
  display: flex;
  gap: 20px;
  justify-content: center;
+ flex-wrap: wrap;
+}
+#device > div > div {
+ display: flex;
+ gap: 20px;
+}
+#error-message {
+ text-align: center;
 }
 select {
  width: 200px;
@@ -50,31 +58,43 @@
  </div>
  <div id="device" style="display: none;">
  <div id="device_line">
- video device:
- <select id="video_device">
- <option value="none">none</option>
- </select>
-
- audio device:
- <select id="audio_device">
- <option value="none">none</option>
- </select>
+ <div>
+ video device
+ <select id="video_device">
+ <option value="none">none</option>
+ </select>
+ </div>
+
+ <div>
+ audio device
+ <select id="audio_device">
+ <option value="none">none</option>
+ </select>
+ </div>
  </div>
  <div id="codec_line">
- video codec:
- <select id="video_codec">
- </select>
+ <div>
+ video codec
+ <select id="video_codec">
+ </select>
+ </div>
 
- audio codec:
- <select id="audio_codec">
- </select>
+ <div>
+ audio codec
+ <select id="audio_codec">
+ </select>
+ </div>
  </div>
  <div id="bitrate_line">
- video bitrate (kbps):
- <input id="video_bitrate" type="text" value="10000" />
+ <div>
+ video bitrate (kbps)
+ <input id="video_bitrate" type="text" value="10000" />
+ </div>
 
- audio bitrate (kbps):
- <input id="audio_bitrate" type="text" value="32" />
+ <div>
+ audio bitrate (kbps)
+ <input id="audio_bitrate" type="text" value="32" />
+ </div>
 
  <div>
  <input id="audio_voice" type="checkbox" checked>
@@ -449,13 +469,14 @@
 }
 
 const onTransmit = (stream) => {
- state = TRANSMITTING;
- render();
  document.getElementById('video').srcObject = stream;
  new Transmitter(stream);
 };
 
 const onPublish = () => {
+ state = TRANSMITTING;
+ render();
+
  const videoId = document.getElementById('video_device').value;
  const audioId = document.getElementById('audio_device').value;
 
@@ -483,7 +504,12 @@
  }
 
  navigator.mediaDevices.getUserMedia({ video, audio })
- .then(onTransmit);
+ .then(onTransmit)
+ .catch((err) => {
+ state = ERROR;
+ errorMessage = err.toString();
+ render();
+ });
  } else {
  navigator.mediaDevices.getDisplayMedia({
  video: {
@@ -494,7 +520,12 @@
  },
  audio: false,
  })
- .then(onTransmit);
+ .then(onTransmit)
+ .catch((err) => {
+ state = ERROR;
+ errorMessage = err.toString();
+ render();
+ });
  }
 };