项目备份
This commit is contained in:
林觅
339
docs/webrtc_demo_caller.html
Normal file
339
docs/webrtc_demo_caller.html
Normal file
@@ -0,0 +1,339 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>WebRTC 请求方</title>
|
||||
<style>
|
||||
.video-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
video {
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 10px 20px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#dataChannelLog {
|
||||
margin-top: 20px;
|
||||
padding: 10px;
|
||||
border: 1px solid #ccc;
|
||||
height: 240px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>WebRTC 请求方</h1>
|
||||
|
||||
<div class="video-container">
|
||||
<div>
|
||||
<h3>本地视频</h3>
|
||||
<video id="localVideo" autoplay muted></video>
|
||||
</div>
|
||||
<div>
|
||||
<h3>远程视频</h3>
|
||||
<video id="remoteVideo" autoplay></video>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button id="startBtn">1.获取媒体信息</button>
|
||||
<button id="callBtn" disabled>2.呼叫</button>
|
||||
<button id="sendBtn" disabled>发送消息</button>
|
||||
<input type="text" id="messageInput" placeholder="输入消息">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>数据通道日志</h3>
|
||||
<div id="dataChannelLog"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 全局变量
|
||||
let localStream;
|
||||
let pc;
|
||||
let dataChannel;
|
||||
let clientCandidates = [];
|
||||
let ws; // 改为let，方便重新创建
|
||||
let isWsConnected = false; // WebSocket连接状态标记
|
||||
const localVideo = document.getElementById('localVideo');
|
||||
const remoteVideo = document.getElementById('remoteVideo');
|
||||
const startBtn = document.getElementById('startBtn');
|
||||
const callBtn = document.getElementById('callBtn');
|
||||
const sendBtn = document.getElementById('sendBtn');
|
||||
const messageInput = document.getElementById('messageInput');
|
||||
const dataChannelLog = document.getElementById('dataChannelLog');
|
||||
|
||||
// 初始化WebSocket连接
|
||||
function initWebSocket() {
|
||||
// 先关闭旧连接
|
||||
if (ws) {
|
||||
try { ws.close() }
|
||||
catch (e) { }
|
||||
isWsConnected = false;
|
||||
}
|
||||
const user_id = 0;
|
||||
const wsService = `wss://api.vlos.net/wsSignaling/${user_id}/`
|
||||
// 创建新连接
|
||||
// ws = new WebSocket(`ws://localhost:8000/wsSignaling/0/`);
|
||||
ws = new WebSocket(wsService);
|
||||
// WebSocket连接成功
|
||||
ws.onopen = () => {
|
||||
console.info('WebSocket已连接');
|
||||
isWsConnected = true;
|
||||
addToLog('信令通道已建立');
|
||||
};
|
||||
|
||||
// WebSocket消息处理
|
||||
ws.onmessage = async (event) => {
|
||||
if (!isWsConnected) return;
|
||||
const message = JSON.parse(event.data);
|
||||
console.info('收到信令消息:', message.type);
|
||||
try {
|
||||
switch (message.type) {
|
||||
case 'answer':
|
||||
if (pc) {
|
||||
await pc.setRemoteDescription(new RTCSessionDescription(message.data));
|
||||
console.info(`22,请求方监听对方发送过来的answer到本地setRemoteDescription`)
|
||||
}
|
||||
break;
|
||||
case 'candidate':
|
||||
if (message.data && pc) {
|
||||
await pc.addIceCandidate(new RTCIceCandidate(message.data));
|
||||
}
|
||||
console.info(`17,请求方监听监听方发送过来的远程候选`)
|
||||
break;
|
||||
case 'hangup':
|
||||
handleHangup();
|
||||
break;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('处理信令消息出错:', error);
|
||||
addToLog(`处理信令错误: ${error.message}`);
|
||||
}
|
||||
};
|
||||
|
||||
// WebSocket关闭
|
||||
ws.onclose = () => {
|
||||
console.info('WebSocket已关闭');
|
||||
isWsConnected = false;
|
||||
addToLog('信令通道已关闭');
|
||||
// 自动重连逻辑（可选）
|
||||
setTimeout(() => {
|
||||
if (!isWsConnected) {
|
||||
addToLog('尝试重新连接信令服务器...');
|
||||
initWebSocket();
|
||||
}
|
||||
}, 3000);
|
||||
};
|
||||
|
||||
// WebSocket错误
|
||||
ws.onerror = (error) => {
|
||||
console.error('WebSocket错误:', error);
|
||||
isWsConnected = false;
|
||||
addToLog(`信令通道错误: ${error.message}`);
|
||||
};
|
||||
}
|
||||
// 安全的WebSocket发送方法
|
||||
function sendSignalingMessage(message) {
|
||||
// 检查WebSocket状态
|
||||
if (!ws || !isWsConnected || ws.readyState !== WebSocket.OPEN) {
|
||||
addToLog('无法发送信令消息：信令通道未连接');
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
ws.send(JSON.stringify(message));
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error('发送信令消息失败:', error);
|
||||
addToLog(`发送信令失败: ${error.message}`);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化WebSocket
|
||||
initWebSocket();
|
||||
// 开始按钮 - 获取本地媒体流
|
||||
startBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
|
||||
console.info(`2,请求方捕获媒体文件`)
|
||||
// 获取本地音视频流
|
||||
// localStream = await navigator.mediaDevices.getUserMedia({video: true,audio: true});
|
||||
// 获取屏幕共享
|
||||
localStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: true });
|
||||
localVideo.srcObject = localStream;
|
||||
addToLog(`捕获本地媒体`);
|
||||
// 创建 PeerConnection
|
||||
createPeerConnection();
|
||||
addToLog(`创建 PeerConnection`);
|
||||
|
||||
// 启用呼叫按钮
|
||||
startBtn.disabled = true;
|
||||
callBtn.disabled = false;
|
||||
} catch (error) {
|
||||
console.error('获取媒体流失败:', error);
|
||||
alert('无法访问摄像头/麦克风，请检查权限');
|
||||
}
|
||||
});
|
||||
|
||||
// 呼叫按钮 - 请求呼叫
|
||||
callBtn.addEventListener('click', async () => {
|
||||
try {
|
||||
// 创建数据通道
|
||||
dataChannel = pc.createDataChannel('chat');
|
||||
setupDataChannel();
|
||||
addToLog(`创建dataChannel`);
|
||||
console.info(`7,请求方创建dataChannel`)
|
||||
|
||||
// 创建 offer
|
||||
const offer = await pc.createOffer();
|
||||
console.info(`8,请求方创建offer`)
|
||||
await pc.setLocalDescription(offer);
|
||||
console.info(`9,请求方保存自己生成的信令`)
|
||||
addToLog(`创建offer`);
|
||||
|
||||
|
||||
// 发送 offer 到信令服务器
|
||||
ws.send(JSON.stringify({ type: 'offer', data: offer }));
|
||||
addToLog(`发送offer`);
|
||||
console.info(`10,请求方发送信令(offer)到远程端`)
|
||||
|
||||
// callBtn.disabled = true;
|
||||
sendBtn.disabled = false;
|
||||
messageInput.disabled = false;
|
||||
} catch (error) {
|
||||
console.error('请求呼叫失败:', error);
|
||||
}
|
||||
});
|
||||
|
||||
// 发送数据通道消息
|
||||
sendBtn.addEventListener('click', () => {
|
||||
const message = messageInput.value.trim();
|
||||
addToLog(`dataChannel.readyState-> ${dataChannel.readyState}`);
|
||||
if (!message || !dataChannel || dataChannel.readyState !== 'open') {
|
||||
console.info(`message:${message}`)
|
||||
console.info(`dataChannel:${dataChannel}`)
|
||||
console.info(`dataChannel.readyState:${dataChannel.readyState}`)
|
||||
return
|
||||
};
|
||||
|
||||
dataChannel.send(message);
|
||||
addToLog(`请求方: ${message}`);
|
||||
messageInput.value = '';
|
||||
});
|
||||
|
||||
// 创建 PeerConnection
|
||||
async function createPeerConnection() {
|
||||
// 配置 ICE 服务器 (使用免费的谷歌服务器)
|
||||
const config = {
|
||||
iceServers: [{ urls: 'stun:stun.l.google.com:19302' }]
|
||||
};
|
||||
|
||||
// 创建 PeerConnection
|
||||
pc = new RTCPeerConnection(config);
|
||||
console.info(`3,创建请求方PeerConnection`)
|
||||
|
||||
|
||||
// 监听 ICE 候选
|
||||
pc.onicecandidate = (event) => {
|
||||
if (event.candidate) {
|
||||
// 使用安全发送方法
|
||||
clientCandidates.push(event.candidate);
|
||||
// sendSignalingMessage({type: 'candidate',data: event.candidate});
|
||||
}
|
||||
};
|
||||
console.info(`监听ICE 候选 ->${clientCandidates}`);
|
||||
console.info(`6,请求方监听请求方自己信令ice,并发送给监听方`)
|
||||
|
||||
|
||||
// 添加本地媒体流到PeerConnection
|
||||
localStream.getTracks().forEach(track => { pc.addTrack(track, localStream) });
|
||||
console.info(`4,请求方添加本地媒体到PeerConnection`)
|
||||
|
||||
// 监听远程流
|
||||
pc.ontrack = (event) => { remoteVideo.srcObject = event.streams[0] };
|
||||
console.info(`5,请求方监听远程媒体remoteVideo`)
|
||||
|
||||
// 监听连接状态变化
|
||||
pc.oniceconnectionstatechange = () => {
|
||||
console.info('ICE 连接状态:', pc.iceConnectionState);
|
||||
if (pc.iceConnectionState === 'disconnected') {
|
||||
handleHangup();
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// 设置数据通道
|
||||
function setupDataChannel() {
|
||||
// 数据通道打开
|
||||
dataChannel.onopen = () => { addToLog('数据通道已打开') };
|
||||
|
||||
// 收到数据通道消息
|
||||
dataChannel.onmessage = (event) => { addToLog(`对方: ${event.data}`) };
|
||||
|
||||
// 数据通道关闭
|
||||
dataChannel.onclose = () => {
|
||||
addToLog('数据通道已关闭');
|
||||
sendBtn.disabled = true;
|
||||
messageInput.disabled = true;
|
||||
};
|
||||
|
||||
// 数据通道错误
|
||||
dataChannel.onerror = (error) => {
|
||||
console.error('数据通道错误:', error);
|
||||
addToLog(`数据通道错误: ${error.message}`);
|
||||
};
|
||||
}
|
||||
|
||||
// 处理挂断
|
||||
function handleHangup() {
|
||||
if (pc) {
|
||||
pc.close();
|
||||
pc = null;
|
||||
}
|
||||
if (localStream) {
|
||||
localStream.getTracks().forEach(track => track.stop());
|
||||
localStream = null;
|
||||
}
|
||||
localVideo.srcObject = null;
|
||||
remoteVideo.srcObject = null;
|
||||
startBtn.disabled = false;
|
||||
callBtn.disabled = true;
|
||||
sendBtn.disabled = true;
|
||||
messageInput.disabled = true;
|
||||
addToLog('连接已断开');
|
||||
}
|
||||
|
||||
// 添加日志
|
||||
function addToLog(message) {
|
||||
const time = new Date().toLocaleTimeString();
|
||||
dataChannelLog.innerHTML += `[${time}] ${message}<br>`;
|
||||
dataChannelLog.scrollTop = dataChannelLog.scrollHeight;
|
||||
}
|
||||
// 页面关闭时清理
|
||||
window.addEventListener('beforeunload', () => {
|
||||
ws.send(JSON.stringify({ type: 'hangup' }));
|
||||
if (pc) pc.close();
|
||||
if (localStream) localStream.getTracks().forEach(track => track.stop());
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user