Adjust video layout (#3658)

This commit is contained in:
Xiaofeng Wang 2024-06-24 09:28:43 +08:00 committed by GitHub
parent 2bf16e63e1
commit 2f2e8c2e43
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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(
{