Fix LiveKit live streaming and remove old WebRTC code
- Add double-click guard in handleGoLive to prevent duplicate posts - Update LiveKit URLs to use stream.sociowire.com - Remove deprecated WebRTC broadcast/viewer components - Bump service worker cache to v11 Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Your Name
parent
a9ac9051c5
commit
197151d818
|
|
@ -1,5 +1,5 @@
|
|||
// public/service-worker.js
|
||||
const CACHE_NAME = 'sociowire-v9';
|
||||
const CACHE_NAME = 'sociowire-v11';
|
||||
const PRECACHE = [
|
||||
'/icons/icon-192x192.png',
|
||||
'/icons/icon-512x512.png',
|
||||
|
|
|
|||
|
|
@ -1,481 +0,0 @@
|
|||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import { useDualCamera } from "./useDualCamera";
|
||||
import { useWebRTCBroadcast } from "./useWebRTCBroadcast";
|
||||
import { useAuth } from "../../auth/AuthContext";
|
||||
import { CREATE_CATEGORY_MAP } from "../Map/mapConfig";
|
||||
import "./Live.css";
|
||||
|
||||
const MAIN_CATEGORIES = ["News", "Events", "Friends", "Market"];
|
||||
|
||||
/**
|
||||
* LiveBroadcastModal - Host UI for live streaming
|
||||
*
|
||||
* Features:
|
||||
* - Dual camera preview (main + self PiP)
|
||||
* - Go Live / End Stream controls
|
||||
* - Title input
|
||||
* - Viewer count
|
||||
* - Join request management
|
||||
* - Participant grid
|
||||
*/
|
||||
export default function LiveBroadcastModal({ coords, onClose, onStreamCreated }) {
|
||||
const { username, token } = useAuth();
|
||||
const userID = username || `anon_${Date.now()}`;
|
||||
|
||||
// Generate stream ID
|
||||
const [streamID] = useState(() => `live_${userID}_${Date.now()}`);
|
||||
|
||||
// Form state
|
||||
const [title, setTitle] = useState("");
|
||||
const [category, setCategory] = useState("News");
|
||||
const [subCategory, setSubCategory] = useState(CREATE_CATEGORY_MAP.News[0]);
|
||||
const [showEndConfirm, setShowEndConfirm] = useState(false);
|
||||
const [saveAsPost, setSaveAsPost] = useState(true);
|
||||
|
||||
// Video refs
|
||||
const mainVideoRef = useRef(null);
|
||||
const selfVideoRef = useRef(null);
|
||||
const participantRefs = useRef({});
|
||||
|
||||
// Hooks
|
||||
const {
|
||||
mainStream,
|
||||
selfStream,
|
||||
isSwapped,
|
||||
error: cameraError,
|
||||
isStarting: cameraStarting,
|
||||
isSwapping,
|
||||
hasDualCameras,
|
||||
startCameras,
|
||||
swapCameras,
|
||||
stopCameras,
|
||||
toggleAudio,
|
||||
} = useDualCamera();
|
||||
|
||||
const {
|
||||
isLive,
|
||||
isConnecting,
|
||||
error: broadcastError,
|
||||
viewerCount,
|
||||
participants,
|
||||
joinRequests,
|
||||
startBroadcast,
|
||||
stopBroadcast,
|
||||
setStreamMeta,
|
||||
approveJoinRequest,
|
||||
denyJoinRequest,
|
||||
kickParticipant,
|
||||
} = useWebRTCBroadcast({ streamID, userID, username, token });
|
||||
|
||||
const [audioMuted, setAudioMuted] = useState(false);
|
||||
|
||||
// Start cameras on mount
|
||||
useEffect(() => {
|
||||
startCameras();
|
||||
return () => {
|
||||
stopCameras();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Attach main stream to video element
|
||||
useEffect(() => {
|
||||
if (mainVideoRef.current && mainStream) {
|
||||
mainVideoRef.current.srcObject = mainStream;
|
||||
}
|
||||
}, [mainStream]);
|
||||
|
||||
// Attach self stream to PiP video element
|
||||
useEffect(() => {
|
||||
if (selfVideoRef.current && selfStream) {
|
||||
selfVideoRef.current.srcObject = selfStream;
|
||||
}
|
||||
}, [selfStream]);
|
||||
|
||||
// Attach participant streams
|
||||
useEffect(() => {
|
||||
participants.forEach((p) => {
|
||||
const ref = participantRefs.current[p.userID];
|
||||
if (ref && p.stream) {
|
||||
ref.srcObject = p.stream;
|
||||
}
|
||||
});
|
||||
}, [participants]);
|
||||
|
||||
const handleGoLive = useCallback(async () => {
|
||||
console.log("[LiveBroadcast] handleGoLive clicked, title:", title, "mainStream:", !!mainStream);
|
||||
|
||||
// Remote log for debugging
|
||||
fetch('/api/debug-log', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
level: 'log',
|
||||
msg: `[LiveBroadcast] handleGoLive: title="${title}" hasMainStream=${!!mainStream} hasSelfStream=${!!selfStream}`,
|
||||
ts: new Date().toISOString(),
|
||||
src: 'broadcast'
|
||||
})
|
||||
}).catch(() => {});
|
||||
|
||||
if (!title.trim()) {
|
||||
alert("Please enter a title for your live stream");
|
||||
return;
|
||||
}
|
||||
|
||||
const meta = {
|
||||
title: title.trim(),
|
||||
lat: coords?.[1],
|
||||
lon: coords?.[0],
|
||||
category: category === "Events" ? "EVENT" : category.toUpperCase(),
|
||||
sub_category: subCategory,
|
||||
};
|
||||
|
||||
// Store metadata for post creation when stream ends
|
||||
setStreamMeta(meta);
|
||||
|
||||
console.log("[LiveBroadcast] Calling startBroadcast with meta:", meta);
|
||||
await startBroadcast(mainStream, selfStream, meta);
|
||||
|
||||
if (onStreamCreated) {
|
||||
onStreamCreated({ streamID, title: title.trim(), coords, category, subCategory });
|
||||
}
|
||||
}, [title, category, subCategory, mainStream, selfStream, coords, startBroadcast, setStreamMeta, streamID, onStreamCreated]);
|
||||
|
||||
const handleEndStream = useCallback(() => {
|
||||
setShowEndConfirm(true);
|
||||
}, []);
|
||||
|
||||
const confirmEndStream = useCallback(async () => {
|
||||
await stopBroadcast(saveAsPost);
|
||||
stopCameras();
|
||||
onClose?.();
|
||||
}, [saveAsPost, stopBroadcast, stopCameras, onClose]);
|
||||
|
||||
const handleToggleAudio = useCallback(() => {
|
||||
const newMuted = !audioMuted;
|
||||
setAudioMuted(newMuted);
|
||||
toggleAudio(newMuted);
|
||||
}, [audioMuted, toggleAudio]);
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget && !isLive) {
|
||||
stopCameras();
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
const error = cameraError || broadcastError;
|
||||
|
||||
return (
|
||||
<div className="sw-broadcast-modal" onClick={handleBackdropClick}>
|
||||
<div className="sw-broadcast-container">
|
||||
{/* Header */}
|
||||
<div className="sw-broadcast-header">
|
||||
<div className="sw-broadcast-header-left">
|
||||
<i className="fa-solid fa-broadcast-tower" />
|
||||
<span>{isLive ? "LIVE" : "Go Live"}</span>
|
||||
{isLive && (
|
||||
<div className="sw-broadcast-live-badge">
|
||||
<span className="sw-broadcast-dot" />
|
||||
<span>{viewerCount} watching</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-close"
|
||||
onClick={() => {
|
||||
if (isLive) {
|
||||
handleEndStream();
|
||||
} else {
|
||||
stopCameras();
|
||||
onClose?.();
|
||||
}
|
||||
}}
|
||||
aria-label="Close"
|
||||
>
|
||||
<i className="fa-solid fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="sw-broadcast-content">
|
||||
{/* Video preview area */}
|
||||
<div className="sw-broadcast-video-area">
|
||||
{/* Main video (fullscreen) */}
|
||||
<div className="sw-broadcast-main-video">
|
||||
{mainStream ? (
|
||||
<>
|
||||
<video
|
||||
ref={mainVideoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className="sw-broadcast-video"
|
||||
/>
|
||||
{/* Camera label for debug */}
|
||||
<div className="sw-broadcast-camera-label">
|
||||
<i className="fa-solid fa-video" />
|
||||
<span>{isSwapped ? "Back" : "Front"} cam</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="sw-broadcast-video-placeholder">
|
||||
{cameraStarting ? (
|
||||
<>
|
||||
<i className="fa-solid fa-spinner fa-spin" />
|
||||
<span>Starting camera...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="fa-solid fa-video-slash" />
|
||||
<span>Camera not available</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Self PiP (draggable corner) - show if we have dual cameras */}
|
||||
{selfStream && (
|
||||
<div className="sw-broadcast-pip">
|
||||
<video
|
||||
ref={selfVideoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className="sw-broadcast-pip-video"
|
||||
/>
|
||||
<div className="sw-broadcast-pip-label">{isSwapped ? "Front" : "Back"}</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* No dual camera indicator */}
|
||||
{!selfStream && mainStream && !hasDualCameras && (
|
||||
<div className="sw-broadcast-no-pip">
|
||||
<i className="fa-solid fa-camera" />
|
||||
<span>Single camera</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Participant strip (when live with participants) */}
|
||||
{isLive && participants.length > 0 && (
|
||||
<div className="sw-broadcast-participants-strip">
|
||||
{participants.map((p) => (
|
||||
<div key={p.userID} className="sw-broadcast-participant">
|
||||
<video
|
||||
ref={(el) => {
|
||||
participantRefs.current[p.userID] = el;
|
||||
}}
|
||||
autoPlay
|
||||
playsInline
|
||||
className="sw-broadcast-participant-video"
|
||||
/>
|
||||
<div className="sw-broadcast-participant-name">{p.username}</div>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-kick-btn"
|
||||
onClick={() => kickParticipant(p.userID)}
|
||||
title="Remove"
|
||||
>
|
||||
<i className="fa-solid fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Camera controls overlay */}
|
||||
<div className="sw-broadcast-controls-overlay">
|
||||
<button
|
||||
type="button"
|
||||
className={`sw-broadcast-control-btn ${!hasDualCameras ? "is-disabled" : ""} ${isSwapping ? "is-swapping" : ""}`}
|
||||
onClick={hasDualCameras && !isSwapping ? swapCameras : undefined}
|
||||
title={hasDualCameras ? (isSwapping ? "Switching..." : "Swap cameras") : "Single camera only"}
|
||||
disabled={!hasDualCameras || isSwapping}
|
||||
>
|
||||
<i className={`fa-solid ${isSwapping ? "fa-spinner fa-spin" : "fa-camera-rotate"}`} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`sw-broadcast-control-btn ${audioMuted ? "is-muted" : ""}`}
|
||||
onClick={handleToggleAudio}
|
||||
title={audioMuted ? "Unmute" : "Mute"}
|
||||
>
|
||||
<i className={`fa-solid ${audioMuted ? "fa-microphone-slash" : "fa-microphone"}`} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Side panel */}
|
||||
<div className="sw-broadcast-side">
|
||||
{/* Title input (before going live) */}
|
||||
{!isLive && (
|
||||
<div className="sw-broadcast-form">
|
||||
<label className="sw-broadcast-label">Stream Title</label>
|
||||
<input
|
||||
type="text"
|
||||
className="sw-broadcast-input"
|
||||
placeholder="What's happening?"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
maxLength={100}
|
||||
/>
|
||||
|
||||
<div className="sw-broadcast-category-row">
|
||||
<div className="sw-broadcast-field">
|
||||
<label className="sw-broadcast-label">Category</label>
|
||||
<select
|
||||
className="sw-broadcast-select"
|
||||
value={category}
|
||||
onChange={(e) => {
|
||||
const cat = e.target.value;
|
||||
setCategory(cat);
|
||||
setSubCategory((CREATE_CATEGORY_MAP[cat] || CREATE_CATEGORY_MAP.News)[0]);
|
||||
}}
|
||||
>
|
||||
{MAIN_CATEGORIES.map((cat) => (
|
||||
<option key={cat} value={cat}>{cat}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="sw-broadcast-field">
|
||||
<label className="sw-broadcast-label">Sub-category</label>
|
||||
<select
|
||||
className="sw-broadcast-select"
|
||||
value={subCategory}
|
||||
onChange={(e) => setSubCategory(e.target.value)}
|
||||
>
|
||||
{(CREATE_CATEGORY_MAP[category] || CREATE_CATEGORY_MAP.News).map((sub) => (
|
||||
<option key={sub} value={sub}>{sub}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sw-broadcast-hint">
|
||||
Location: {coords ? `${coords[1].toFixed(4)}, ${coords[0].toFixed(4)}` : "Unknown"}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Live info */}
|
||||
{isLive && (
|
||||
<div className="sw-broadcast-live-info">
|
||||
<h3 className="sw-broadcast-title">{title}</h3>
|
||||
<div className="sw-broadcast-stats">
|
||||
<span><i className="fa-solid fa-eye" /> {viewerCount} viewers</span>
|
||||
<span><i className="fa-solid fa-users" /> {participants.length} participants</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Join requests (when live) */}
|
||||
{isLive && joinRequests.length > 0 && (
|
||||
<div className="sw-broadcast-requests">
|
||||
<h4>Join Requests</h4>
|
||||
{joinRequests.map((req) => (
|
||||
<div key={req.userID} className="sw-broadcast-request">
|
||||
<span className="sw-broadcast-request-name">{req.username}</span>
|
||||
<div className="sw-broadcast-request-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-request-btn approve"
|
||||
onClick={() => approveJoinRequest(req.userID)}
|
||||
>
|
||||
<i className="fa-solid fa-check" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-request-btn deny"
|
||||
onClick={() => denyJoinRequest(req.userID)}
|
||||
>
|
||||
<i className="fa-solid fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Error display */}
|
||||
{error && (
|
||||
<div className="sw-broadcast-error">
|
||||
<i className="fa-solid fa-exclamation-triangle" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="sw-broadcast-actions">
|
||||
{!isLive ? (
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn primary"
|
||||
onClick={handleGoLive}
|
||||
disabled={isConnecting || !mainStream}
|
||||
>
|
||||
{isConnecting ? (
|
||||
<>
|
||||
<i className="fa-solid fa-spinner fa-spin" />
|
||||
<span>Connecting...</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<i className="fa-solid fa-broadcast-tower" />
|
||||
<span>Go Live</span>
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
) : (
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn danger"
|
||||
onClick={handleEndStream}
|
||||
>
|
||||
<i className="fa-solid fa-stop" />
|
||||
<span>End Stream</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* End stream confirmation modal */}
|
||||
{showEndConfirm && (
|
||||
<div className="sw-broadcast-confirm-overlay">
|
||||
<div className="sw-broadcast-confirm">
|
||||
<h3>End Stream?</h3>
|
||||
<p>Your live stream will end for all viewers.</p>
|
||||
|
||||
<label className="sw-broadcast-checkbox">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={saveAsPost}
|
||||
onChange={(e) => setSaveAsPost(e.target.checked)}
|
||||
/>
|
||||
<span>Save as post on the map</span>
|
||||
</label>
|
||||
|
||||
<div className="sw-broadcast-confirm-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn secondary"
|
||||
onClick={() => setShowEndConfirm(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-broadcast-btn danger"
|
||||
onClick={confirmEndStream}
|
||||
>
|
||||
End Stream
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -7,7 +7,7 @@ import { CREATE_CATEGORY_MAP, FILTER_MAIN_CATEGORIES } from "../Map/mapConfig";
|
|||
import "./Live.css";
|
||||
|
||||
const API_BASE = (import.meta?.env?.VITE_API_BASE_URL || "").replace(/\/+$/, "");
|
||||
const LIVEKIT_API = "https://stream.us4.sociowire.com";
|
||||
const LIVEKIT_API = "https://stream.sociowire.com";
|
||||
|
||||
/**
|
||||
* LiveKit-based broadcast component
|
||||
|
|
@ -205,6 +205,10 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
}, [commentInput, livePostId, refreshComments]);
|
||||
|
||||
const handleGoLive = useCallback(async () => {
|
||||
// Prevent double-clicks and duplicate calls
|
||||
if (isConnecting || isLive || livePostId) {
|
||||
return;
|
||||
}
|
||||
if (!authToken) {
|
||||
alert("Please log in to start a live stream.");
|
||||
return;
|
||||
|
|
@ -279,6 +283,9 @@ export default function LiveKitBroadcast({ coords, onClose, onStreamCreated }) {
|
|||
username,
|
||||
liveCategory,
|
||||
liveSubCategory,
|
||||
isConnecting,
|
||||
isLive,
|
||||
livePostId,
|
||||
]);
|
||||
|
||||
const handleEndStream = useCallback(async (save) => {
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@ import { Room, RoomEvent } from "livekit-client";
|
|||
import { useAuth } from "../../auth/AuthContext";
|
||||
import "./Live.css";
|
||||
|
||||
const LIVEKIT_URL = "wss://live.us4.sociowire.com";
|
||||
const LIVEKIT_API = "https://stream.us4.sociowire.com";
|
||||
const LIVEKIT_URL = "wss://stream.sociowire.com";
|
||||
const LIVEKIT_API = "https://stream.sociowire.com";
|
||||
|
||||
function roomNameFromPost(post) {
|
||||
const raw = (post?.embed_url || post?.video_url || "").toString().trim();
|
||||
|
|
|
|||
|
|
@ -1,337 +0,0 @@
|
|||
import React, { useEffect, useRef, useState, useCallback } from "react";
|
||||
import maplibregl from "maplibre-gl";
|
||||
import { useWebRTCViewer } from "./useWebRTCViewer";
|
||||
import { useAuth } from "../../auth/AuthContext";
|
||||
import "./Live.css";
|
||||
|
||||
const MAPTILER_KEY = "DvwhzlPmC55ZK28nLtXL";
|
||||
|
||||
/**
|
||||
* LiveViewerModal - Viewer UI for watching live streams
|
||||
*
|
||||
* Features:
|
||||
* - Main video + presenter PiP
|
||||
* - Participant grid
|
||||
* - Request to join
|
||||
* - Viewer count
|
||||
* - Location mini-map
|
||||
* - Share
|
||||
*/
|
||||
export default function LiveViewerModal({ streamID, streamData, onClose }) {
|
||||
const { username, token, authenticated } = useAuth();
|
||||
const userID = username || `viewer_${Date.now()}`;
|
||||
|
||||
// Video refs
|
||||
const mainVideoRef = useRef(null);
|
||||
const presenterVideoRef = useRef(null);
|
||||
const localVideoRef = useRef(null);
|
||||
const participantRefs = useRef({});
|
||||
const mapContainerRef = useRef(null);
|
||||
const mapRef = useRef(null);
|
||||
|
||||
// Viewer hook
|
||||
const {
|
||||
isConnected,
|
||||
isConnecting,
|
||||
error,
|
||||
mainStream,
|
||||
presenterStream,
|
||||
participantStreams,
|
||||
streamInfo,
|
||||
viewerCount,
|
||||
joinRequestStatus,
|
||||
isParticipant,
|
||||
localStream,
|
||||
connect,
|
||||
disconnect,
|
||||
requestToJoin,
|
||||
cancelJoinRequest,
|
||||
leaveAsParticipant,
|
||||
} = useWebRTCViewer({ streamID, userID, username, token });
|
||||
|
||||
// Connect on mount
|
||||
useEffect(() => {
|
||||
connect();
|
||||
return () => {
|
||||
disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Attach main stream
|
||||
useEffect(() => {
|
||||
if (mainVideoRef.current && mainStream) {
|
||||
mainVideoRef.current.srcObject = mainStream;
|
||||
}
|
||||
}, [mainStream]);
|
||||
|
||||
// Attach presenter stream to PiP
|
||||
useEffect(() => {
|
||||
if (presenterVideoRef.current && presenterStream) {
|
||||
presenterVideoRef.current.srcObject = presenterStream;
|
||||
}
|
||||
}, [presenterStream]);
|
||||
|
||||
// Attach local stream when participating
|
||||
useEffect(() => {
|
||||
if (localVideoRef.current && localStream) {
|
||||
localVideoRef.current.srcObject = localStream;
|
||||
}
|
||||
}, [localStream]);
|
||||
|
||||
// Attach participant streams
|
||||
useEffect(() => {
|
||||
participantStreams.forEach((p) => {
|
||||
const ref = participantRefs.current[p.userID];
|
||||
if (ref && p.stream) {
|
||||
ref.srcObject = p.stream;
|
||||
}
|
||||
});
|
||||
}, [participantStreams]);
|
||||
|
||||
// Initialize mini map
|
||||
useEffect(() => {
|
||||
if (!mapContainerRef.current) return;
|
||||
if (mapRef.current) return;
|
||||
|
||||
const lat = streamData?.lat || streamInfo?.lat;
|
||||
const lng = streamData?.lon || streamInfo?.lon;
|
||||
|
||||
if (!lat || !lng) return;
|
||||
|
||||
const map = new maplibregl.Map({
|
||||
container: mapContainerRef.current,
|
||||
style: `https://api.maptiler.com/maps/streets-v2-dark/style.json?key=${MAPTILER_KEY}`,
|
||||
center: [lng, lat],
|
||||
zoom: 12,
|
||||
attributionControl: false,
|
||||
interactive: false,
|
||||
});
|
||||
|
||||
// Add marker
|
||||
const el = document.createElement("div");
|
||||
el.className = "sw-live-marker";
|
||||
el.innerHTML = `<i class="fa-solid fa-broadcast-tower"></i>`;
|
||||
|
||||
new maplibregl.Marker({ element: el }).setLngLat([lng, lat]).addTo(map);
|
||||
|
||||
mapRef.current = map;
|
||||
|
||||
return () => {
|
||||
map.remove();
|
||||
mapRef.current = null;
|
||||
};
|
||||
}, [streamData, streamInfo]);
|
||||
|
||||
const handleShare = useCallback(() => {
|
||||
const shareUrl = `${window.location.origin}/live/${streamID}`;
|
||||
if (navigator.share) {
|
||||
navigator.share({
|
||||
title: streamInfo?.title || "Live Stream",
|
||||
text: "Watch this live stream!",
|
||||
url: shareUrl,
|
||||
}).catch(() => {});
|
||||
} else if (navigator.clipboard) {
|
||||
navigator.clipboard.writeText(shareUrl);
|
||||
// Could show toast here
|
||||
}
|
||||
}, [streamID, streamInfo]);
|
||||
|
||||
const handleBackdropClick = (e) => {
|
||||
if (e.target === e.currentTarget) {
|
||||
disconnect();
|
||||
onClose?.();
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
disconnect();
|
||||
onClose?.();
|
||||
};
|
||||
|
||||
const info = streamInfo || streamData || {};
|
||||
|
||||
return (
|
||||
<div className="sw-viewer-modal" onClick={handleBackdropClick}>
|
||||
<div className="sw-viewer-container">
|
||||
{/* Header */}
|
||||
<div className="sw-viewer-header">
|
||||
<div className="sw-viewer-header-left">
|
||||
<div className="sw-viewer-live-badge">
|
||||
<span className="sw-viewer-dot" />
|
||||
<span>LIVE</span>
|
||||
</div>
|
||||
<span className="sw-viewer-title">{info.title || "Live Stream"}</span>
|
||||
</div>
|
||||
<div className="sw-viewer-header-right">
|
||||
<span className="sw-viewer-count">
|
||||
<i className="fa-solid fa-eye" /> {viewerCount}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-viewer-close"
|
||||
onClick={handleClose}
|
||||
aria-label="Close"
|
||||
>
|
||||
<i className="fa-solid fa-times" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="sw-viewer-content">
|
||||
{/* Video area */}
|
||||
<div className="sw-viewer-video-area">
|
||||
{/* Main video */}
|
||||
<div className="sw-viewer-main-video">
|
||||
{isConnecting ? (
|
||||
<div className="sw-viewer-video-placeholder">
|
||||
<i className="fa-solid fa-spinner fa-spin" />
|
||||
<span>Connecting...</span>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="sw-viewer-video-placeholder error">
|
||||
<i className="fa-solid fa-exclamation-triangle" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
) : mainStream ? (
|
||||
<video
|
||||
ref={mainVideoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
className="sw-viewer-video"
|
||||
/>
|
||||
) : (
|
||||
<div className="sw-viewer-video-placeholder">
|
||||
<i className="fa-solid fa-video" />
|
||||
<span>Waiting for stream...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Presenter PiP */}
|
||||
{presenterStream && (
|
||||
<div className="sw-viewer-pip">
|
||||
<video
|
||||
ref={presenterVideoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className="sw-viewer-pip-video"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Participant strip */}
|
||||
{participantStreams.length > 0 && (
|
||||
<div className="sw-viewer-participants-strip">
|
||||
{participantStreams.map((p) => (
|
||||
<div key={p.userID} className="sw-viewer-participant">
|
||||
<video
|
||||
ref={(el) => {
|
||||
participantRefs.current[p.userID] = el;
|
||||
}}
|
||||
autoPlay
|
||||
playsInline
|
||||
className="sw-viewer-participant-video"
|
||||
/>
|
||||
<div className="sw-viewer-participant-name">{p.username}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Self view when participating */}
|
||||
{isParticipant && localStream && (
|
||||
<div className="sw-viewer-self-pip">
|
||||
<video
|
||||
ref={localVideoRef}
|
||||
autoPlay
|
||||
playsInline
|
||||
muted
|
||||
className="sw-viewer-pip-video"
|
||||
/>
|
||||
<div className="sw-viewer-pip-label">You</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Side panel */}
|
||||
<div className="sw-viewer-side">
|
||||
{/* Stream info */}
|
||||
<div className="sw-viewer-info">
|
||||
<div className="sw-viewer-host">
|
||||
<i className="fa-solid fa-user" />
|
||||
<span>{info.broadcaster_name || "Host"}</span>
|
||||
</div>
|
||||
{info.title && <p className="sw-viewer-description">{info.title}</p>}
|
||||
</div>
|
||||
|
||||
{/* Mini map */}
|
||||
<div ref={mapContainerRef} className="sw-viewer-map" />
|
||||
|
||||
{/* Join section */}
|
||||
{authenticated && !isParticipant && (
|
||||
<div className="sw-viewer-join-section">
|
||||
{joinRequestStatus === null && (
|
||||
<button
|
||||
type="button"
|
||||
className="sw-viewer-btn primary"
|
||||
onClick={requestToJoin}
|
||||
>
|
||||
<i className="fa-solid fa-hand" />
|
||||
<span>Request to Join</span>
|
||||
</button>
|
||||
)}
|
||||
{joinRequestStatus === "pending" && (
|
||||
<div className="sw-viewer-join-pending">
|
||||
<i className="fa-solid fa-clock" />
|
||||
<span>Waiting for host approval...</span>
|
||||
<button
|
||||
type="button"
|
||||
className="sw-viewer-btn-small"
|
||||
onClick={cancelJoinRequest}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
{joinRequestStatus === "denied" && (
|
||||
<div className="sw-viewer-join-denied">
|
||||
<i className="fa-solid fa-times-circle" />
|
||||
<span>Join request denied</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Leave participant button */}
|
||||
{isParticipant && (
|
||||
<div className="sw-viewer-participant-controls">
|
||||
<button
|
||||
type="button"
|
||||
className="sw-viewer-btn danger"
|
||||
onClick={leaveAsParticipant}
|
||||
>
|
||||
<i className="fa-solid fa-sign-out-alt" />
|
||||
<span>Leave as Participant</span>
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Actions */}
|
||||
<div className="sw-viewer-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="sw-viewer-action-btn"
|
||||
onClick={handleShare}
|
||||
>
|
||||
<i className="fa-solid fa-share-nodes" />
|
||||
<span>Share</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,11 +1,7 @@
|
|||
export { default as CameraMiniMap } from "./CameraMiniMap";
|
||||
export { default as CameraCard } from "./CameraCard";
|
||||
export { default as VideoModal } from "./VideoModal";
|
||||
export { default as LiveBroadcastModal } from "./LiveBroadcastModal";
|
||||
export { default as LiveKitBroadcast } from "./LiveKitBroadcast";
|
||||
export { default as LiveKitViewerModal } from "./LiveKitViewerModal";
|
||||
export { default as LiveViewerModal } from "./LiveViewerModal";
|
||||
export { useDualCamera } from "./useDualCamera";
|
||||
export { useWebRTCBroadcast } from "./useWebRTCBroadcast";
|
||||
export { useWebRTCViewer } from "./useWebRTCViewer";
|
||||
export { useLiveKit } from "./useLiveKit";
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import {
|
|||
} from "livekit-client";
|
||||
|
||||
const LIVEKIT_URL = "wss://stream.sociowire.com";
|
||||
const LIVEKIT_API = "https://www.sociowire.com";
|
||||
const LIVEKIT_API = "https://stream.sociowire.com";
|
||||
|
||||
/**
|
||||
* Hook for LiveKit-based live streaming
|
||||
|
|
|
|||
|
|
@ -1,537 +0,0 @@
|
|||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
|
||||
const STREAM_SERVER = "https://stream.sociowire.com";
|
||||
const API_BASE = (import.meta?.env?.VITE_API_BASE_URL || "").replace(/\/+$/, "");
|
||||
|
||||
// Remote debug logger - temporary
|
||||
const remoteLog = async (level, ...args) => {
|
||||
const msg = args.map(a => typeof a === 'object' ? JSON.stringify(a) : String(a)).join(' ');
|
||||
console[level](...args);
|
||||
try {
|
||||
await fetch('/api/debug-log', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ level, msg, ts: new Date().toISOString(), src: 'broadcast' })
|
||||
}).catch(() => {});
|
||||
} catch {}
|
||||
};
|
||||
const ICE_SERVERS = [
|
||||
{ urls: "stun:stun.l.google.com:19302" },
|
||||
{
|
||||
urls: "turns:turn.us2.sociowire.com:443",
|
||||
username: "sociowire",
|
||||
credential: "sociowire123",
|
||||
},
|
||||
];
|
||||
|
||||
/**
|
||||
* Hook for WebRTC broadcasting with multi-participant support
|
||||
*/
|
||||
export function useWebRTCBroadcast({ streamID, userID, username, token }) {
|
||||
const [isLive, setIsLive] = useState(false);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [viewerCount, setViewerCount] = useState(0);
|
||||
const [participants, setParticipants] = useState([]); // Other participants
|
||||
const [joinRequests, setJoinRequests] = useState([]); // Pending join requests
|
||||
|
||||
const pcRef = useRef(null);
|
||||
const wsRef = useRef(null);
|
||||
const participantPCsRef = useRef(new Map()); // userID -> PeerConnection for each participant
|
||||
|
||||
// Connect to WebSocket for real-time events
|
||||
const connectEventSocket = useCallback(() => {
|
||||
if (!streamID) return;
|
||||
|
||||
const protocol = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
const wsUrl = `${protocol}://stream.sociowire.com/api/streams/${streamID}/events`;
|
||||
|
||||
try {
|
||||
const ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log("[Broadcast] Event socket connected");
|
||||
// Authenticate
|
||||
ws.send(JSON.stringify({ type: "auth", token, userID, role: "host" }));
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const msg = JSON.parse(event.data);
|
||||
handleEventMessage(msg);
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to parse event:", err);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log("[Broadcast] Event socket closed");
|
||||
};
|
||||
|
||||
ws.onerror = (err) => {
|
||||
console.error("[Broadcast] Event socket error:", err);
|
||||
};
|
||||
|
||||
wsRef.current = ws;
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to connect event socket:", err);
|
||||
}
|
||||
}, [streamID, token, userID]);
|
||||
|
||||
const handleEventMessage = useCallback((msg) => {
|
||||
switch (msg.type) {
|
||||
case "viewer_count":
|
||||
setViewerCount(msg.count || 0);
|
||||
break;
|
||||
|
||||
case "join_request":
|
||||
setJoinRequests((prev) => [
|
||||
...prev.filter((r) => r.userID !== msg.userID),
|
||||
{ userID: msg.userID, username: msg.username, requestedAt: Date.now() },
|
||||
]);
|
||||
break;
|
||||
|
||||
case "join_request_cancelled":
|
||||
setJoinRequests((prev) => prev.filter((r) => r.userID !== msg.userID));
|
||||
break;
|
||||
|
||||
case "participant_joined":
|
||||
// Another user joined as co-host, set up peer connection to receive their stream
|
||||
handleParticipantJoined(msg);
|
||||
break;
|
||||
|
||||
case "participant_left":
|
||||
handleParticipantLeft(msg.userID);
|
||||
break;
|
||||
|
||||
case "participant_offer":
|
||||
// Incoming offer from a participant
|
||||
handleParticipantOffer(msg);
|
||||
break;
|
||||
|
||||
case "participant_ice":
|
||||
// ICE candidate from participant
|
||||
handleParticipantICE(msg);
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log("[Broadcast] Unknown event:", msg.type);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleParticipantJoined = useCallback(async (msg) => {
|
||||
const { userID: participantID, username: participantName } = msg;
|
||||
|
||||
// Add to participants list
|
||||
setParticipants((prev) => [
|
||||
...prev.filter((p) => p.userID !== participantID),
|
||||
{ userID: participantID, username: participantName, stream: null },
|
||||
]);
|
||||
|
||||
// Remove from join requests
|
||||
setJoinRequests((prev) => prev.filter((r) => r.userID !== participantID));
|
||||
}, []);
|
||||
|
||||
const handleParticipantLeft = useCallback((participantID) => {
|
||||
setParticipants((prev) => prev.filter((p) => p.userID !== participantID));
|
||||
|
||||
// Close their peer connection
|
||||
const pc = participantPCsRef.current.get(participantID);
|
||||
if (pc) {
|
||||
pc.close();
|
||||
participantPCsRef.current.delete(participantID);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleParticipantOffer = useCallback(async (msg) => {
|
||||
const { userID: participantID, sdp } = msg;
|
||||
|
||||
try {
|
||||
const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
|
||||
|
||||
pc.ontrack = (event) => {
|
||||
// Received participant's video/audio
|
||||
setParticipants((prev) =>
|
||||
prev.map((p) =>
|
||||
p.userID === participantID ? { ...p, stream: event.streams[0] } : p
|
||||
)
|
||||
);
|
||||
};
|
||||
|
||||
pc.onicecandidate = (event) => {
|
||||
if (event.candidate && wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
JSON.stringify({
|
||||
type: "ice_candidate",
|
||||
targetUserID: participantID,
|
||||
candidate: event.candidate,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
await pc.setRemoteDescription({ type: "offer", sdp });
|
||||
const answer = await pc.createAnswer();
|
||||
await pc.setLocalDescription(answer);
|
||||
|
||||
participantPCsRef.current.set(participantID, pc);
|
||||
|
||||
// Send answer back via WebSocket
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
JSON.stringify({
|
||||
type: "participant_answer",
|
||||
targetUserID: participantID,
|
||||
sdp: answer.sdp,
|
||||
})
|
||||
);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to handle participant offer:", err);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleParticipantICE = useCallback((msg) => {
|
||||
const { userID: participantID, candidate } = msg;
|
||||
const pc = participantPCsRef.current.get(participantID);
|
||||
if (pc && candidate) {
|
||||
pc.addIceCandidate(new RTCIceCandidate(candidate)).catch((err) => {
|
||||
console.error("[Broadcast] Failed to add ICE candidate:", err);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Start broadcasting
|
||||
const startBroadcast = useCallback(
|
||||
async (mainStream, selfStream, metadata = {}) => {
|
||||
// Synchronous log first to ensure it fires
|
||||
console.log("[Broadcast] startBroadcast ENTRY:", {
|
||||
hasMainStream: !!mainStream,
|
||||
hasSelfStream: !!selfStream,
|
||||
isConnecting,
|
||||
isLive
|
||||
});
|
||||
|
||||
// Remote log (async but fire-and-forget)
|
||||
await remoteLog("log", "[Broadcast] startBroadcast called:", {
|
||||
hasMainStream: !!mainStream,
|
||||
hasSelfStream: !!selfStream,
|
||||
metadata,
|
||||
isConnecting,
|
||||
isLive
|
||||
});
|
||||
|
||||
if (isConnecting || isLive) {
|
||||
remoteLog("warn", "[Broadcast] startBroadcast early return:", { isConnecting, isLive });
|
||||
return;
|
||||
}
|
||||
setIsConnecting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Create stream on server first
|
||||
remoteLog("log", "[Broadcast] Creating stream on server:", STREAM_SERVER);
|
||||
const createRes = await fetch(`${STREAM_SERVER}/api/streams`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
id: streamID,
|
||||
type: "webrtc",
|
||||
title: metadata.title || "Live Stream",
|
||||
lat: metadata.lat,
|
||||
lon: metadata.lon,
|
||||
broadcaster_id: userID,
|
||||
broadcaster_name: username,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!createRes.ok) {
|
||||
const errData = await createRes.json().catch(() => ({}));
|
||||
remoteLog("error", "[Broadcast] Failed to create stream:", errData);
|
||||
throw new Error(errData.error || "Failed to create stream");
|
||||
}
|
||||
|
||||
remoteLog("log", "[Broadcast] Stream created on server, setting up WebRTC...");
|
||||
|
||||
// Create peer connection
|
||||
const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
|
||||
|
||||
// Add main stream tracks (video + audio)
|
||||
if (mainStream) {
|
||||
mainStream.getTracks().forEach((track) => {
|
||||
pc.addTrack(track, mainStream);
|
||||
});
|
||||
}
|
||||
|
||||
// Add self/presenter stream (video only, labeled)
|
||||
if (selfStream) {
|
||||
selfStream.getVideoTracks().forEach((track) => {
|
||||
const sender = pc.addTrack(track, selfStream);
|
||||
// The server will identify this as the presenter track by stream ID
|
||||
});
|
||||
}
|
||||
|
||||
// Handle ICE candidates
|
||||
pc.onicecandidate = (event) => {
|
||||
if (event.candidate && wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
JSON.stringify({
|
||||
type: "ice_candidate",
|
||||
candidate: event.candidate,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
pc.onconnectionstatechange = () => {
|
||||
console.log("[Broadcast] Connection state:", pc.connectionState);
|
||||
if (pc.connectionState === "failed" || pc.connectionState === "disconnected") {
|
||||
setError("Connection lost");
|
||||
setIsLive(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Create and send offer
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
|
||||
const res = await fetch(
|
||||
`${STREAM_SERVER}/api/webrtc/broadcast/${streamID}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
sdp: offer.sdp,
|
||||
userID,
|
||||
username,
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
remoteLog("error", "[Broadcast] WebRTC broadcast failed:", errData);
|
||||
throw new Error(errData.error || "Failed to start broadcast");
|
||||
}
|
||||
|
||||
const { sdp: answerSDP } = await res.json();
|
||||
await pc.setRemoteDescription({ type: "answer", sdp: answerSDP });
|
||||
|
||||
pcRef.current = pc;
|
||||
setIsLive(true);
|
||||
|
||||
// Connect event socket for real-time updates
|
||||
connectEventSocket();
|
||||
|
||||
remoteLog("log", "[Broadcast] Started successfully, isLive=true");
|
||||
} catch (err) {
|
||||
remoteLog("error", "[Broadcast] Failed to start:", err.message);
|
||||
setError(err.message || "Failed to start broadcast");
|
||||
} finally {
|
||||
setIsConnecting(false);
|
||||
}
|
||||
},
|
||||
[streamID, userID, username, token, isConnecting, isLive, connectEventSocket]
|
||||
);
|
||||
|
||||
// Store stream metadata for post creation
|
||||
const streamMetaRef = useRef(null);
|
||||
|
||||
const setStreamMeta = useCallback((meta) => {
|
||||
streamMetaRef.current = meta;
|
||||
}, []);
|
||||
|
||||
// Stop broadcasting
|
||||
const stopBroadcast = useCallback(async (saveAsPost = false) => {
|
||||
remoteLog("log", "[Broadcast] stopBroadcast called:", { saveAsPost, hasMeta: !!streamMetaRef.current });
|
||||
// Close peer connection
|
||||
if (pcRef.current) {
|
||||
pcRef.current.close();
|
||||
pcRef.current = null;
|
||||
}
|
||||
|
||||
// Close participant connections
|
||||
participantPCsRef.current.forEach((pc) => pc.close());
|
||||
participantPCsRef.current.clear();
|
||||
|
||||
// Close WebSocket
|
||||
if (wsRef.current) {
|
||||
wsRef.current.close();
|
||||
wsRef.current = null;
|
||||
}
|
||||
|
||||
// Stop recording and get video URL
|
||||
let videoURL = "";
|
||||
try {
|
||||
const stopRes = await fetch(`${STREAM_SERVER}/api/webrtc/stop/${streamID}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
});
|
||||
if (stopRes.ok) {
|
||||
const data = await stopRes.json();
|
||||
videoURL = data.video_url || "";
|
||||
remoteLog("log", "[Broadcast] Recording stopped, video URL:", videoURL);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to stop recording:", err);
|
||||
}
|
||||
|
||||
// If saveAsPost, create a post on the main backend
|
||||
if (saveAsPost && streamMetaRef.current) {
|
||||
const meta = streamMetaRef.current;
|
||||
try {
|
||||
remoteLog("log", "[Broadcast] Creating post with meta:", meta, "API_BASE:", API_BASE, "videoURL:", videoURL);
|
||||
const postData = {
|
||||
title: meta.title || "Live stream",
|
||||
snippet: `Live stream by ${username}`,
|
||||
category: meta.category || "NEWS",
|
||||
sub_category: meta.sub_category || "Local",
|
||||
lat: meta.lat,
|
||||
lon: meta.lon,
|
||||
author: username,
|
||||
source: "sociowire",
|
||||
visibility: "public",
|
||||
video_url: videoURL || undefined, // Include video URL if available
|
||||
};
|
||||
remoteLog("log", "[Broadcast] POST data:", postData);
|
||||
const res = await fetch(`${API_BASE}/api/post`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify(postData),
|
||||
});
|
||||
if (res.ok) {
|
||||
const post = await res.json();
|
||||
remoteLog("log", "[Broadcast] Created post from live:", post?.id || post);
|
||||
// Dispatch event so MapView can add the post to the map immediately
|
||||
window.dispatchEvent(new CustomEvent('live-post-created', { detail: post }));
|
||||
} else {
|
||||
const errText = await res.text();
|
||||
remoteLog("error", "[Broadcast] Failed to create post:", res.status, errText);
|
||||
}
|
||||
} catch (err) {
|
||||
remoteLog("error", "[Broadcast] Error creating post:", err.message);
|
||||
}
|
||||
}
|
||||
|
||||
setIsLive(false);
|
||||
setViewerCount(0);
|
||||
setParticipants([]);
|
||||
setJoinRequests([]);
|
||||
setError(null);
|
||||
streamMetaRef.current = null;
|
||||
|
||||
console.log("[Broadcast] Stopped");
|
||||
}, [streamID, token, username]);
|
||||
|
||||
// Approve join request
|
||||
const approveJoinRequest = useCallback(
|
||||
async (requestUserID) => {
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/approve/${requestUserID}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to approve join request");
|
||||
}
|
||||
|
||||
// Will receive participant_joined event via WebSocket
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to approve join:", err);
|
||||
setError(err.message);
|
||||
}
|
||||
},
|
||||
[streamID, token]
|
||||
);
|
||||
|
||||
// Deny join request
|
||||
const denyJoinRequest = useCallback(
|
||||
async (requestUserID) => {
|
||||
try {
|
||||
await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/deny/${requestUserID}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
setJoinRequests((prev) => prev.filter((r) => r.userID !== requestUserID));
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to deny join:", err);
|
||||
}
|
||||
},
|
||||
[streamID, token]
|
||||
);
|
||||
|
||||
// Kick participant
|
||||
const kickParticipant = useCallback(
|
||||
async (participantID) => {
|
||||
try {
|
||||
await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/kick/${participantID}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
handleParticipantLeft(participantID);
|
||||
} catch (err) {
|
||||
console.error("[Broadcast] Failed to kick participant:", err);
|
||||
}
|
||||
},
|
||||
[streamID, token, handleParticipantLeft]
|
||||
);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (isLive) {
|
||||
stopBroadcast(false);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
isLive,
|
||||
isConnecting,
|
||||
error,
|
||||
viewerCount,
|
||||
participants,
|
||||
joinRequests,
|
||||
startBroadcast,
|
||||
stopBroadcast,
|
||||
setStreamMeta,
|
||||
approveJoinRequest,
|
||||
denyJoinRequest,
|
||||
kickParticipant,
|
||||
};
|
||||
}
|
||||
|
||||
export default useWebRTCBroadcast;
|
||||
|
|
@ -1,426 +0,0 @@
|
|||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
|
||||
const STREAM_SERVER = "https://stream.sociowire.com";
|
||||
const ICE_SERVERS = [
|
||||
{ urls: "stun:stun.l.google.com:19302" },
|
||||
{ urls: "stun:stun1.l.google.com:19302" },
|
||||
];
|
||||
|
||||
/**
|
||||
* Hook for WebRTC viewing with join-as-participant capability
|
||||
*/
|
||||
export function useWebRTCViewer({ streamID, userID, username, token }) {
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
const [isConnecting, setIsConnecting] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
// Video streams received
|
||||
const [mainStream, setMainStream] = useState(null); // Host's main camera
|
||||
const [presenterStream, setPresenterStream] = useState(null); // Host's self-view
|
||||
const [participantStreams, setParticipantStreams] = useState([]); // Other participants
|
||||
|
||||
// Stream metadata
|
||||
const [streamInfo, setStreamInfo] = useState(null);
|
||||
const [viewerCount, setViewerCount] = useState(0);
|
||||
|
||||
// Join request state
|
||||
const [joinRequestStatus, setJoinRequestStatus] = useState(null); // null, 'pending', 'approved', 'denied'
|
||||
const [isParticipant, setIsParticipant] = useState(false);
|
||||
|
||||
const pcRef = useRef(null);
|
||||
const wsRef = useRef(null);
|
||||
const localStreamRef = useRef(null); // Our camera when we join as participant
|
||||
|
||||
// Connect to event WebSocket
|
||||
const connectEventSocket = useCallback(() => {
|
||||
if (!streamID) return;
|
||||
|
||||
const protocol = window.location.protocol === "https:" ? "wss" : "ws";
|
||||
const wsUrl = `${protocol}://stream.sociowire.com/api/streams/${streamID}/events`;
|
||||
|
||||
try {
|
||||
const ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.onopen = () => {
|
||||
console.log("[Viewer] Event socket connected");
|
||||
ws.send(JSON.stringify({ type: "auth", token, userID, role: "viewer" }));
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const msg = JSON.parse(event.data);
|
||||
handleEventMessage(msg);
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to parse event:", err);
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
console.log("[Viewer] Event socket closed");
|
||||
};
|
||||
|
||||
ws.onerror = (err) => {
|
||||
console.error("[Viewer] Event socket error:", err);
|
||||
};
|
||||
|
||||
wsRef.current = ws;
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to connect event socket:", err);
|
||||
}
|
||||
}, [streamID, token, userID]);
|
||||
|
||||
const handleEventMessage = useCallback((msg) => {
|
||||
switch (msg.type) {
|
||||
case "stream_info":
|
||||
setStreamInfo(msg.stream);
|
||||
break;
|
||||
|
||||
case "viewer_count":
|
||||
setViewerCount(msg.count || 0);
|
||||
break;
|
||||
|
||||
case "join_approved":
|
||||
setJoinRequestStatus("approved");
|
||||
// Now we can send our video
|
||||
startParticipating();
|
||||
break;
|
||||
|
||||
case "join_denied":
|
||||
setJoinRequestStatus("denied");
|
||||
break;
|
||||
|
||||
case "participant_joined":
|
||||
handleParticipantJoined(msg);
|
||||
break;
|
||||
|
||||
case "participant_left":
|
||||
handleParticipantLeft(msg.userID);
|
||||
break;
|
||||
|
||||
case "host_answer":
|
||||
// Host sent us an answer for our participant offer
|
||||
handleHostAnswer(msg);
|
||||
break;
|
||||
|
||||
case "host_ice":
|
||||
handleHostICE(msg);
|
||||
break;
|
||||
|
||||
case "stream_ended":
|
||||
setError("Stream has ended");
|
||||
disconnect();
|
||||
break;
|
||||
|
||||
case "kicked":
|
||||
setError("You have been removed from the stream");
|
||||
setIsParticipant(false);
|
||||
stopLocalStream();
|
||||
break;
|
||||
|
||||
default:
|
||||
console.log("[Viewer] Unknown event:", msg.type);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleParticipantJoined = useCallback((msg) => {
|
||||
const { userID: participantID, username: participantName } = msg;
|
||||
|
||||
setParticipantStreams((prev) => [
|
||||
...prev.filter((p) => p.userID !== participantID),
|
||||
{ userID: participantID, username: participantName, stream: null },
|
||||
]);
|
||||
}, []);
|
||||
|
||||
const handleParticipantLeft = useCallback((participantID) => {
|
||||
setParticipantStreams((prev) => prev.filter((p) => p.userID !== participantID));
|
||||
}, []);
|
||||
|
||||
const handleHostAnswer = useCallback(async (msg) => {
|
||||
const { sdp } = msg;
|
||||
if (pcRef.current && sdp) {
|
||||
try {
|
||||
await pcRef.current.setRemoteDescription({ type: "answer", sdp });
|
||||
setIsParticipant(true);
|
||||
console.log("[Viewer] Now participating with video");
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to set host answer:", err);
|
||||
}
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleHostICE = useCallback((msg) => {
|
||||
const { candidate } = msg;
|
||||
if (pcRef.current && candidate) {
|
||||
pcRef.current.addIceCandidate(new RTCIceCandidate(candidate)).catch((err) => {
|
||||
console.error("[Viewer] Failed to add host ICE candidate:", err);
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Connect as viewer (receive only)
|
||||
const connect = useCallback(async () => {
|
||||
if (isConnecting || isConnected) return;
|
||||
setIsConnecting(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
// Get stream info first
|
||||
const infoRes = await fetch(`${STREAM_SERVER}/api/streams/${streamID}`);
|
||||
if (!infoRes.ok) {
|
||||
throw new Error("Stream not found or has ended");
|
||||
}
|
||||
const info = await infoRes.json();
|
||||
setStreamInfo(info);
|
||||
|
||||
// Create peer connection
|
||||
const pc = new RTCPeerConnection({ iceServers: ICE_SERVERS });
|
||||
|
||||
// We need to add transceivers to receive video/audio
|
||||
pc.addTransceiver("video", { direction: "recvonly" });
|
||||
pc.addTransceiver("video", { direction: "recvonly" }); // For presenter track
|
||||
pc.addTransceiver("audio", { direction: "recvonly" });
|
||||
|
||||
pc.ontrack = (event) => {
|
||||
const track = event.track;
|
||||
const stream = event.streams[0];
|
||||
|
||||
console.log("[Viewer] Received track:", track.kind, stream?.id);
|
||||
|
||||
// Determine which stream this is based on stream ID or order
|
||||
// First video stream is main, second is presenter
|
||||
if (track.kind === "video") {
|
||||
setMainStream((prev) => {
|
||||
if (!prev) return stream;
|
||||
setPresenterStream(stream);
|
||||
return prev;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
pc.onicecandidate = (event) => {
|
||||
if (event.candidate && wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
JSON.stringify({
|
||||
type: "ice_candidate",
|
||||
candidate: event.candidate,
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
pc.onconnectionstatechange = () => {
|
||||
console.log("[Viewer] Connection state:", pc.connectionState);
|
||||
if (pc.connectionState === "failed" || pc.connectionState === "disconnected") {
|
||||
setError("Connection lost");
|
||||
setIsConnected(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Create offer
|
||||
const offer = await pc.createOffer();
|
||||
await pc.setLocalDescription(offer);
|
||||
|
||||
// Send to server
|
||||
const res = await fetch(`${STREAM_SERVER}/api/webrtc/watch/${streamID}`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({
|
||||
sdp: offer.sdp,
|
||||
userID,
|
||||
username,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const errData = await res.json().catch(() => ({}));
|
||||
throw new Error(errData.error || "Failed to connect to stream");
|
||||
}
|
||||
|
||||
const { sdp: answerSDP } = await res.json();
|
||||
await pc.setRemoteDescription({ type: "answer", sdp: answerSDP });
|
||||
|
||||
pcRef.current = pc;
|
||||
setIsConnected(true);
|
||||
|
||||
// Connect event socket
|
||||
connectEventSocket();
|
||||
|
||||
console.log("[Viewer] Connected successfully");
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to connect:", err);
|
||||
setError(err.message || "Failed to connect");
|
||||
} finally {
|
||||
setIsConnecting(false);
|
||||
}
|
||||
}, [streamID, userID, username, token, isConnecting, isConnected, connectEventSocket]);
|
||||
|
||||
// Disconnect
|
||||
const disconnect = useCallback(() => {
|
||||
if (pcRef.current) {
|
||||
pcRef.current.close();
|
||||
pcRef.current = null;
|
||||
}
|
||||
|
||||
if (wsRef.current) {
|
||||
wsRef.current.close();
|
||||
wsRef.current = null;
|
||||
}
|
||||
|
||||
stopLocalStream();
|
||||
|
||||
setIsConnected(false);
|
||||
setMainStream(null);
|
||||
setPresenterStream(null);
|
||||
setParticipantStreams([]);
|
||||
setIsParticipant(false);
|
||||
setJoinRequestStatus(null);
|
||||
|
||||
console.log("[Viewer] Disconnected");
|
||||
}, []);
|
||||
|
||||
// Request to join as participant
|
||||
const requestToJoin = useCallback(async () => {
|
||||
if (joinRequestStatus === "pending") return;
|
||||
|
||||
try {
|
||||
const res = await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/join-request`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({ userID, username }),
|
||||
}
|
||||
);
|
||||
|
||||
if (!res.ok) {
|
||||
throw new Error("Failed to send join request");
|
||||
}
|
||||
|
||||
setJoinRequestStatus("pending");
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to request join:", err);
|
||||
setError(err.message);
|
||||
}
|
||||
}, [streamID, userID, username, token, joinRequestStatus]);
|
||||
|
||||
// Cancel join request
|
||||
const cancelJoinRequest = useCallback(async () => {
|
||||
try {
|
||||
await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/join-request/${userID}`,
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
}
|
||||
);
|
||||
setJoinRequestStatus(null);
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to cancel join request:", err);
|
||||
}
|
||||
}, [streamID, userID, token]);
|
||||
|
||||
// Start participating (send our video after approval)
|
||||
const startParticipating = useCallback(async () => {
|
||||
try {
|
||||
// Get our camera
|
||||
const localStream = await navigator.mediaDevices.getUserMedia({
|
||||
video: { facingMode: "user", width: 640, height: 480 },
|
||||
audio: true,
|
||||
});
|
||||
localStreamRef.current = localStream;
|
||||
|
||||
// Create new peer connection for sending our stream
|
||||
// (or reuse existing one with renegotiation)
|
||||
if (pcRef.current) {
|
||||
// Add our tracks
|
||||
localStream.getTracks().forEach((track) => {
|
||||
pcRef.current.addTrack(track, localStream);
|
||||
});
|
||||
|
||||
// Renegotiate
|
||||
const offer = await pcRef.current.createOffer();
|
||||
await pcRef.current.setLocalDescription(offer);
|
||||
|
||||
// Send offer to host via WebSocket
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(
|
||||
JSON.stringify({
|
||||
type: "participant_offer",
|
||||
sdp: offer.sdp,
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to start participating:", err);
|
||||
setError("Failed to access camera");
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Stop local stream
|
||||
const stopLocalStream = useCallback(() => {
|
||||
if (localStreamRef.current) {
|
||||
localStreamRef.current.getTracks().forEach((track) => track.stop());
|
||||
localStreamRef.current = null;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Leave as participant (become viewer again)
|
||||
const leaveAsParticipant = useCallback(async () => {
|
||||
stopLocalStream();
|
||||
setIsParticipant(false);
|
||||
|
||||
// Notify server
|
||||
try {
|
||||
await fetch(
|
||||
`${STREAM_SERVER}/api/streams/${streamID}/leave`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
},
|
||||
body: JSON.stringify({ userID }),
|
||||
}
|
||||
);
|
||||
} catch (err) {
|
||||
console.error("[Viewer] Failed to notify leave:", err);
|
||||
}
|
||||
}, [streamID, userID, token, stopLocalStream]);
|
||||
|
||||
// Cleanup on unmount
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
isConnected,
|
||||
isConnecting,
|
||||
error,
|
||||
mainStream,
|
||||
presenterStream,
|
||||
participantStreams,
|
||||
streamInfo,
|
||||
viewerCount,
|
||||
joinRequestStatus,
|
||||
isParticipant,
|
||||
localStream: localStreamRef.current,
|
||||
connect,
|
||||
disconnect,
|
||||
requestToJoin,
|
||||
cancelJoinRequest,
|
||||
leaveAsParticipant,
|
||||
};
|
||||
}
|
||||
|
||||
export default useWebRTCViewer;
|
||||
Loading…
Reference in New Issue