187 lines
5.4 KiB
HTML
187 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>录音</title>
|
|
<style>
|
|
body {
|
|
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
max-width: 600px;
|
|
padding: 20px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.title {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
margin-bottom: 30px;
|
|
color: #333;
|
|
}
|
|
|
|
.status-indicator {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 50%;
|
|
margin: 20px 0 40px;
|
|
background-color: #e0e0e0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.status-text {
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.red {
|
|
background-color: #ff5252;
|
|
}
|
|
|
|
.green {
|
|
background-color: #4caf50;
|
|
}
|
|
|
|
.btn-group {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
button {
|
|
padding: 12px 24px;
|
|
font-size: 16px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
background-color: #2196F3;
|
|
color: white;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
button:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
button:active {
|
|
transform: translateY(0);
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
#start {
|
|
background-color: #4CAF50;
|
|
}
|
|
|
|
#stop {
|
|
background-color: #f44336;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1 class="title">实时音频录制</h1>
|
|
|
|
<div id="statusIndicator" class="status-indicator red">
|
|
<span class="status-text">未连接</span>
|
|
</div>
|
|
|
|
<div class="btn-group">
|
|
<button id="start" onclick="enterRoom()">启动直播</button>
|
|
<button id="stop" onclick="leaveRoom()">关闭直播</button>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
|
|
<!-- <script src="https://www.unpkg.com/trtc-sdk-v5@5.9.1/trtc.js"></script> -->
|
|
<script src='https://web.sdk.qcloud.com/trtc/webrtc/v5/dist/trtc.js'></script>
|
|
<script src="/js/lib-generate-test-usersig.min.js"></script>
|
|
<script src="/js/generateTestUserSig.js"></script>
|
|
<script>
|
|
|
|
const statusIndicator = document.getElementById('statusIndicator');
|
|
const statusText = statusIndicator.querySelector('.status-text');
|
|
/* eslint-disable*/
|
|
const sdkAppId = 1600079538;
|
|
const sdkSecretKey = "df2427757c0ec29ae8ca45611ddb70381144d55338e5ac73c2da27a9c32729f6";
|
|
let userId = "监听者：" + Math.random().toString(36).substring(2, 15);
|
|
let roomId = 8888;
|
|
|
|
let trtc = TRTC.create();
|
|
|
|
async function enterRoom() {
|
|
try {
|
|
trtc = TRTC.create();
|
|
// 更新状态指示器为过渡状态
|
|
statusIndicator.style.backgroundColor = '#FFC107';
|
|
statusText.textContent = '连接中...';
|
|
|
|
// 生成用户签名
|
|
const { userSig } = genTestUserSig({ sdkAppId, userId, sdkSecretKey });
|
|
|
|
// 进入房间
|
|
await trtc.enterRoom({ sdkAppId, userId, userSig, roomId: roomId });
|
|
|
|
// // 开启本地音频
|
|
// await trtc.startLocalAudio();
|
|
|
|
// 更新状态指示器为绿色（已连接）
|
|
statusIndicator.className = 'status-indicator green';
|
|
statusText.textContent = '通话中';
|
|
|
|
// 禁用启动按钮
|
|
document.getElementById('start').disabled = true;
|
|
|
|
} catch (error) {
|
|
console.error('进入房间失败:', error);
|
|
statusIndicator.className = 'status-indicator red';
|
|
statusText.textContent = '连接失败';
|
|
}
|
|
}
|
|
|
|
async function leaveRoom() {
|
|
try {
|
|
await trtc.exitRoom();
|
|
trtc.destroy();
|
|
// 更新状态指示器为红色（已断开）
|
|
statusIndicator.className = 'status-indicator red';
|
|
statusText.textContent = '未连接';
|
|
|
|
// 启用启动按钮
|
|
document.getElementById('start').disabled = false;
|
|
|
|
} catch (error) {
|
|
console.error('离开房间失败:', error);
|
|
}
|
|
}
|
|
|
|
$(function () {
|
|
// 初始化时设置状态
|
|
statusIndicator.className = 'status-indicator red';
|
|
statusText.textContent = '未连接';
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |