610 lines
20 KiB
JavaScript
610 lines
20 KiB
JavaScript
/**
|
||
* 【发起方】
|
||
1. 创建 PeerConnection
|
||
2. 采集本地流并添加到 PeerConnection
|
||
3. 调用 createOffer() → 生成Offer
|
||
4. 调用 setLocalDescription(offer) → 开始收集ICE候选
|
||
5. 通过信令发送Offer给接收方
|
||
6. 监听 onicecandidate → 发送ICE候选给接收方
|
||
7. 接收接收方的Answer → 调用 setRemoteDescription(answer)
|
||
8. 接收接收方的ICE候选 → 调用 addIceCandidate(candidate)
|
||
|
||
【接收方】
|
||
1. 创建 PeerConnection
|
||
2. 接收发起方的Offer → 调用 setRemoteDescription(offer)
|
||
3. 调用 createAnswer() → 生成Answer
|
||
4. 调用 setLocalDescription(answer) → 开始收集ICE候选
|
||
5. 通过信令发送Answer给发起方
|
||
6. 监听 onicecandidate → 发送ICE候选给发起方
|
||
7. 接收发起方的ICE候选 → 调用 addIceCandidate(candidate)
|
||
*/
|
||
|
||
/**
|
||
* WebRTC 核心封装类(ES6 模块化)
|
||
* 支持音视频互通、自定义数据传输、外部流管理
|
||
* 开箱即用,无需额外依赖
|
||
*/
|
||
export class WebRTC_ModuleSimple {
|
||
/**
|
||
* 构造函数
|
||
* @param {Object} options 初始化配置
|
||
* @param {HTMLElement} options.localVideo 本地视频播放元素
|
||
* @param {HTMLElement} options.remoteVideo 远端视频播放元素
|
||
* @param {string} options.dataChannelLabel 数据通道标签(默认 'chat')
|
||
* @param {Function} receivepeerCallback 回调函数
|
||
*/
|
||
constructor(options = {}) {
|
||
this.current_time = new Date();
|
||
// 基础配置
|
||
this.config = {
|
||
localVideo: options.localVideo,
|
||
remoteVideo: options.remoteVideo,
|
||
dataChannelLabel: options.dataChannelLabel || "chat",
|
||
iceServers: [
|
||
{ urls: "stun:stun.l.google.com:19302" },
|
||
{ urls: "stun:stun.cloudflare.com:3478" },
|
||
],
|
||
};
|
||
// WebRTC 核心对象
|
||
this.peerConnection = null;
|
||
this.dataChannel = null;
|
||
// 媒体流管理
|
||
this.localStream = null; // 本地流(可外部传入/获取)
|
||
this.remoteStream = null; // 远端流(可外部获取)
|
||
|
||
// 事件回调(外部可自定义)
|
||
this.callbacks = {
|
||
onIceCandidate: (candidate) => {}, // ICE 候选生成
|
||
onConnectSuccess: () => {}, // 连接成功
|
||
onConnectFailed: () => {}, // 连接失败
|
||
onRemoteStream: (stream) => {}, // 收到远端流
|
||
onMessage: (data) => {}, // 收到自定义消息
|
||
onClose: () => {}, // 连接关闭
|
||
onState: (state) => {},
|
||
};
|
||
// 初始化 PeerConnection
|
||
this._initPeerConnection();
|
||
}
|
||
/**
|
||
* 初始化 RTCPeerConnection 核心对象
|
||
* @private
|
||
*/
|
||
_initPeerConnection() {
|
||
try {
|
||
// 销毁旧实例
|
||
if (this.peerConnection) {
|
||
this.peerConnection.close();
|
||
}
|
||
// 浏览器兼容处理
|
||
const RTCPeerConnection =
|
||
window.RTCPeerConnection ||
|
||
window.mozRTCPeerConnection ||
|
||
window.webkitRTCPeerConnection;
|
||
this.peerConnection = new RTCPeerConnection({
|
||
iceServers: this.config.iceServers,
|
||
});
|
||
// 监听信令协商状态
|
||
this.signalingStateListener();
|
||
// 监听远程信息
|
||
this.peerConnectionLisioner();
|
||
} catch (error) {
|
||
console.error("WebRTC 初始化失败:", error);
|
||
this.callbacks.onConnectFailed();
|
||
}
|
||
}
|
||
// 监听信令状态变化(Offer/Answer/Ice 协商)
|
||
signalingStateListener() {
|
||
// 初始状态打印
|
||
console.warn(
|
||
`[webRTC]${this.current_time.toLocaleTimeString()}初始信令状态:`,
|
||
this.peerConnection.signalingState,
|
||
);
|
||
// 监听信令状态变化(Offer/Answer 协商)
|
||
this.peerConnection.onsignalingstatechange = () => {
|
||
/**
|
||
* 信令状态枚举值（全阶段）
|
||
* new 初始状态
|
||
* have-local-offer 本地已设置 Offer 发起者：已调用 createOffer() + setLocalDescription(offer)
|
||
* have-remote-offer 远端已设置 Offer 应答者：已调用 setRemoteDescription(offer)
|
||
* have-local-answer 本地已设置 Answer 应答者：已调用 createAnswer() + setLocalDescription(answer)
|
||
* have-remote-answer 远端已设置 Answer 发起者：已调用 setRemoteDescription(answer)
|
||
* stable 协商完成，稳定状态
|
||
* closed PeerConnection 已关闭
|
||
*/
|
||
const state = this.peerConnection.signalingState;
|
||
console.warn(
|
||
`[webRTC]${this.current_time.toLocaleTimeString()}初始信令变更:`,
|
||
state,
|
||
);
|
||
state && this.callbacks.onState(state);
|
||
// 根据状态执行不同逻辑
|
||
switch (state) {
|
||
case "new":
|
||
console.warn(
|
||
`[webRTC]${this.current_time.toLocaleTimeString()}【状态】未开始协商,可创建 Offer`,
|
||
);
|
||
break;
|
||
case "have-local-offer":
|
||
console.warn(
|
||
`[webRTC]${this.current_time.toLocaleTimeString()}【状态】发起者已发 Offer,等待应答者 Answer`,
|
||
);
|
||
// 可触发 ICE 候选者发送逻辑
|
||
break;
|
||
case "have-remote-offer":
|
||
console.warn(
|
||
`[webRTC]${this.current_time.toLocaleTimeString()}【状态】应答者已收 Offer,可创建 Answer`,
|
||
);
|
||
break;
|
||
case "stable":
|
||
console.warn(
|
||
`[webRTC]${this.current_time.toLocaleTimeString()}【状态】Offer/Answer 协商完成,进入 ICE 配对阶段`,
|
||
);
|
||
break;
|
||
case "closed":
|
||
console.warn(
|
||
`[webRTC]${this.current_time.toLocaleTimeString()}【状态】PeerConnection 已关闭,协商终止`,
|
||
);
|
||
break;
|
||
default:
|
||
console.warn(
|
||
`[webRTC]${this.current_time.toLocaleTimeString()}【状态】协商中:`,
|
||
state,
|
||
);
|
||
}
|
||
};
|
||
// ICE 候选者收集 / 配对 / 连接
|
||
this.peerConnection.onicegatheringstatechange = () => {
|
||
/**
|
||
* ICE 连接状态（iceConnectionState）
|
||
* new 初始状态，未开始连接
|
||
* checking 正在检查候选者配对
|
||
* connected 已建立连接（P2P 成功）
|
||
* completed 连接完成（所有候选者检查完毕）
|
||
* failed ICE 协商失败
|
||
* disconnected 连接断开（临时）
|
||
* closed PeerConnection 已关闭
|
||
*/
|
||
const state = this.peerConnection.iceGatheringState;
|
||
console.warn(
|
||
`[webRTC]${this.current_time.toLocaleTimeString()}ICE 收集状态变更:`,
|
||
state,
|
||
);
|
||
state && this.callbacks.onState(state);
|
||
switch (state) {
|
||
case "gathering":
|
||
console.warn(
|
||
`[webRTC]${this.current_time.toLocaleTimeString()}【ICE】开始收集候选者(host/srflx/relay)`,
|
||
state,
|
||
);
|
||
break;
|
||
case "complete":
|
||
console.warn(
|
||
`[webRTC]${this.current_time.toLocaleTimeString()}【ICE】候选者收集完成`,
|
||
state,
|
||
);
|
||
break;
|
||
}
|
||
};
|
||
}
|
||
peerConnectionLisioner() {
|
||
if (!this.peerConnection) {
|
||
return;
|
||
}
|
||
// 监听远端媒体流
|
||
this.peerConnection.ontrack = (e) => {
|
||
this.remoteStream = e.streams[0];
|
||
// 绑定远端视频
|
||
if (this.config.remoteVideo) {
|
||
this.config.remoteVideo.srcObject = this.remoteStream;
|
||
this.config.remoteVideo.play().catch(() => {});
|
||
}
|
||
this.callbacks.onRemoteStream(this.remoteStream);
|
||
};
|
||
// 监听peer连接状态
|
||
this.peerConnection.onconnectionstatechange = () => {
|
||
const state = this.peerConnection.connectionState;
|
||
if (state === "connected") {
|
||
this.callbacks.onConnectSuccess();
|
||
} else if (state === "failed") {
|
||
this.callbacks.onConnectFailed();
|
||
} else if (state === "closed") {
|
||
this.callbacks.onClose();
|
||
}
|
||
};
|
||
// 监听远端创建的数据通道
|
||
this.peerConnection.ondatachannel = (e) => {
|
||
this.dataChannel = e.channel;
|
||
this.dataChannelLisioner();
|
||
};
|
||
// 监听 ICE 候选(需通过信令服务器发给对方)
|
||
this.peerConnection.onicecandidate = (e) => {
|
||
e.candidate && this.callbacks.onIceCandidate(e.candidate);
|
||
};
|
||
// 监听 ICE 连接状态,排查失败原因
|
||
this.peerConnection.oniceconnectionstatechange = () => {
|
||
const state = this.peerConnection.iceConnectionState;
|
||
console.info("ICE 连接状态:", state);
|
||
// 捕获 ICE failed 状态,给出明确提示
|
||
if (state === "failed") {
|
||
console.error("ICE 协商失败！请检查 TURN 服务器配置或网络环境");
|
||
// 可选：触发重新协商
|
||
this.createOffer();
|
||
}
|
||
};
|
||
// 新监听 ICE 候选者生成错误
|
||
this.peerConnection.onicecandidateerror = (event) => {
|
||
console.error(
|
||
"ICE 候选者生成失败:",
|
||
event.errorText,
|
||
"错误码:",
|
||
event.errorCode,
|
||
);
|
||
};
|
||
}
|
||
/**
|
||
* 初始化数据通道(自定义消息传输)
|
||
* @private
|
||
*/
|
||
dataChannelLisioner() {
|
||
if (!this.dataChannel) return;
|
||
// 数据通道打开
|
||
this.dataChannel.onopen = () => console.info("数据通道已就绪");
|
||
|
||
// 接收自定义消息(自动解析JSON)
|
||
this.dataChannel.onmessage = (e) => {
|
||
let data = e.data;
|
||
try {
|
||
data = JSON.parse(data);
|
||
} catch (err) {}
|
||
this.callbacks.onMessage(data);
|
||
this.dataChannelSendMsg(data);
|
||
};
|
||
// 数据通道错误
|
||
this.dataChannel.onerror = (error) => console.error("数据通道异常:", error);
|
||
// 数据通道关闭
|
||
this.dataChannel.onclose = () => console.info("数据通道关闭");
|
||
}
|
||
/**
|
||
* 采集本地音视频流(一键调用)
|
||
* @param {Object} constraints 媒体约束(默认开启音视频)
|
||
* @returns {Promise<MediaStream>} 本地媒体流
|
||
*/
|
||
async captureLocalStream(constraints = { video: true, audio: true }) {
|
||
try {
|
||
// getUserMedia 设备硬件：摄像头(视频)、麦克风(音频)
|
||
// getDisplayMedia 屏幕 / 窗口 / 标签页：显示器内容(视频),可选采集系统音频
|
||
this.localStream =
|
||
await navigator.mediaDevices.getDisplayMedia(constraints);
|
||
// 绑定本地视频
|
||
if (this.config.localVideo) {
|
||
this.config.localVideo.srcObject = this.localStream;
|
||
this.config.localVideo.muted = true; // 静音避免回声
|
||
this.config.localVideo.play().catch(() => {});
|
||
}
|
||
// 将流添加到连接
|
||
this.localStream.getTracks().forEach((track) => {
|
||
this.peerConnection.addTrack(track, this.localStream);
|
||
});
|
||
return this.localStream;
|
||
} catch (error) {
|
||
console.error("采集本地流失败:", error);
|
||
throw new Error(`媒体权限不足或设备不可用: ${error.message}`);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 外部传入本地媒体流(支持屏幕共享等自定义流)
|
||
* @param {MediaStream} stream 本地媒体流
|
||
*/
|
||
setLocalStream(stream) {
|
||
if (!stream) throw new Error("媒体流不能为空");
|
||
|
||
this.localStream = stream;
|
||
// 绑定视频(可选)
|
||
if (this.config.localVideo) {
|
||
this.config.localVideo.srcObject = stream;
|
||
this.config.localVideo.muted = true;
|
||
this.config.localVideo.play().catch(() => {});
|
||
}
|
||
// 添加到连接
|
||
// stream.getTracks().forEach(track => {
|
||
// this.peerConnection.addTrack(track, stream);
|
||
// });
|
||
}
|
||
|
||
/**
|
||
* 获取本地媒体流
|
||
* @returns {MediaStream|null} 本地流
|
||
*/
|
||
getLocalStream() {
|
||
return this.localStream;
|
||
}
|
||
|
||
/**
|
||
* 获取远端媒体流
|
||
* @returns {MediaStream|null} 远端流
|
||
*/
|
||
getRemoteStream() {
|
||
return this.remoteStream;
|
||
}
|
||
|
||
/**
|
||
* 发起方：创建 Offer 并开启数据通道
|
||
* @returns {Promise<RTCSessionDescription>} Offer 对象
|
||
*/
|
||
async createOffer() {
|
||
// 重置数据通道
|
||
if (this.dataChannel) {
|
||
this.dataChannel.close();
|
||
this.dataChannel = null;
|
||
}
|
||
// 创建数据通道(发起方主动创建)
|
||
this.dataChannel = this.peerConnection.createDataChannel(
|
||
this.config.dataChannelLabel,
|
||
);
|
||
// 监听数据通道
|
||
this.dataChannelLisioner();
|
||
|
||
const offer = await this.peerConnection.createOffer();
|
||
// 设置本地offer
|
||
await this.peerConnection.setLocalDescription(offer);
|
||
return offer;
|
||
}
|
||
|
||
/**
|
||
* 接收方：处理远端 Offer 并创建 Answer
|
||
* @param {RTCSessionDescription} offer 远端 Offer
|
||
* @returns {Promise<RTCSessionDescription>} Answer 对象
|
||
*/
|
||
async handleRemoteOffer(offer) {
|
||
await this.peerConnection.setRemoteDescription(
|
||
new RTCSessionDescription(offer),
|
||
);
|
||
const answer = await this.peerConnection.createAnswer();
|
||
await this.peerConnection.setLocalDescription(answer);
|
||
return answer;
|
||
}
|
||
|
||
/**
|
||
* 发起方：处理远端 Answer
|
||
* @param {RTCSessionDescription} answer 远端 Answer
|
||
*/
|
||
async handleAnswer(answer) {
|
||
try {
|
||
// 检查当前信令状态,仅在非 stable 时设置
|
||
if (this.peerConnection.signalingState !== "stable") {
|
||
await this.peerConnection.setRemoteDescription(
|
||
new RTCSessionDescription(answer),
|
||
);
|
||
console.info("远端 Answer 设置成功");
|
||
} else {
|
||
console.warn("PeerConnection 已处于稳定状态,无需重复设置 Answer");
|
||
}
|
||
} catch (error) {
|
||
console.error("设置远端 Answer 失败:", error);
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 添加远端 ICE 候选
|
||
* @param {RTCIceCandidate} candidate ICE 候选对象
|
||
*/
|
||
async addIceCandidate(candidate) {
|
||
if (!candidate) return;
|
||
try {
|
||
if (this.peerConnection && candidate) {
|
||
await this.peerConnection.addIceCandidate(
|
||
new RTCIceCandidate(candidate),
|
||
);
|
||
console.info("ICE 候选者添加成功", candidate);
|
||
} else return;
|
||
} catch (error) {
|
||
console.info(
|
||
"操作失败,需要先设置【远端的SDP】:步骤1：先设置远端 Offer(发起者的 SDP)步骤2：再添加 ICE 候选者(此时已有 remoteDescription)步骤3：创建并设置本地 Answer(依赖 remoteDescription)",
|
||
);
|
||
console.error(error);
|
||
if (error.message.includes("Unknown ufrag")) {
|
||
// ufrag 不匹配,说明是旧会话候选者,直接丢弃
|
||
console.warn("ICE 候选者 ufrag 不匹配,丢弃:", candidate);
|
||
} else {
|
||
// 其他错误(如未设置 remoteDescription),缓存候选者
|
||
console.info("缓存 ICE 候选者,待会话就绪后处理");
|
||
}
|
||
}
|
||
}
|
||
/**
|
||
* 发送自定义数据(支持字符串/对象)
|
||
* @param {string|Object} data 要发送的数据
|
||
*/
|
||
dataChannelSendMsg(data) {
|
||
if (!this.dataChannel || this.dataChannel.readyState !== "open") {
|
||
throw new Error("数据通道未连接,无法发送消息");
|
||
}
|
||
const sendData = typeof data === "object" ? JSON.stringify(data) : data;
|
||
this.dataChannel.send(sendData);
|
||
}
|
||
/**
|
||
* 关闭连接并清理所有资源
|
||
*/
|
||
close() {
|
||
// 关闭数据通道
|
||
if (this.dataChannel) {
|
||
this.dataChannel.close();
|
||
this.dataChannel = null;
|
||
}
|
||
|
||
// 关闭 PeerConnection
|
||
if (this.peerConnection) {
|
||
this.peerConnection.close();
|
||
this.peerConnection = null;
|
||
}
|
||
|
||
// 停止媒体流
|
||
if (this.localStream) {
|
||
this.localStream.getTracks().forEach((track) => track.stop());
|
||
this.localStream = null;
|
||
}
|
||
|
||
// 清空视频
|
||
if (this.config.localVideo) this.config.localVideo.srcObject = null;
|
||
if (this.config.remoteVideo) this.config.remoteVideo.srcObject = null;
|
||
|
||
this.callbacks.onClose();
|
||
console.log("WebRTC 连接已完全关闭");
|
||
}
|
||
/**
|
||
* 同步暂停指定毫秒数(阻塞主线程) 延迟一段时间运行 await this.delay(100);
|
||
* @param {number} ms 暂停毫秒数
|
||
*/
|
||
delayAsync(ms) {
|
||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||
}
|
||
/**
|
||
* 同步暂停指定毫秒数(阻塞主线程)
|
||
* @param {number} ms 暂停毫秒数
|
||
*/
|
||
delaySync(ms) {
|
||
const start = Date.now();
|
||
// 循环等待,直到时间差达到指定毫秒数
|
||
while (Date.now() - start < ms) {
|
||
// 空循环,消耗时间
|
||
}
|
||
}
|
||
/**
|
||
* 注册事件回调
|
||
* @param {Object} handlers 回调函数集合
|
||
* 示例：rtc.on({ onMessage: (data) => console.log(data) })
|
||
*/
|
||
on(handlers) {
|
||
Object.keys(handlers).forEach((key) => {
|
||
if (this.callbacks[key] && typeof handlers[key] === "function") {
|
||
this.callbacks[key] = handlers[key];
|
||
}
|
||
});
|
||
}
|
||
}
|
||
|
||
// 封装websocket
|
||
export class webSocket_ModuleSimple {
|
||
constructor(url, receiveMessageCallback = null) {
|
||
this.url = url;
|
||
this.socket = null;
|
||
this.heartbeatInterval = 30000; // 心跳间隔 30s
|
||
this.reconnectInterval = 10000; // 重连间隔 10s
|
||
this.maxReconnectAttempts = 5;
|
||
this.reconnectAttempts = 0;
|
||
this.heartbeatTimer = null;
|
||
this.stopWs = false;
|
||
this.receiveMessageCallback = receiveMessageCallback; // 接收消息回调函数
|
||
this.callbacks = {
|
||
onMessage: (data) => {}, // 收到自定义消息
|
||
};
|
||
}
|
||
connect() {
|
||
if (this.socket && this.socket.readyState === WebSocket.OPEN) return;
|
||
this.socket = new WebSocket(this.url);
|
||
this.socket.onopen = () => {
|
||
console.log("连接成功", this.url);
|
||
this.reconnectAttempts = 0;
|
||
this.startHeartbeat();
|
||
};
|
||
this.socket.onmessage = (event) => {
|
||
// console.log('收到消息:', event.data);
|
||
this.receiveMessage(event);
|
||
this.startHeartbeat(); // 收到消息重置心跳
|
||
};
|
||
this.socket.onclose = () => {
|
||
console.log("连接关闭", this.url);
|
||
if (!this.stopWs) this.handleReconnect();
|
||
};
|
||
this.socket.onerror = () => {
|
||
console.log("连接错误", this.url);
|
||
this.closeHeartbeat();
|
||
};
|
||
}
|
||
/**
|
||
* 同步暂停指定毫秒数（阻塞主线程） 延迟一段时间运行 await this.delay(100);
|
||
* @param {number} ms 暂停毫秒数
|
||
*/
|
||
delayAsync(ms) {
|
||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||
}
|
||
/**
|
||
* 同步暂停指定毫秒数（阻塞主线程）
|
||
* @param {number} ms 暂停毫秒数
|
||
*/
|
||
delaySync(ms) {
|
||
const start = Date.now();
|
||
// 循环等待，直到时间差达到指定毫秒数
|
||
while (Date.now() - start < ms) {
|
||
// 空循环，消耗时间
|
||
}
|
||
}
|
||
async send(message) {
|
||
if (this.socket?.readyState === WebSocket.OPEN) {
|
||
await this.delayAsync(500);
|
||
this.socket.send(JSON.stringify(message));
|
||
} else {
|
||
console.error("WebSocket 未连接");
|
||
}
|
||
}
|
||
startHeartbeat() {
|
||
this.closeHeartbeat();
|
||
this.heartbeatTimer = setInterval(() => {
|
||
if (this.socket?.readyState === WebSocket.OPEN) {
|
||
this.socket.send(JSON.stringify({ type: "heartBeat" }));
|
||
// console.log('发送心跳包');
|
||
}
|
||
}, this.heartbeatInterval);
|
||
}
|
||
closeHeartbeat() {
|
||
clearInterval(this.heartbeatTimer);
|
||
}
|
||
handleReconnect() {
|
||
if (this.reconnectAttempts < this.maxReconnectAttempts) {
|
||
setTimeout(() => {
|
||
console.log(`尝试重连 (${++this.reconnectAttempts})`);
|
||
this.connect();
|
||
}, this.reconnectInterval);
|
||
} else {
|
||
console.warn("达到最大重连次数，停止重连");
|
||
}
|
||
}
|
||
close() {
|
||
this.stopWs = true;
|
||
this.socket?.close();
|
||
this.closeHeartbeat();
|
||
}
|
||
/**
|
||
* 接收到消息
|
||
*/
|
||
receiveMessage(event) {
|
||
// 根据业务自行处理
|
||
// console.info('[webSocket_ModuleSimple]receiveMessage:', event.data)
|
||
this.receiveMessageCallback && this.receiveMessageCallback(event.data);
|
||
this.callbacks.onMessage(event.data);
|
||
}
|
||
/**
|
||
* 注册事件回调
|
||
* @param {Object} handlers 回调函数集合
|
||
* 示例：rtc.on({ onMessage: (data) => console.log(data) })
|
||
*/
|
||
on(handlers) {
|
||
Object.keys(handlers).forEach((key) => {
|
||
if (this.callbacks[key] && typeof handlers[key] === "function") {
|
||
this.callbacks[key] = handlers[key];
|
||
}
|
||
});
|
||
}
|
||
}
|
||
// ---------------------------------------------->
|
||
// 验证与使用
|
||
|
||
// const receiveMessage = (res) => {
|
||
// console.log('接收消息回调：', res)
|
||
// }
|
||
// const wsClient = new WebSocketClient('`ws://localhost:8000/ws/0/`', receiveMessage);
|
||
// wsClient.connect();
|
||
// 发送业务消息
|
||
// wsClient.send({ type: 'message', data: 'Hello Server' });
|