amass/ZLMediaKit
1
0
Fork 0
mirror of https://github.com/ZLMediaKit/ZLMediaKit.git synced 2024-11-22 19:00:01 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Adjust video layout (#3658)

Browse Source
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
1 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
www/webrtc/index.html
View File

@ -3,17 +3,25 @@
<head> <head>
<title>ZLM RTC demo</title> <title>ZLM RTC demo</title>
<script src="./ZLMRTCClient.js"></script> <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> </head>
<body> <body>
<div style="text-align: center;"> <div style="text-align: center;">
<div> <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. Your browser is too old which doesn't support HTML5 video.
</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. Your browser is too old which doesn't support HTML5 video.
</video> </video>
</div> </div>
@ -27,7 +35,6 @@
</div> </div>
<div style="float: right; width: 70%"> <div style="float: right; width: 70%">
<p> <p>
<label for="streamUrl">url:</label> <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"> <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> </select>
</p> </p>
<p> <p>
<label for="audioDevice">audiodevice:</label> <label for="audioDevice">audiodevice:</label>
<select id="audioDevice"> <select id="audioDevice">
@ -101,10 +107,6 @@
</p> </p>
<button onclick="switchVideo()">切换视频(switch video)</button> <button onclick="switchVideo()">切换视频(switch video)</button>
<button onclick="switchAudio()">切换音频(switch audio)</button> <button onclick="switchAudio()">切换音频(switch audio)</button>
<div>11111</div>
</div> </div>
</div> </div>
@ -198,8 +200,17 @@
let elv = document.getElementById("videoDevice"); let elv = document.getElementById("videoDevice");
let ela = document.getElementById("audioDevice"); let ela = document.getElementById("audioDevice");
let vdevid = JSON.parse(elv.options[elv.selectedIndex].value).deviceId let vdevid = ''
let adevid = JSON.parse(ela.options[ela.selectedIndex].value).deviceId 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( player = new ZLMRTCClient.Endpoint(
{ {