From 5bf11281966ea6dc146420134f5662461d404040 Mon Sep 17 00:00:00 2001
From: ghassan <ghassan@innovator.bh>
Date: Wed, 21 Oct 2026 12:41:56 +0300
Subject: [PATCH] =?UTF-8?q?feat(live):=20polish=20=E2=80=94=20ended-state,?=
 =?UTF-8?q?=20chat,=20viewer=20actions,=20Private=20option?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Restores the live streaming controllers / views / model from the
pre-audit WIP that got stashed on 2026-10-21, then applies the Phase 6
polish items:

## /live/new form
Add a Private visibility option that mirrors the upload modal's
wording — "Only you can see this stream. Perfect for testing without
an audience." Validator in LiveStreamController@store now permits
public|unlisted|private (was public|unlisted).

## Watch page ended-state
When the stream status is "ended", the overlay is a solid "Stream
ended" card showing the stream's duration (started_at → ended_at)
and, when a recording was published, a Watch Replay CTA linking to
the saved video. Previously an ended stream showed the generic
"Waiting for the broadcast to start" placeholder forever.

## Channel name link
The uploader's name in the meta row is now a real <a href> to the
channel page.

## Viewer action row
Subscribe + Share buttons below the player, visible to anyone except
the owner. Subscribe for guests uses the Phase 7 ?intended= pattern
so after sign-in they land back on the stream.

## Live chat (DB-backed polling)
New live_chat_messages table (migration 2026_10_21_000003). Viewers
GET /live/{stream}/chat?since=N every 3 seconds; signed-in users POST
to the same path (rate-limited at 60/min). Guests see the panel in
read-only mode with a "Sign in to chat" placeholder.

Private streams reject chat for anyone but the owner (404). Non-live
status rejects chat sends (422). Author name is snapshotted at post
time so a renamed account's old messages keep the name they used.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/Http/Controllers/LiveAuthController.php   | 208 ++++++++
 app/Http/Controllers/LiveStreamController.php | 292 ++++++++++
 app/Models/LiveChatMessage.php                |  34 ++
 app/Models/LiveStream.php                     | 253 +++++++++
 config/live.php                               |  55 ++
 ..._08_18_000000_create_livestreams_table.php |  71 +++
 ...000003_create_live_chat_messages_table.php |  37 ++
 resources/views/live/broadcast.blade.php      | 446 ++++++++++++++++
 resources/views/live/create.blade.php         |  89 ++++
 resources/views/live/index.blade.php          |  95 ++++
 resources/views/live/watch.blade.php          | 499 ++++++++++++++++++
 routes/web.php                                |  24 +
 12 files changed, 2103 insertions(+)
 create mode 100644 app/Http/Controllers/LiveAuthController.php
 create mode 100644 app/Http/Controllers/LiveStreamController.php
 create mode 100644 app/Models/LiveChatMessage.php
 create mode 100644 app/Models/LiveStream.php
 create mode 100644 config/live.php
 create mode 100644 database/migrations/2026_08_18_000000_create_livestreams_table.php
 create mode 100644 database/migrations/2026_10_21_000003_create_live_chat_messages_table.php
 create mode 100644 resources/views/live/broadcast.blade.php
 create mode 100644 resources/views/live/create.blade.php
 create mode 100644 resources/views/live/index.blade.php
 create mode 100644 resources/views/live/watch.blade.php

diff --git a/app/Http/Controllers/LiveAuthController.php b/app/Http/Controllers/LiveAuthController.php
new file mode 100644
index 0000000..b34be11
--- /dev/null
+++ b/app/Http/Controllers/LiveAuthController.php
@@ -0,0 +1,208 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\LiveStream;
+use Illuminate\Http\Request;
+use Illuminate\Http\Response;
+use Illuminate\Support\Facades\DB;
+use Illuminate\Support\Facades\Log;
+
+/**
+ * The media server's authorisation hook.
+ *
+ * MediaMTX holds no policy of its own: before it accepts a publisher or serves
+ * a viewer it POSTs here, and a non-2xx answer refuses the connection. That
+ * keeps every "who may do what" decision inside the application, next to the
+ * users table, rather than duplicated in a media server config.
+ *
+ * Deny by default, in the strongest sense: if this app is down, the media
+ * server can authorise nothing at all.
+ *
+ * These endpoints are called ONLY by MediaMTX over loopback. They are not part
+ * of the public API and reject anything arriving from elsewhere.
+ */
+class LiveAuthController extends Controller
+{
+    /** Loopback addresses the media server may call from. */
+    private const LOCAL_IPS = ['127.0.0.1', '::1'];
+
+    /**
+     * Decide a publish or read attempt.
+     *
+     * Payload from MediaMTX: user, password, token, ip, action, path,
+     * protocol, id, query.
+     */
+    public function authenticate(Request $request): Response
+    {
+        if (! $this->fromMediaServer($request)) {
+            return response('', 403);
+        }
+
+        $action = (string) $request->input('action');
+
+        // Control-plane actions carry no stream path, so they are settled
+        // before any attempt to resolve one.
+        if (in_array($action, ['api', 'metrics', 'pprof'], true)) {
+            return $this->authorizeApi();
+        }
+
+        $path = (string) $request->input('path');
+
+        $stream = $this->resolveStream($path);
+
+        if (! $stream) {
+            // An unknown path is not an error worth explaining — a publisher
+            // probing for valid stream ids learns nothing from this.
+            return response('', 403);
+        }
+
+        return match ($action) {
+            'publish' => $this->authorizePublish($request, $stream),
+            'read' => $this->authorizeRead($stream),
+            default => response('', 403),
+        };
+    }
+
+    /**
+     * The media server's own control API.
+     *
+     * It authenticates against this same hook, so without an explicit allow the
+     * app could not read live state from the server it runs alongside. Safe
+     * because it is already loopback-gated above — nothing off this host can
+     * reach it.
+     */
+    private function authorizeApi(): Response
+    {
+        return response('', 200);
+    }
+
+    /**
+     * A publisher must present the short-lived token minted for this stream
+     * when its owner pressed "Go live". The token is single-use: it is burned
+     * here, so a captured one cannot start a second broadcast.
+     */
+    private function authorizePublish(Request $request, LiveStream $stream): Response
+    {
+        // MediaMTX passes HTTP Basic credentials through as user/password.
+        $presented = (string) ($request->input('password') ?: $request->input('token'));
+
+        if (! $stream->publishTokenMatches($presented)) {
+            Log::warning('Live publish refused', [
+                'stream' => $stream->public_id,
+                'ip' => $request->input('ip'),
+            ]);
+
+            return response('', 403);
+        }
+
+        $stream->consumePublishToken();
+        $stream->markLive();
+
+        Log::info('Live publish authorised', [
+            'stream' => $stream->public_id,
+            'user_id' => $stream->user_id,
+        ]);
+
+        return response('', 200);
+    }
+
+    /**
+     * Reads are anonymous by design — a viewer fetching HLS parts carries no
+     * credentials — so the gate is the stream's own state: it must be live and
+     * not private. The unpredictable path is what keeps an unlisted stream
+     * unlisted.
+     */
+    private function authorizeRead(LiveStream $stream): Response
+    {
+        if (! $stream->isLive()) {
+            return response('', 403);
+        }
+
+        if (! in_array($stream->visibility, ['public', 'unlisted'], true)) {
+            return response('', 403);
+        }
+
+        return response('', 200);
+    }
+
+    /**
+     * Lifecycle notifications from the media server.
+     *
+     * The auth hook only fires on the way in, so without this a stream whose
+     * phone lost signal would read as live forever.
+     */
+    public function hook(Request $request): Response
+    {
+        if (! $this->fromMediaServer($request)) {
+            return response('', 403);
+        }
+
+        $stream = $this->resolveStream((string) $request->input('path'));
+
+        if (! $stream) {
+            return response('', 204);
+        }
+
+        match ((string) $request->input('event')) {
+            'publish' => $stream->markLive(),
+            // Only a stream that is actually live can end. A late hook from a
+            // previous, failed session must not kill the one just started.
+            'unpublish' => $stream->isLive() ? $stream->markEnded() : null,
+            'read' => $this->viewerJoined($stream),
+            'unread' => $this->viewerLeft($stream),
+            default => null,
+        };
+
+        return response('', 204);
+    }
+
+    /* ---------------- Viewer accounting ---------------- */
+
+    /*
+     * Counted with atomic SQL increments rather than read-modify-write: viewers
+     * arrive concurrently, and two joins landing together would otherwise
+     * record one.
+     */
+
+    private function viewerJoined(LiveStream $stream): void
+    {
+        LiveStream::where('id', $stream->id)->increment('current_viewers');
+
+        // peak_viewers is a high-water mark, so it only ever moves up.
+        LiveStream::where('id', $stream->id)
+            ->whereColumn('current_viewers', '>', 'peak_viewers')
+            ->update(['peak_viewers' => DB::raw('current_viewers')]);
+    }
+
+    private function viewerLeft(LiveStream $stream): void
+    {
+        // Floor at zero: a missed join (a restart, a dropped hook) must not
+        // drive the count negative and show "-1 watching".
+        LiveStream::where('id', $stream->id)
+            ->where('current_viewers', '>', 0)
+            ->decrement('current_viewers');
+    }
+
+    /* ---------------- Helpers ---------------- */
+
+    /**
+     * Only the media server on this host may ask. Deliberately checks the raw
+     * connection address rather than a forwarded header — a header can be
+     * spoofed by anyone who can reach the app.
+     */
+    private function fromMediaServer(Request $request): bool
+    {
+        return in_array($request->server('REMOTE_ADDR'), self::LOCAL_IPS, true);
+    }
+
+    /** Turn "live/<public_id>" into the stream it names. */
+    private function resolveStream(string $path): ?LiveStream
+    {
+        if (! preg_match('#^live/([A-Za-z0-9]{32})$#', $path, $m)) {
+            return null;
+        }
+
+        return LiveStream::where('public_id', $m[1])->first();
+    }
+}
diff --git a/app/Http/Controllers/LiveStreamController.php b/app/Http/Controllers/LiveStreamController.php
new file mode 100644
index 0000000..6e2e8e5
--- /dev/null
+++ b/app/Http/Controllers/LiveStreamController.php
@@ -0,0 +1,292 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\LiveChatMessage;
+use App\Models\LiveStream;
+use Illuminate\Http\JsonResponse;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Validation\Rule;
+
+/**
+ * Live streaming — broadcaster and viewer surfaces.
+ *
+ * The media plane (MediaMTX) is deliberately dumb: this controller decides who
+ * may broadcast, mints the short-lived credential the browser publishes with,
+ * and hands out the URLs. See LiveAuthController for the hook the media server
+ * calls back on.
+ */
+class LiveStreamController extends Controller
+{
+    public function __construct()
+    {
+        // Watching is open; everything that creates or controls a stream needs
+        // an account.
+        $this->middleware('auth')->except(['index', 'watch', 'status', 'chatPoll']);
+    }
+
+    /** Live now, plus the viewer's own streams when signed in. */
+    public function index(): \Illuminate\View\View
+    {
+        $live = LiveStream::live()
+            ->listed()
+            ->with('user')
+            ->latest('started_at')
+            ->limit(60)
+            ->get();
+
+        $mine = Auth::check()
+            ? LiveStream::where('user_id', Auth::id())->latest()->limit(20)->get()
+            : collect();
+
+        return view('live.index', compact('live', 'mine'));
+    }
+
+    /** The "start a broadcast" form. */
+    public function create(): \Illuminate\View\View
+    {
+        return view('live.create');
+    }
+
+    /**
+     * Create the stream record. This does NOT start anything — it reserves an
+     * identity and a path; the browser goes live from the broadcast page.
+     */
+    public function store(Request $request): \Illuminate\Http\RedirectResponse
+    {
+        $data = $request->validate([
+            'title' => ['required', 'string', 'max:120'],
+            'description' => ['nullable', 'string', 'max:2000'],
+            'visibility' => ['required', Rule::in(['public', 'unlisted', 'private'])],
+        ]);
+
+        // One live broadcast per account at a time. Without this a single user
+        // can pin open as many encoder slots as they can open tabs.
+        $alreadyLive = LiveStream::where('user_id', Auth::id())
+            ->where('status', LiveStream::STATUS_LIVE)
+            ->exists();
+
+        if ($alreadyLive) {
+            return back()
+                ->withInput()
+                ->withErrors(['title' => 'You already have a stream running. End it before starting another.']);
+        }
+
+        $stream = LiveStream::create([
+            'user_id' => Auth::id(),
+            'title' => $data['title'],
+            'description' => $data['description'] ?? null,
+            'visibility' => $data['visibility'],
+            'status' => LiveStream::STATUS_IDLE,
+        ]);
+
+        return redirect()->route('live.broadcast', $stream);
+    }
+
+    /** The broadcaster's camera page. Owner only. */
+    public function broadcast(LiveStream $stream): \Illuminate\View\View
+    {
+        abort_unless($stream->isOwnedBy(Auth::user()), 403);
+
+        // An ended stream is not a dead one — the owner may go live on it
+        // again from the same link.
+        $stream->reArm();
+
+        return view('live.broadcast', [
+            'stream' => $stream,
+            'whipUrl' => $this->whipUrl($stream),
+            'watchUrl' => route('live.watch', $stream),
+            'iceServers' => $this->iceServers(),
+        ]);
+    }
+
+    /**
+     * Mint the publish credential.
+     *
+     * Separate from the page load so the token's short life starts when the
+     * user actually presses "Go live", not when they opened the tab and went
+     * to find a tripod.
+     */
+    public function token(LiveStream $stream): JsonResponse
+    {
+        abort_unless($stream->isOwnedBy(Auth::user()), 403);
+
+        // Pressing "Go live" on a stream that previously ended restarts it
+        // rather than being refused. A failed attempt must never burn the link.
+        $stream->reArm();
+
+        return response()->json([
+            'token' => $stream->issuePublishToken(),
+            'expires_in' => LiveStream::PUBLISH_TOKEN_TTL_SECONDS,
+            'whip_url' => $this->whipUrl($stream),
+            'ice_servers' => $this->iceServers(),
+        ]);
+    }
+
+    /** The viewer page. */
+    public function watch(LiveStream $stream): \Illuminate\View\View
+    {
+        abort_unless($stream->isWatchableBy(Auth::user()), 404);
+
+        $stream->loadMissing('user');
+
+        return view('live.watch', [
+            'stream' => $stream,
+            'whepUrl' => $this->whepUrl($stream),
+            'hlsUrl' => $this->hlsUrl($stream),
+            'isOwner' => $stream->isOwnedBy(Auth::user()),
+            'iceServers' => $this->iceServers(),
+        ]);
+    }
+
+    /** Lightweight poll for the viewer page: is it live, how many watching. */
+    public function status(LiveStream $stream): JsonResponse
+    {
+        abort_unless($stream->isWatchableBy(Auth::user()), 404);
+
+        return response()->json([
+            'status' => $stream->status,
+            'live' => $stream->isLive(),
+            'viewers' => $stream->current_viewers,
+            'duration' => $stream->formatted_duration,
+        ]);
+    }
+
+    /** End the broadcast. Owner only. */
+    public function stop(LiveStream $stream): JsonResponse
+    {
+        abort_unless($stream->isOwnedBy(Auth::user()), 403);
+
+        $stream->markEnded();
+
+        return response()->json([
+            'success' => true,
+            'status' => $stream->status,
+            'duration' => $stream->formatted_duration,
+        ]);
+    }
+
+    /* ---------------- URLs ---------------- */
+
+    /*
+     * These are same-origin paths, proxied by nginx to the media server on
+     * loopback. Same-origin matters: the page is served over HTTPS, and a
+     * mixed-content or cross-origin media URL would be blocked by the browser
+     * before WebRTC ever started.
+     */
+
+    private function whipUrl(LiveStream $stream): string
+    {
+        return url('/live-rtc/'.$stream->mediaPath().'/whip');
+    }
+
+    private function whepUrl(LiveStream $stream): string
+    {
+        return url('/live-rtc/'.$stream->mediaPath().'/whep');
+    }
+
+    private function hlsUrl(LiveStream $stream): string
+    {
+        return url('/live-hls/'.$stream->mediaPath().'/index.m3u8');
+    }
+
+    /**
+     * ICE servers for the browser.
+     *
+     * No inbound UDP port is forwarded to this server, so a broadcaster outside
+     * the local network can only reach it through a TURN relay. On the LAN the
+     * host candidates work directly and TURN is never used.
+     *
+     * Configured through the environment so credentials never sit in the repo.
+     */
+    private function iceServers(): array
+    {
+        $servers = [];
+
+        if ($stun = config('live.stun_url')) {
+            $servers[] = ['urls' => $stun];
+        }
+
+        if ($turn = config('live.turn_url')) {
+            $servers[] = array_filter([
+                'urls' => $turn,
+                'username' => config('live.turn_username'),
+                'credential' => config('live.turn_credential'),
+            ]);
+        }
+
+        return $servers;
+    }
+
+    /**
+     * GET poll: viewer asks for every message in this stream newer than
+     * ?since=<id> (defaults to 0 for a cold open). Returns up to 50
+     * messages — more than enough for a 3-second polling window, bounded
+     * to protect the DB when a client is slow to reconnect.
+     */
+    public function chatPoll(Request $request, LiveStream $stream): JsonResponse
+    {
+        // Private streams are owner-only; everything else is open to viewers.
+        if ($stream->visibility === 'private' && Auth::id() !== $stream->user_id) {
+            abort(404);
+        }
+
+        $since = (int) $request->query('since', 0);
+        $rows  = LiveChatMessage::where('livestream_id', $stream->id)
+            ->where('id', '>', $since)
+            ->orderBy('id')
+            ->limit(50)
+            ->get(['id', 'user_id', 'author_name', 'body', 'created_at']);
+
+        return response()->json([
+            'messages' => $rows->map(fn ($m) => [
+                'id'   => $m->id,
+                'uid'  => $m->user_id,
+                'name' => $m->author_name,
+                'body' => $m->body,
+                'at'   => $m->created_at?->toISOString(),
+            ])->all(),
+        ]);
+    }
+
+    /**
+     * POST a chat message. Rate-limited to roughly one message per second
+     * per user via Laravel's built-in throttle, applied via the route.
+     * Body is capped at 400 chars (long enough for a sentence, short enough
+     * that the panel doesn't shear into a wall of text).
+     */
+    public function chatSend(Request $request, LiveStream $stream): JsonResponse
+    {
+        if ($stream->status !== LiveStream::STATUS_LIVE) {
+            return response()->json(['error' => 'Chat is closed when the stream isn\'t live.'], 422);
+        }
+        if ($stream->visibility === 'private' && Auth::id() !== $stream->user_id) {
+            abort(404);
+        }
+
+        $data = $request->validate([
+            'body' => ['required', 'string', 'max:400'],
+        ]);
+
+        $user = Auth::user();
+        $msg  = LiveChatMessage::create([
+            'livestream_id' => $stream->id,
+            'user_id'       => $user->id,
+            'author_name'   => $user->name,
+            'body'          => trim($data['body']),
+            'created_at'    => now(),
+        ]);
+
+        return response()->json([
+            'ok' => true,
+            'message' => [
+                'id'   => $msg->id,
+                'uid'  => $msg->user_id,
+                'name' => $msg->author_name,
+                'body' => $msg->body,
+                'at'   => $msg->created_at?->toISOString(),
+            ],
+        ]);
+    }
+}
diff --git a/app/Models/LiveChatMessage.php b/app/Models/LiveChatMessage.php
new file mode 100644
index 0000000..240360a
--- /dev/null
+++ b/app/Models/LiveChatMessage.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Model;
+
+class LiveChatMessage extends Model
+{
+    protected $table = 'live_chat_messages';
+
+    public $timestamps = false; // explicit created_at only, set via useCurrent()
+
+    protected $fillable = [
+        'livestream_id',
+        'user_id',
+        'author_name',
+        'body',
+        'created_at',
+    ];
+
+    protected $casts = [
+        'created_at' => 'datetime',
+    ];
+
+    public function livestream()
+    {
+        return $this->belongsTo(LiveStream::class, 'livestream_id');
+    }
+
+    public function user()
+    {
+        return $this->belongsTo(User::class);
+    }
+}
diff --git a/app/Models/LiveStream.php b/app/Models/LiveStream.php
new file mode 100644
index 0000000..fd579e6
--- /dev/null
+++ b/app/Models/LiveStream.php
@@ -0,0 +1,253 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Support\Carbon;
+use Illuminate\Support\Str;
+
+/**
+ * A live broadcast.
+ *
+ * The row is the authority on whether a stream may exist; the media server
+ * holds no state of its own and asks this table (through LiveAuthController)
+ * before it accepts a publisher or a viewer.
+ */
+class LiveStream extends Model
+{
+    use HasFactory;
+
+    protected $table = 'livestreams';
+
+    protected $fillable = [
+        'user_id', 'public_id', 'title', 'description',
+        'status', 'visibility', 'video_id',
+    ];
+
+    /**
+     * The publish token is a credential. Keeping it out of the default array
+     * form means it cannot be leaked by a careless toJson() on a model that
+     * reached a view or an API response.
+     */
+    protected $hidden = ['publish_token', 'publish_token_expires_at'];
+
+    protected $casts = [
+        'publish_token_expires_at' => 'datetime',
+        'started_at' => 'datetime',
+        'ended_at' => 'datetime',
+        'last_seen_at' => 'datetime',
+    ];
+
+    public const STATUS_IDLE = 'idle';
+    public const STATUS_LIVE = 'live';
+    public const STATUS_ENDED = 'ended';
+    public const STATUS_FAILED = 'failed';
+
+    /** How long a freshly minted publish token stays valid. */
+    public const PUBLISH_TOKEN_TTL_SECONDS = 120;
+
+    protected static function booted(): void
+    {
+        // Every stream gets an unpredictable public id, always — never left to
+        // a caller to remember.
+        static::creating(function (self $stream) {
+            $stream->public_id ??= self::newPublicId();
+        });
+    }
+
+    /* ---------------- Identity ---------------- */
+
+    /**
+     * 32 chars of alphanumeric entropy. Also the media path segment, which is
+     * why it is constrained to [a-zA-Z0-9] — it has to satisfy the path regex
+     * the media server is configured with.
+     */
+    public static function newPublicId(): string
+    {
+        do {
+            $id = Str::random(32);
+        } while (self::where('public_id', $id)->exists());
+
+        return $id;
+    }
+
+    /** Route model binding uses the unpredictable id, never the numeric key. */
+    public function getRouteKeyName(): string
+    {
+        return 'public_id';
+    }
+
+    /** The path the media server knows this stream by. */
+    public function mediaPath(): string
+    {
+        return 'live/'.$this->public_id;
+    }
+
+    /* ---------------- Relations ---------------- */
+
+    public function user(): BelongsTo
+    {
+        return $this->belongsTo(User::class);
+    }
+
+    /** The recording, once a finished stream has been published as a video. */
+    public function video(): BelongsTo
+    {
+        return $this->belongsTo(Video::class);
+    }
+
+    /* ---------------- State ---------------- */
+
+    public function isLive(): bool
+    {
+        return $this->status === self::STATUS_LIVE;
+    }
+
+    public function isOwnedBy(?User $user): bool
+    {
+        return $user !== null && $this->user_id === $user->id;
+    }
+
+    /**
+     * May this viewer watch?
+     *
+     * Both public and unlisted streams are watchable by anyone holding the
+     * link — the difference is only whether the stream is listed. Ownership
+     * additionally grants access before it goes live, so the broadcaster can
+     * open their own watch page to check themselves.
+     */
+    public function isWatchableBy(?User $user): bool
+    {
+        if ($this->isOwnedBy($user)) {
+            return true;
+        }
+
+        return $this->isLive() && in_array($this->visibility, ['public', 'unlisted'], true);
+    }
+
+    /* ---------------- Publish credential ---------------- */
+
+    /**
+     * Mint a short-lived, single-use token for the broadcaster's browser.
+     *
+     * Returned in plaintext to the owner exactly once, at the moment they press
+     * "Go live". Stored so the media server's auth hook can verify it, then
+     * consumed on first successful publish.
+     */
+    public function issuePublishToken(): string
+    {
+        $token = Str::random(64);
+
+        $this->forceFill([
+            'publish_token' => hash('sha256', $token),
+            'publish_token_expires_at' => now()->addSeconds(self::PUBLISH_TOKEN_TTL_SECONDS),
+        ])->save();
+
+        return $token;
+    }
+
+    /** Constant-time check of a presented token against the stored hash. */
+    public function publishTokenMatches(?string $presented): bool
+    {
+        if (! $presented || ! $this->publish_token || ! $this->publish_token_expires_at) {
+            return false;
+        }
+
+        if ($this->publish_token_expires_at->isPast()) {
+            return false;
+        }
+
+        return hash_equals($this->publish_token, hash('sha256', $presented));
+    }
+
+    /** Burn the token so a captured one cannot be replayed. */
+    public function consumePublishToken(): void
+    {
+        $this->forceFill([
+            'publish_token' => null,
+            'publish_token_expires_at' => null,
+        ])->save();
+    }
+
+    /* ---------------- Transitions ---------------- */
+
+    public function markLive(): void
+    {
+        $this->forceFill([
+            'status' => self::STATUS_LIVE,
+            'started_at' => $this->started_at ?? now(),
+            'last_seen_at' => now(),
+            'ended_at' => null,
+        ])->save();
+    }
+
+    /**
+     * Put an ended stream back into a startable state.
+     *
+     * A stream is a reusable channel, not a one-shot: the owner keeps the same
+     * link and can go live on it again. Without this, any failed start — a lost
+     * signal, a refused camera, a server hiccup — would kill the stream
+     * permanently and force a new link on every retry.
+     */
+    public function reArm(): void
+    {
+        if ($this->status !== self::STATUS_ENDED && $this->status !== self::STATUS_FAILED) {
+            return;
+        }
+
+        $this->forceFill([
+            'status' => self::STATUS_IDLE,
+            'ended_at' => null,
+            'current_viewers' => 0,
+        ])->save();
+    }
+
+    public function markEnded(): void
+    {
+        $this->forceFill([
+            'status' => self::STATUS_ENDED,
+            'ended_at' => now(),
+            'current_viewers' => 0,
+            'publish_token' => null,
+            'publish_token_expires_at' => null,
+        ])->save();
+    }
+
+    /* ---------------- Display ---------------- */
+
+    public function getDurationSecondsAttribute(): ?int
+    {
+        if (! $this->started_at) {
+            return null;
+        }
+
+        return ($this->ended_at ?? Carbon::now())->diffInSeconds($this->started_at);
+    }
+
+    public function getFormattedDurationAttribute(): string
+    {
+        $seconds = $this->duration_seconds;
+
+        if ($seconds === null) {
+            return '00:00';
+        }
+
+        return $seconds >= 3600
+            ? sprintf('%d:%02d:%02d', intdiv($seconds, 3600), intdiv($seconds % 3600, 60), $seconds % 60)
+            : sprintf('%02d:%02d', intdiv($seconds, 60), $seconds % 60);
+    }
+
+    /* ---------------- Scopes ---------------- */
+
+    public function scopeLive($query)
+    {
+        return $query->where('status', self::STATUS_LIVE);
+    }
+
+    public function scopeListed($query)
+    {
+        return $query->where('visibility', 'public');
+    }
+}
diff --git a/config/live.php b/config/live.php
new file mode 100644
index 0000000..32ee352
--- /dev/null
+++ b/config/live.php
@@ -0,0 +1,55 @@
+<?php
+
+/*
+|--------------------------------------------------------------------------
+| Live streaming
+|--------------------------------------------------------------------------
+|
+| The media plane runs as MediaMTX on loopback; nginx proxies /live-rtc and
+| /live-hls to it. Nothing here is a secret except the TURN credential, which
+| comes from the environment.
+|
+*/
+
+return [
+
+    // MediaMTX's control API (localhost only). Used to read live publisher and
+    // viewer state.
+    'api_url' => env('LIVE_API_URL', 'http://127.0.0.1:9997'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | ICE
+    |--------------------------------------------------------------------------
+    |
+    | STUN lets a browser discover its public address. TURN relays the media
+    | when a direct path cannot be established — which, until a UDP port is
+    | forwarded to this server, is EVERY broadcaster outside the local network.
+    |
+    | With no TURN configured, publishing works from the LAN only.
+    |
+    */
+    'stun_url' => env('LIVE_STUN_URL', 'stun:stun.l.google.com:19302'),
+
+    'turn_url' => env('LIVE_TURN_URL'),
+    'turn_username' => env('LIVE_TURN_USERNAME'),
+    'turn_credential' => env('LIVE_TURN_CREDENTIAL'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Capture defaults
+    |--------------------------------------------------------------------------
+    |
+    | The target the phone is ASKED for. A camera that cannot do 1080p returns
+    | the closest it can, and WebRTC's congestion control lowers the bitrate
+    | when the uplink cannot sustain it — so this is a ceiling, not a promise.
+    |
+    */
+    'video_width' => (int) env('LIVE_VIDEO_WIDTH', 1920),
+    'video_height' => (int) env('LIVE_VIDEO_HEIGHT', 1080),
+    'video_fps' => (int) env('LIVE_VIDEO_FPS', 30),
+
+    // ~4.5 Mbit/s is the practical ceiling for 1080p30 over a mobile uplink.
+    'max_bitrate' => (int) env('LIVE_MAX_BITRATE', 4_500_000),
+
+];
diff --git a/database/migrations/2026_08_18_000000_create_livestreams_table.php b/database/migrations/2026_08_18_000000_create_livestreams_table.php
new file mode 100644
index 0000000..75afbbc
--- /dev/null
+++ b/database/migrations/2026_08_18_000000_create_livestreams_table.php
@@ -0,0 +1,71 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+/**
+ * Live streaming.
+ *
+ * Purely additive: one new table. No existing table is altered — the link to a
+ * recording is held here as video_id rather than adding a column to `videos`,
+ * so the music and generic video paths run against exactly the schema they run
+ * against today.
+ */
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('livestreams', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('user_id')->constrained()->cascadeOnDelete();
+
+            // Public, unpredictable identifier. Used in the watch URL AND as the
+            // media path, so it must never be guessable or enumerable — knowing
+            // one stream's id must not hint at another's.
+            $table->string('public_id', 32)->unique();
+
+            $table->string('title');
+            $table->text('description')->nullable();
+
+            // idle → live → ended, or failed.
+            $table->string('status', 16)->default('idle');
+
+            // public  = listed on the live index
+            // unlisted = reachable only with the link
+            $table->string('visibility', 16)->default('public');
+
+            // Short-lived, single-use credential the browser presents to the
+            // media server when it starts publishing. Not a long-lived stream
+            // key: it is minted on "Go live" and expires in minutes, so there
+            // is no durable secret to leak, screenshot, or reuse.
+            $table->string('publish_token', 64)->nullable();
+            $table->timestamp('publish_token_expires_at')->nullable();
+
+            $table->timestamp('started_at')->nullable();
+            $table->timestamp('ended_at')->nullable();
+
+            // Last time the media server confirmed the publisher is still
+            // connected — how a stream that died without saying goodbye gets
+            // reaped.
+            $table->timestamp('last_seen_at')->nullable();
+
+            $table->unsignedInteger('peak_viewers')->default(0);
+            $table->unsignedInteger('current_viewers')->default(0);
+
+            // Set once a finished stream has been turned into a normal video.
+            $table->foreignId('video_id')->nullable()->constrained()->nullOnDelete();
+
+            $table->timestamps();
+
+            // The live index reads "public streams that are live, newest first".
+            $table->index(['status', 'visibility']);
+            $table->index(['user_id', 'status']);
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('livestreams');
+    }
+};
diff --git a/database/migrations/2026_10_21_000003_create_live_chat_messages_table.php b/database/migrations/2026_10_21_000003_create_live_chat_messages_table.php
new file mode 100644
index 0000000..7e7f72c
--- /dev/null
+++ b/database/migrations/2026_10_21_000003_create_live_chat_messages_table.php
@@ -0,0 +1,37 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+/**
+ * Live chat messages — one row per message, scoped to a livestream. Simple
+ * polling model: viewers hit /live/{public_id}/chat?since=<id> every few
+ * seconds and get back everything newer than their last-seen id.
+ *
+ * Cascades: delete the livestream, lose its chat log. Users keep theirs
+ * nulled out so a deleted account's historical messages still render as
+ * "deleted user" rather than removing them from the thread.
+ */
+return new class extends Migration
+{
+    public function up(): void
+    {
+        Schema::create('live_chat_messages', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('livestream_id')->constrained()->cascadeOnDelete();
+            $table->foreignId('user_id')->nullable()->constrained()->nullOnDelete();
+            $table->string('author_name', 255);   // snapshot of the sender's name at time of posting
+            $table->text('body');
+            $table->timestamp('created_at')->useCurrent();
+
+            // Chat pagination reads "messages in this stream newer than id X".
+            $table->index(['livestream_id', 'id']);
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::dropIfExists('live_chat_messages');
+    }
+};
diff --git a/resources/views/live/broadcast.blade.php b/resources/views/live/broadcast.blade.php
new file mode 100644
index 0000000..717693d
--- /dev/null
+++ b/resources/views/live/broadcast.blade.php
@@ -0,0 +1,446 @@
+@extends('layouts.app')
+
+@section('title', 'Go Live — '.$stream->title)
+
+@section('extra_styles')
+<style>
+    .lv-wrap { max-width: 1100px; margin: 0 auto; padding: 16px; }
+
+    /* The preview owns the screen on a phone. Everything else floats on it. */
+    .lv-stage {
+        position: relative; background: #000; border-radius: 16px; overflow: hidden;
+        aspect-ratio: 16 / 9; box-shadow: 0 10px 40px rgba(0,0,0,.45);
+    }
+    .lv-stage video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }
+
+    /* Mirror only the selfie camera — a mirrored rear camera looks broken. */
+    .lv-stage video.mirrored { transform: scaleX(-1); }
+
+    .lv-badge {
+        position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px;
+        padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
+        background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(8px);
+    }
+    .lv-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #6b7280; }
+    .lv-badge.is-live { background: rgba(239,68,68,.92); }
+    .lv-badge.is-live .dot { background: #fff; animation: lvPulse 1.4s ease-in-out infinite; }
+    @keyframes lvPulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
+
+    .lv-stats {
+        position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 4px;
+        padding: 8px 12px; border-radius: 12px; background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
+        color: #e5e7eb; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; min-width: 120px;
+    }
+    .lv-stats b { color: #fff; font-weight: 600; }
+    .lv-stats .warn { color: #fbbf24; }
+    .lv-stats .bad  { color: #f87171; }
+
+    .lv-controls {
+        position: absolute; left: 0; right: 0; bottom: 0; padding: 16px;
+        display: flex; align-items: center; justify-content: center; gap: 12px;
+        background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
+    }
+    .lv-btn {
+        width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25);
+        background: rgba(255,255,255,.12); color: #fff; font-size: 20px; cursor: pointer;
+        display: grid; place-items: center; backdrop-filter: blur(8px); transition: transform .12s ease, background .15s ease;
+    }
+    .lv-btn:hover { background: rgba(255,255,255,.22); }
+    .lv-btn:active { transform: scale(.92); }
+    .lv-btn.off { background: rgba(239,68,68,.85); border-color: transparent; }
+    .lv-btn:disabled { opacity: .4; cursor: not-allowed; }
+
+    .lv-golive {
+        min-width: 150px; height: 52px; padding: 0 26px; border-radius: 999px; border: 0;
+        background: #ef4444; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
+        display: inline-flex; align-items: center; gap: 9px; transition: transform .12s ease, background .15s ease;
+    }
+    .lv-golive:hover { background: #dc2626; }
+    .lv-golive:active { transform: scale(.97); }
+    .lv-golive:disabled { opacity: .55; cursor: not-allowed; }
+    .lv-golive.is-live { background: #111827; border: 1px solid rgba(255,255,255,.25); }
+
+    .lv-meta { margin-top: 18px; display: grid; gap: 14px; grid-template-columns: 1fr; }
+    @media (min-width: 860px) { .lv-meta { grid-template-columns: 1.4fr 1fr; } }
+    .lv-card { background: var(--yt-bg-secondary, #181818); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px; }
+    .lv-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; opacity: .6; margin: 0 0 10px; }
+    .lv-share { display: flex; gap: 8px; }
+    .lv-share input {
+        flex: 1; min-width: 0; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
+        border-radius: 10px; padding: 10px 12px; color: inherit; font-size: 13px;
+    }
+    .lv-note { font-size: 12px; opacity: .6; line-height: 1.6; margin-top: 10px; }
+
+    .lv-msg { margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 14px; display: none; }
+    .lv-msg.err { display: block; background: rgba(239,68,68,.12); border: 1px solid rgba(239,68,68,.35); color: #fca5a5; }
+    .lv-msg.ok  { display: block; background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35); color: #86efac; }
+</style>
+@endsection
+
+@section('content')
+<div class="lv-wrap">
+
+    <div class="lv-stage">
+        <video id="lvPreview" autoplay playsinline muted></video>
+
+        <div class="lv-badge" id="lvBadge"><span class="dot"></span><span id="lvBadgeText">READY</span></div>
+
+        <div class="lv-stats" id="lvStats" style="display:none;">
+            <div><b id="lvRes">—</b> · <b id="lvFps">—</b> fps</div>
+            <div><b id="lvBitrate">—</b></div>
+            <div id="lvHealth">—</div>
+            <div><b id="lvTimer">00:00</b></div>
+        </div>
+
+        <div class="lv-controls">
+            <button class="lv-btn" id="lvMic" title="Mute microphone"><i class="bi bi-mic-fill"></i></button>
+            <button class="lv-golive" id="lvGoLive"><i class="bi bi-broadcast"></i><span id="lvGoLiveText">Go Live</span></button>
+            <button class="lv-btn" id="lvFlip" title="Switch camera"><i class="bi bi-arrow-repeat"></i></button>
+        </div>
+    </div>
+
+    <div class="lv-msg" id="lvMsg"></div>
+
+    <div class="lv-meta">
+        <div class="lv-card">
+            <h3>{{ $stream->title }}</h3>
+            @if ($stream->description)
+                <p style="margin:0 0 10px;font-size:14px;opacity:.8;">{{ $stream->description }}</p>
+            @endif
+            <div class="lv-share">
+                <input type="text" id="lvWatchUrl" value="{{ $watchUrl }}" readonly onclick="this.select()">
+                <button class="action-btn" type="button" id="lvCopy"><i class="bi bi-clipboard"></i> <span>Copy</span></button>
+            </div>
+            <p class="lv-note">
+                Anyone with this link can watch while you are live.
+                {{ $stream->visibility === 'public' ? 'This stream is also listed on the Live page.' : 'This stream is unlisted — only people with the link can find it.' }}
+            </p>
+        </div>
+
+        <div class="lv-card">
+            <h3>Quality</h3>
+            <p class="lv-note" style="margin-top:0;">
+                Targeting {{ config('live.video_width') }}×{{ config('live.video_height') }} at {{ config('live.video_fps') }} fps.
+                If your upload speed drops, the picture softens instead of freezing — that is the connection adapting, not a fault.
+                Wi-Fi or 5G will hold 1080p most reliably.
+            </p>
+        </div>
+    </div>
+</div>
+@endsection
+
+@section('scripts')
+<script>
+(function () {
+    'use strict';
+
+    var CFG = {
+        whipUrl:    @json($whipUrl),
+        tokenUrl:   @json(route('live.token', $stream)),
+        stopUrl:    @json(route('live.stop', $stream)),
+        csrf:       @json(csrf_token()),
+        iceServers: @json($iceServers),
+        width:      {{ (int) config('live.video_width') }},
+        height:     {{ (int) config('live.video_height') }},
+        fps:        {{ (int) config('live.video_fps') }},
+        maxBitrate: {{ (int) config('live.max_bitrate') }}
+    };
+
+    var el = function (id) { return document.getElementById(id); };
+    var preview = el('lvPreview'), badge = el('lvBadge'), badgeText = el('lvBadgeText');
+    var goLive = el('lvGoLive'), goLiveText = el('lvGoLiveText');
+    var msg = el('lvMsg'), stats = el('lvStats');
+
+    var stream = null, pc = null, statsTimer = null, clockTimer = null;
+    var facing = 'environment', live = false, startedAt = 0;
+
+    function say(text, kind) {
+        msg.textContent = text;
+        msg.className = 'lv-msg ' + (kind || 'err');
+    }
+    function clearSay() { msg.className = 'lv-msg'; msg.textContent = ''; }
+
+    /* ---------------- Camera ---------------- */
+
+    // Ask for 1080p as an IDEAL, never `exact`: a phone whose camera cannot do
+    // it should hand back its best effort, not refuse to open at all.
+    function constraints() {
+        return {
+            video: {
+                width:  { ideal: CFG.width },
+                height: { ideal: CFG.height },
+                frameRate: { ideal: CFG.fps },
+                facingMode: { ideal: facing }
+            },
+            audio: {
+                echoCancellation: true,
+                noiseSuppression: true,
+                autoGainControl: true
+            }
+        };
+    }
+
+    async function openCamera() {
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+            say('This browser cannot open a camera. On iPhone use Safari; on Android use Chrome.');
+            goLive.disabled = true;
+            return false;
+        }
+
+        // getUserMedia only exists in a secure context. Saying so plainly beats
+        // a bare "Permission denied" the user cannot act on.
+        if (!window.isSecureContext) {
+            say('The camera needs a secure (HTTPS) connection. Open this page over https.');
+            goLive.disabled = true;
+            return false;
+        }
+
+        try {
+            if (stream) { stream.getTracks().forEach(function (t) { t.stop(); }); }
+            stream = await navigator.mediaDevices.getUserMedia(constraints());
+        } catch (e) {
+            if (e && (e.name === 'NotAllowedError' || e.name === 'SecurityError')) {
+                say('Camera and microphone access was blocked. Allow it in your browser settings, then reload.');
+            } else if (e && e.name === 'NotFoundError') {
+                say('No camera was found on this device.');
+            } else if (e && e.name === 'NotReadableError') {
+                say('The camera is already in use by another app. Close it and try again.');
+            } else {
+                say('Could not start the camera: ' + (e && e.message ? e.message : e));
+            }
+            goLive.disabled = true;
+            return false;
+        }
+
+        preview.srcObject = stream;
+        preview.classList.toggle('mirrored', facing === 'user');
+        goLive.disabled = false;
+        clearSay();
+        return true;
+    }
+
+    /* ---------------- Publish (WHIP) ---------------- */
+
+    async function startBroadcast() {
+        goLive.disabled = true;
+        goLiveText.textContent = 'Starting…';
+        clearSay();
+
+        try {
+            // The publish credential is minted now, not at page load, so its
+            // short life starts when the user actually goes live.
+            var tokenRes = await fetch(CFG.tokenUrl, {
+                method: 'POST',
+                headers: { 'X-CSRF-TOKEN': CFG.csrf, 'Accept': 'application/json' },
+                credentials: 'same-origin'
+            });
+            if (!tokenRes.ok) { throw new Error('Could not get permission to publish (' + tokenRes.status + ').'); }
+            var auth = await tokenRes.json();
+
+            pc = new RTCPeerConnection({
+                iceServers: auth.ice_servers && auth.ice_servers.length ? auth.ice_servers : CFG.iceServers,
+                bundlePolicy: 'max-bundle'
+            });
+
+            pc.addEventListener('connectionstatechange', function () {
+                if (pc.connectionState === 'failed' || pc.connectionState === 'disconnected') {
+                    say('The connection to the server dropped. Check your signal and go live again.');
+                    stopBroadcast(true);
+                }
+            });
+
+            stream.getTracks().forEach(function (track) {
+                // maintain-resolution keeps 1920x1080 and sheds frame rate when
+                // the uplink tightens. For a match or a performance, a sharp
+                // 20fps reads better than a soft, blocky 30.
+                if (track.kind === 'video') { track.contentHint = 'detail'; }
+                pc.addTrack(track, stream);
+            });
+
+            var videoSender = pc.getSenders().find(function (s) { return s.track && s.track.kind === 'video'; });
+            if (videoSender) {
+                var params = videoSender.getParameters();
+                params.encodings = params.encodings && params.encodings.length ? params.encodings : [{}];
+                params.encodings[0].maxBitrate = CFG.maxBitrate;
+                params.encodings[0].maxFramerate = CFG.fps;
+                params.degradationPreference = 'maintain-resolution';
+                try { await videoSender.setParameters(params); } catch (e) { /* older browsers ignore this */ }
+            }
+
+            var offer = await pc.createOffer();
+            await pc.setLocalDescription(offer);
+            await iceGatheringComplete(pc);
+
+            var res = await fetch(auth.whip_url || CFG.whipUrl, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/sdp',
+                    // Basic auth keeps the credential out of the URL, and so
+                    // out of proxy and access logs.
+                    'Authorization': 'Basic ' + btoa('publisher:' + auth.token)
+                },
+                body: pc.localDescription.sdp
+            });
+
+            if (res.status === 401 || res.status === 403) { throw new Error('The server refused the broadcast. Reload the page and try again.'); }
+            if (!res.ok) { throw new Error('The server rejected the stream (' + res.status + ').'); }
+
+            await pc.setRemoteDescription({ type: 'answer', sdp: await res.text() });
+
+            live = true;
+            startedAt = Date.now();
+            badge.classList.add('is-live');
+            badgeText.textContent = 'LIVE';
+            goLive.classList.add('is-live');
+            goLiveText.textContent = 'End Stream';
+            goLive.disabled = false;
+            stats.style.display = 'flex';
+            say('You are live. Share the link below.', 'ok');
+
+            statsTimer = setInterval(sampleStats, 1000);
+            clockTimer = setInterval(tickClock, 1000);
+
+        } catch (e) {
+            say(e && e.message ? e.message : String(e));
+            await stopBroadcast(true);
+        }
+    }
+
+    // Wait for ICE to finish rather than trickling: WHIP is a single
+    // offer/answer exchange, so the offer must already carry the candidates.
+    function iceGatheringComplete(pc) {
+        if (pc.iceGatheringState === 'complete') { return Promise.resolve(); }
+        return new Promise(function (resolve) {
+            var done = false;
+            function finish() { if (!done) { done = true; resolve(); } }
+            pc.addEventListener('icegatheringstatechange', function () {
+                if (pc.iceGatheringState === 'complete') { finish(); }
+            });
+            // Never hang on a candidate that will not arrive.
+            setTimeout(finish, 3000);
+        });
+    }
+
+    async function stopBroadcast(silent) {
+        clearInterval(statsTimer); statsTimer = null;
+        clearInterval(clockTimer); clockTimer = null;
+
+        if (pc) { try { pc.close(); } catch (e) {} pc = null; }
+
+        if (live) {
+            try {
+                await fetch(CFG.stopUrl, {
+                    method: 'POST',
+                    headers: { 'X-CSRF-TOKEN': CFG.csrf, 'Accept': 'application/json' },
+                    credentials: 'same-origin'
+                });
+            } catch (e) { /* the server also reaps on unpublish */ }
+        }
+
+        live = false;
+        badge.classList.remove('is-live');
+        badgeText.textContent = 'READY';
+        goLive.classList.remove('is-live');
+        goLiveText.textContent = 'Go Live';
+        goLive.disabled = false;
+        stats.style.display = 'none';
+
+        if (!silent) { say('Stream ended.', 'ok'); }
+    }
+
+    /* ---------------- Telemetry ---------------- */
+
+    var lastBytes = 0, lastAt = 0;
+
+    async function sampleStats() {
+        if (!pc) { return; }
+        var report = await pc.getStats();
+        var kbps = null, fps = null, w = null, h = null, lossPct = null;
+
+        report.forEach(function (s) {
+            if (s.type === 'outbound-rtp' && s.kind === 'video') {
+                var now = s.timestamp;
+                if (lastAt && s.bytesSent > lastBytes) {
+                    kbps = Math.round(((s.bytesSent - lastBytes) * 8) / ((now - lastAt) / 1000) / 1000);
+                }
+                lastBytes = s.bytesSent; lastAt = now;
+                if (s.framesPerSecond) { fps = Math.round(s.framesPerSecond); }
+                if (s.frameWidth) { w = s.frameWidth; h = s.frameHeight; }
+            }
+            if (s.type === 'remote-inbound-rtp' && s.kind === 'video' && s.packetsLost != null && s.packetsReceived) {
+                lossPct = (s.packetsLost / (s.packetsLost + s.packetsReceived)) * 100;
+            }
+        });
+
+        if (w && h) { el('lvRes').textContent = w + '×' + h; }
+        if (fps !== null) { el('lvFps').textContent = fps; }
+        if (kbps !== null) { el('lvBitrate').textContent = (kbps / 1000).toFixed(1) + ' Mbps'; }
+
+        // Report the connection honestly — a broadcaster who can see the uplink
+        // struggling can move rather than wonder why the picture went soft.
+        var health = el('lvHealth');
+        if (lossPct === null) { health.textContent = 'connection ok'; health.className = ''; }
+        else if (lossPct < 2)  { health.textContent = 'connection good'; health.className = ''; }
+        else if (lossPct < 8)  { health.textContent = 'connection weak'; health.className = 'warn'; }
+        else                   { health.textContent = 'connection poor'; health.className = 'bad'; }
+    }
+
+    function tickClock() {
+        var s = Math.floor((Date.now() - startedAt) / 1000);
+        var m = Math.floor(s / 60), sec = s % 60;
+        el('lvTimer').textContent = (m < 10 ? '0' : '') + m + ':' + (sec < 10 ? '0' : '') + sec;
+    }
+
+    /* ---------------- Controls ---------------- */
+
+    goLive.addEventListener('click', function () {
+        if (live) { stopBroadcast(false); } else { startBroadcast(); }
+    });
+
+    el('lvFlip').addEventListener('click', async function () {
+        facing = (facing === 'environment') ? 'user' : 'environment';
+        var wasLive = live;
+        var ok = await openCamera();
+        if (!ok) { return; }
+
+        // Swap the track inside the existing connection so flipping the camera
+        // mid-broadcast does not drop the stream.
+        if (wasLive && pc) {
+            var newTrack = stream.getVideoTracks()[0];
+            var sender = pc.getSenders().find(function (s) { return s.track && s.track.kind === 'video'; });
+            if (sender && newTrack) { try { await sender.replaceTrack(newTrack); } catch (e) {} }
+        }
+    });
+
+    el('lvMic').addEventListener('click', function () {
+        if (!stream) { return; }
+        var track = stream.getAudioTracks()[0];
+        if (!track) { return; }
+        track.enabled = !track.enabled;
+        this.classList.toggle('off', !track.enabled);
+        this.innerHTML = track.enabled ? '<i class="bi bi-mic-fill"></i>' : '<i class="bi bi-mic-mute-fill"></i>';
+    });
+
+    el('lvCopy').addEventListener('click', function () {
+        var input = el('lvWatchUrl');
+        input.select();
+        navigator.clipboard && navigator.clipboard.writeText(input.value);
+        var span = this.querySelector('span');
+        var original = span.textContent;
+        span.textContent = 'Copied';
+        setTimeout(function () { span.textContent = original; }, 1400);
+    });
+
+    // A broadcaster who closes the tab must not leave a stream stuck live.
+    window.addEventListener('pagehide', function () {
+        if (live && navigator.sendBeacon) {
+            var body = new FormData();
+            body.append('_token', CFG.csrf);
+            navigator.sendBeacon(CFG.stopUrl, body);
+        }
+    });
+
+    openCamera();
+})();
+</script>
+@endsection
diff --git a/resources/views/live/create.blade.php b/resources/views/live/create.blade.php
new file mode 100644
index 0000000..96ad123
--- /dev/null
+++ b/resources/views/live/create.blade.php
@@ -0,0 +1,89 @@
+@extends('layouts.app')
+
+@section('title', 'Go Live')
+
+@section('extra_styles')
+<style>
+    .lc-wrap { max-width: 560px; margin: 0 auto; padding: 24px 16px 60px; }
+    .lc-wrap h1 { font-size: 22px; font-weight: 700; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
+    .lc-sub { font-size: 13px; opacity: .6; margin: 0 0 26px; line-height: 1.6; }
+    .lc-field { margin-bottom: 18px; }
+    .lc-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
+    .lc-field input[type=text], .lc-field textarea {
+        width: 100%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
+        border-radius: 11px; padding: 11px 13px; color: inherit; font-size: 14px; font-family: inherit;
+    }
+    .lc-field input:focus, .lc-field textarea:focus { outline: none; border-color: #ef4444; }
+    .lc-field textarea { min-height: 88px; resize: vertical; }
+    .lc-err { font-size: 12px; color: #f87171; margin-top: 6px; }
+
+    .lc-vis { display: grid; gap: 10px; }
+    .lc-vis label {
+        display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; cursor: pointer;
+        border: 1px solid rgba(255,255,255,.14); border-radius: 12px; transition: border-color .15s ease, background .15s ease;
+    }
+    .lc-vis label:hover { background: rgba(255,255,255,.04); }
+    .lc-vis input { margin-top: 3px; accent-color: #ef4444; }
+    .lc-vis .t { font-size: 14px; font-weight: 600; }
+    .lc-vis .d { font-size: 12px; opacity: .6; margin-top: 2px; line-height: 1.5; }
+    .lc-vis input:checked + div .t { color: #ef4444; }
+</style>
+@endsection
+
+@section('content')
+<div class="lc-wrap">
+    <h1><i class="bi bi-broadcast" style="color:#ef4444;"></i> Go Live</h1>
+    <p class="lc-sub">Stream straight from your phone's camera. You'll get a link to share the moment you start.</p>
+
+    <form method="POST" action="{{ route('live.store') }}">
+        @csrf
+
+        <div class="lc-field">
+            <label for="title">Title</label>
+            <input type="text" id="title" name="title" value="{{ old('title') }}" maxlength="120" required
+                   placeholder="What are you streaming?" autofocus>
+            @error('title')<div class="lc-err">{{ $message }}</div>@enderror
+        </div>
+
+        <div class="lc-field">
+            <label for="description">Description <span style="opacity:.5;font-weight:400;">(optional)</span></label>
+            <textarea id="description" name="description" maxlength="2000" placeholder="Tell viewers what to expect">{{ old('description') }}</textarea>
+            @error('description')<div class="lc-err">{{ $message }}</div>@enderror
+        </div>
+
+        <div class="lc-field">
+            <label>Who can find it</label>
+            <div class="lc-vis">
+                <label>
+                    <input type="radio" name="visibility" value="public" {{ old('visibility', 'public') === 'public' ? 'checked' : '' }}>
+                    <div>
+                        <div class="t">Public</div>
+                        <div class="d">Listed on the Live page — anyone can discover and watch it.</div>
+                    </div>
+                </label>
+                <label>
+                    <input type="radio" name="visibility" value="unlisted" {{ old('visibility') === 'unlisted' ? 'checked' : '' }}>
+                    <div>
+                        <div class="t">Unlisted</div>
+                        <div class="d">Not listed anywhere. Only people you send the link to can watch.</div>
+                    </div>
+                </label>
+                {{-- Mirror the upload-modal's Private wording: only the owner
+                     sees it. Useful for test runs and private rehearsals. --}}
+                <label>
+                    <input type="radio" name="visibility" value="private" {{ old('visibility') === 'private' ? 'checked' : '' }}>
+                    <div>
+                        <div class="t">Private</div>
+                        <div class="d">Only you can see this stream. Perfect for testing without an audience.</div>
+                    </div>
+                </label>
+            </div>
+            @error('visibility')<div class="lc-err">{{ $message }}</div>@enderror
+        </div>
+
+        <button type="submit" class="action-btn action-btn-primary" style="width:100%;justify-content:center;height:46px;">
+            <i class="bi bi-camera-video"></i> <span>Set up camera</span>
+        </button>
+    </form>
+</div>
+@endsection
diff --git a/resources/views/live/index.blade.php b/resources/views/live/index.blade.php
new file mode 100644
index 0000000..a24ed7e
--- /dev/null
+++ b/resources/views/live/index.blade.php
@@ -0,0 +1,95 @@
+@extends('layouts.app')
+
+@section('title', 'Live')
+
+@section('extra_styles')
+<style>
+    .li-wrap { max-width: 1300px; margin: 0 auto; padding: 16px; }
+    .li-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
+    .li-head h1 { font-size: 22px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 10px; }
+    .li-head h1 .dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; animation: liPulse 1.4s ease-in-out infinite; }
+    @keyframes liPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
+
+    .li-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
+
+    .li-card { display: block; text-decoration: none; color: inherit; border-radius: 14px; overflow: hidden; background: var(--yt-bg-secondary, #181818); border: 1px solid rgba(255,255,255,.08); transition: transform .15s ease, border-color .15s ease; }
+    .li-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); }
+    .li-thumb { position: relative; aspect-ratio: 16/9; background: linear-gradient(135deg, #1f2937, #111827); display: grid; place-items: center; }
+    .li-thumb i { font-size: 32px; opacity: .3; }
+    .li-live { position: absolute; top: 8px; left: 8px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: .04em; }
+    .li-viewers { position: absolute; bottom: 8px; right: 8px; background: rgba(0,0,0,.75); color: #fff; font-size: 11px; padding: 3px 7px; border-radius: 4px; }
+    .li-body { padding: 12px 14px; }
+    .li-body h3 { font-size: 14px; font-weight: 600; margin: 0 0 5px; line-height: 1.35; }
+    .li-body p { font-size: 12px; opacity: .6; margin: 0; }
+
+    .li-empty { text-align: center; padding: 60px 20px; opacity: .55; }
+    .li-empty i { font-size: 40px; display: block; margin-bottom: 14px; opacity: .5; }
+
+    .li-section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; opacity: .55; margin: 34px 0 14px; }
+    .li-status { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.1); }
+    .li-status.live { background: #ef4444; color: #fff; }
+</style>
+@endsection
+
+@section('content')
+<div class="li-wrap">
+
+    <div class="li-head">
+        <h1><span class="dot"></span> Live now</h1>
+        @auth
+            <a class="action-btn action-btn-primary" href="{{ route('live.create') }}">
+                <i class="bi bi-broadcast"></i> <span>Go Live</span>
+            </a>
+        @endauth
+    </div>
+
+    @if ($live->isEmpty())
+        <div class="li-empty">
+            <i class="bi bi-broadcast"></i>
+            <div>Nobody is streaming right now.</div>
+            @auth<div style="margin-top:8px;font-size:13px;">Be the first — hit <strong>Go Live</strong>.</div>@endauth
+        </div>
+    @else
+        <div class="li-grid">
+            @foreach ($live as $s)
+                <a class="li-card" href="{{ route('live.watch', $s) }}">
+                    <div class="li-thumb">
+                        <i class="bi bi-broadcast"></i>
+                        <span class="li-live">LIVE</span>
+                        <span class="li-viewers"><i class="bi bi-eye"></i> {{ $s->current_viewers }}</span>
+                    </div>
+                    <div class="li-body">
+                        <h3>{{ $s->title }}</h3>
+                        <p>{{ $s->user->name ?? 'Unknown' }}</p>
+                    </div>
+                </a>
+            @endforeach
+        </div>
+    @endif
+
+    @auth
+        @if ($mine->isNotEmpty())
+            <div class="li-section-title">Your streams</div>
+            <div class="li-grid">
+                @foreach ($mine as $s)
+                    <a class="li-card" href="{{ $s->status === 'ended' ? route('live.watch', $s) : route('live.broadcast', $s) }}">
+                        <div class="li-thumb">
+                            <i class="bi bi-{{ $s->isLive() ? 'broadcast' : 'camera-video-off' }}"></i>
+                            @if ($s->isLive())<span class="li-live">LIVE</span>@endif
+                        </div>
+                        <div class="li-body">
+                            <h3>{{ $s->title }}</h3>
+                            <p>
+                                <span class="li-status {{ $s->isLive() ? 'live' : '' }}">{{ ucfirst($s->status) }}</span>
+                                @if ($s->started_at)
+                                    · {{ $s->formatted_duration }}
+                                @endif
+                            </p>
+                        </div>
+                    </a>
+                @endforeach
+            </div>
+        @endif
+    @endauth
+</div>
+@endsection
diff --git a/resources/views/live/watch.blade.php b/resources/views/live/watch.blade.php
new file mode 100644
index 0000000..5114efa
--- /dev/null
+++ b/resources/views/live/watch.blade.php
@@ -0,0 +1,499 @@
+@extends('layouts.app')
+
+@section('title', $stream->title.' — Live')
+
+@section('extra_styles')
+<style>
+    .lw-wrap { max-width: 1200px; margin: 0 auto; padding: 16px; }
+    .lw-stage { position: relative; background: #000; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 9; }
+    .lw-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
+
+    .lw-badge {
+        position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 7px;
+        padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .04em;
+        background: rgba(239,68,68,.92); color: #fff;
+    }
+    .lw-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: lwPulse 1.4s ease-in-out infinite; }
+    .lw-badge.offline { background: rgba(0,0,0,.65); }
+    .lw-badge.offline .dot { background: #9ca3af; animation: none; }
+    @keyframes lwPulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
+
+    .lw-mode {
+        position: absolute; top: 12px; right: 12px; padding: 5px 10px; border-radius: 999px;
+        background: rgba(0,0,0,.55); color: #d1d5db; font-size: 11px; backdrop-filter: blur(8px);
+    }
+
+    .lw-overlay {
+        position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
+        background: rgba(0,0,0,.72); color: #e5e7eb; padding: 24px; gap: 10px;
+    }
+    .lw-overlay i { font-size: 34px; opacity: .5; display: block; margin-bottom: 10px; }
+    .lw-overlay .sub { font-size: 13px; opacity: .65; margin-top: 6px; }
+
+    .lw-head { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; flex-wrap: wrap; }
+    .lw-head h1 { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
+    .lw-meta { font-size: 13px; opacity: .65; display: flex; gap: 14px; flex-wrap: wrap; }
+    .lw-desc { margin-top: 14px; font-size: 14px; line-height: 1.65; opacity: .85; white-space: pre-wrap; }
+    .lw-spin { width: 28px; height: 28px; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff; border-radius: 50%; animation: lwSpin .8s linear infinite; }
+    @keyframes lwSpin { to { transform: rotate(360deg); } }
+</style>
+@endsection
+
+@section('content')
+<div class="lw-wrap">
+    @php
+        $isEnded = $stream->status === \App\Models\LiveStream::STATUS_ENDED;
+        $isLive  = $stream->status === \App\Models\LiveStream::STATUS_LIVE;
+    @endphp
+
+    <div class="lw-stage">
+        <video id="lwVideo" autoplay playsinline controls></video>
+
+        <div class="lw-badge" id="lwBadge"><span class="dot"></span><span id="lwBadgeText">LIVE</span></div>
+        <div class="lw-mode" id="lwMode" style="display:none;"></div>
+
+        {{-- Ended stream: show "Stream ended" + duration right from the
+             server; if a recording exists, surface a Watch Replay CTA. --}}
+        @if ($isEnded)
+        <div class="lw-overlay" id="lwOverlay" style="background: rgba(0,0,0,.86);">
+            <div>
+                <i class="bi bi-stop-circle" aria-hidden="true" style="opacity:.85;color:#f87171;"></i>
+                <div style="font-size:18px;font-weight:600;margin-bottom:4px;">Stream ended</div>
+                @if ($stream->started_at && $stream->ended_at)
+                    <div class="sub">
+                        {{ $stream->ended_at->diffForHumans($stream->started_at, ['parts' => 2, 'syntax' => \Carbon\CarbonInterface::DIFF_ABSOLUTE]) }}
+                        · ended {{ $stream->ended_at->diffForHumans() }}
+                    </div>
+                @endif
+                @if ($stream->video_id)
+                    <a href="{{ route('videos.show', ['video' => $stream->video->getRouteKey()]) }}"
+                       class="action-btn action-btn-primary"
+                       style="margin-top:16px;">
+                        <i class="bi bi-play-fill" aria-hidden="true"></i>
+                        <span>Watch replay</span>
+                    </a>
+                @endif
+            </div>
+        </div>
+        @else
+        <div class="lw-overlay" id="lwOverlay">
+            <div>
+                <div class="lw-spin" style="margin:0 auto 12px;"></div>
+                <div id="lwOverlayText">Connecting…</div>
+                <div class="sub" id="lwOverlaySub"></div>
+            </div>
+        </div>
+        @endif
+    </div>
+
+    <div class="lw-head">
+        <div style="flex:1;min-width:240px;">
+            <h1>{{ $stream->title }}</h1>
+            <div class="lw-meta">
+                {{-- Channel name is now a real link to the uploader's channel. --}}
+                @if ($stream->user)
+                <a href="{{ route('channel', $stream->user->channel) }}"
+                   style="color:inherit;text-decoration:none;display:inline-flex;align-items:center;gap:4px;">
+                    <i class="bi bi-person-circle" aria-hidden="true"></i>
+                    <span style="color:var(--text-primary);">{{ $stream->user->name }}</span>
+                </a>
+                @endif
+                <span id="lwViewers"><i class="bi bi-eye" aria-hidden="true"></i> {{ $stream->current_viewers }} watching</span>
+                @if ($stream->started_at)
+                    <span><i class="bi bi-clock" aria-hidden="true"></i> started {{ $stream->started_at->diffForHumans() }}</span>
+                @endif
+            </div>
+            @if ($stream->description)
+                <div class="lw-desc">{{ $stream->description }}</div>
+            @endif
+        </div>
+
+        @if ($isOwner)
+            <a class="action-btn" href="{{ route('live.broadcast', $stream) }}"><i class="bi bi-broadcast" aria-hidden="true"></i> <span>Broadcast controls</span></a>
+        @endif
+    </div>
+
+    {{-- Viewer actions row — mirrors the watch page's action bar on a smaller
+         canvas. Share works for everyone; Subscribe is auth-gated with the
+         Phase-7 ?intended= bounce; the owner never sees Subscribe. --}}
+    @if ($stream->user && (! Auth::check() || Auth::id() !== $stream->user_id))
+    <div class="lw-actions" style="display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;">
+        @auth
+            @php $isSub = Auth::user()->isSubscribedTo($stream->user); @endphp
+            <button type="button"
+                    class="action-btn {{ $isSub ? '' : 'action-btn-primary' }}"
+                    onclick="(function(){
+                        const url = {{ Js::from(route('channel.subscribe', $stream->user_id)) }};
+                        const csrf = document.querySelector('meta[name=\'csrf-token\']')?.content || '';
+                        fetch(url, { method: 'POST', headers: { 'X-CSRF-TOKEN': csrf, 'Accept':'application/json' }})
+                          .then(r=>r.json()).then(d=>{
+                            if (d.subscribed !== undefined) {
+                                event.target.closest('button').classList.toggle('action-btn-primary', !d.subscribed);
+                                event.target.closest('button').querySelector('span').textContent = d.subscribed ? 'Subscribed' : 'Subscribe';
+                            }
+                          }).catch(()=>{});
+                    })()">
+                <i class="bi {{ $isSub ? 'bi-bell-fill' : 'bi-bell' }}" aria-hidden="true"></i>
+                <span>{{ $isSub ? 'Subscribed' : 'Subscribe' }}</span>
+            </button>
+        @else
+            <button type="button" class="action-btn action-btn-primary"
+                    onclick="if(typeof showToast==='function')showToast('Sign in to subscribe','info');setTimeout(()=>{location.href='{{ route('login') }}?intended='+encodeURIComponent(location.pathname+location.search);},600);">
+                <i class="bi bi-bell" aria-hidden="true"></i><span>Subscribe</span>
+            </button>
+        @endauth
+
+        <button type="button" class="action-btn"
+                onclick="(function(){
+                    const url = window.location.href;
+                    if (navigator.share) { navigator.share({ title: {{ Js::from($stream->title) }}, url: url }).catch(()=>{}); return; }
+                    navigator.clipboard?.writeText(url).then(()=>{ if(typeof showToast==='function')showToast('Link copied','success'); });
+                })()">
+            <i class="bi bi-share" aria-hidden="true"></i>
+            <span>Share</span>
+        </button>
+    </div>
+    @endif
+
+    {{-- ── Live chat panel ─────────────────────────────── --}}
+    @if ($isLive)
+    <div class="lw-chat" id="lwChat"
+         data-poll-url="{{ route('live.chat.poll', $stream) }}"
+         data-send-url="{{ route('live.chat.send', $stream) }}"
+         data-signed-in="{{ Auth::check() ? '1' : '0' }}"
+         data-login-url="{{ route('login') }}?intended={{ urlencode('/live/' . $stream->public_id) }}">
+        <div class="lw-chat-head">
+            <i class="bi bi-chat-dots-fill" aria-hidden="true" style="color:#ef4444;"></i>
+            <span>Live chat</span>
+        </div>
+        <div class="lw-chat-messages" id="lwChatMessages" aria-live="polite" aria-atomic="false">
+            <div style="color:var(--text-secondary);font-size:13px;text-align:center;padding:16px;">Say hi 👋</div>
+        </div>
+        <form class="lw-chat-form" id="lwChatForm" onsubmit="return lwChatSubmit(event);">
+            @csrf
+            <input type="text" id="lwChatInput" maxlength="400"
+                   placeholder="{{ Auth::check() ? 'Say something…' : 'Sign in to chat' }}"
+                   {{ Auth::check() ? '' : 'disabled' }}
+                   aria-label="Chat message">
+            <button type="submit" aria-label="Send"
+                    {{ Auth::check() ? '' : 'disabled' }}>
+                <i class="bi bi-send-fill" aria-hidden="true"></i>
+            </button>
+        </form>
+    </div>
+    <style>
+        .lw-chat {
+            margin-top: 20px;
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            background: var(--bg-secondary);
+            display: flex; flex-direction: column;
+            max-height: 420px;
+        }
+        .lw-chat-head {
+            padding: 10px 14px;
+            border-bottom: 1px solid var(--border-color);
+            font-weight: 600; font-size: 14px;
+            display: flex; align-items: center; gap: 8px;
+        }
+        .lw-chat-messages {
+            flex: 1; overflow-y: auto; padding: 10px 14px;
+            display: flex; flex-direction: column; gap: 6px;
+        }
+        .lw-chat-msg {
+            font-size: 13px; line-height: 1.4;
+            display: flex; gap: 6px; align-items: flex-start;
+            padding: 4px 0;
+        }
+        .lw-chat-msg .n { font-weight: 600; color: #93c5fd; }
+        .lw-chat-msg .b { color: var(--text-primary); word-break: break-word; min-width: 0; }
+        .lw-chat-form {
+            display: flex; gap: 8px; padding: 10px 12px;
+            border-top: 1px solid var(--border-color);
+        }
+        .lw-chat-form input {
+            flex: 1; background: var(--bg-dark);
+            border: 1px solid var(--border-color); border-radius: 20px;
+            padding: 8px 14px; color: var(--text-primary); font-size: 13px;
+        }
+        .lw-chat-form input:focus { outline: none; border-color: #ef4444; }
+        .lw-chat-form button {
+            width: 36px; height: 36px; border-radius: 50%;
+            background: #ef4444; color: #fff; border: none;
+            display: inline-flex; align-items: center; justify-content: center;
+            cursor: pointer; flex: 0 0 auto;
+        }
+        .lw-chat-form button:disabled {
+            background: var(--border-color); color: var(--text-secondary); cursor: not-allowed;
+        }
+    </style>
+    <script>
+    (function () {
+        const panel  = document.getElementById('lwChat');
+        if (!panel) return;
+        const list   = document.getElementById('lwChatMessages');
+        const input  = document.getElementById('lwChatInput');
+        const form   = document.getElementById('lwChatForm');
+        const pollU  = panel.dataset.pollUrl;
+        const sendU  = panel.dataset.sendUrl;
+        const loginU = panel.dataset.loginUrl;
+        const authed = panel.dataset.signedIn === '1';
+        let since = 0, timer = null, firstPaint = true;
+
+        function escapeHtml(s) {
+            return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+        }
+        function append(msg) {
+            const row = document.createElement('div');
+            row.className = 'lw-chat-msg';
+            row.innerHTML = '<span class="n">' + escapeHtml(msg.name) + ':</span>'
+                          + ' <span class="b">' + escapeHtml(msg.body) + '</span>';
+            list.appendChild(row);
+            list.scrollTop = list.scrollHeight;
+        }
+        async function poll() {
+            try {
+                const r = await fetch(pollU + '?since=' + since, { credentials: 'same-origin', headers: {'Accept':'application/json'} });
+                if (!r.ok) return;
+                const d = await r.json();
+                if (d.messages && d.messages.length) {
+                    if (firstPaint) { list.innerHTML = ''; firstPaint = false; }
+                    d.messages.forEach(m => { append(m); if (m.id > since) since = m.id; });
+                }
+            } catch (e) {}
+        }
+        window.lwChatSubmit = function (ev) {
+            ev.preventDefault();
+            if (!authed) { location.href = loginU; return false; }
+            const body = (input.value || '').trim();
+            if (!body) return false;
+            input.disabled = true;
+            const csrf = document.querySelector('meta[name="csrf-token"]')?.content || '';
+            fetch(sendU, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
+                body: JSON.stringify({ body }),
+            }).then(r => r.json()).then(d => {
+                if (d.message) { append(d.message); since = Math.max(since, d.message.id); }
+                input.value = '';
+            }).catch(() => {
+                if (typeof showToast === 'function') showToast('Could not send message.', 'error');
+            }).finally(() => { input.disabled = false; input.focus(); });
+            return false;
+        };
+        poll();
+        timer = setInterval(poll, 3000);
+        window.addEventListener('beforeunload', () => clearInterval(timer));
+    })();
+    </script>
+    @endif
+</div>
+@endsection
+
+@section('scripts')
+<script>
+(function () {
+    'use strict';
+
+    var CFG = {
+        whep:       @json($whepUrl),
+        hls:        @json($hlsUrl),
+        statusUrl:  @json(route('live.status', $stream)),
+        iceServers: @json($iceServers),
+        isLive:     @json($stream->isLive())
+    };
+
+    var video = document.getElementById('lwVideo');
+    var overlay = document.getElementById('lwOverlay');
+    var overlayText = document.getElementById('lwOverlayText');
+    var overlaySub = document.getElementById('lwOverlaySub');
+    var badge = document.getElementById('lwBadge');
+    var badgeText = document.getElementById('lwBadgeText');
+    var modeChip = document.getElementById('lwMode');
+
+    var pc = null, hls = null, started = false;
+
+    function showOverlay(text, sub, spinning) {
+        overlay.style.display = 'grid';
+        overlayText.textContent = text;
+        overlaySub.textContent = sub || '';
+        overlay.querySelector('.lw-spin').style.display = spinning === false ? 'none' : 'block';
+    }
+    function hideOverlay() { overlay.style.display = 'none'; }
+
+    function setMode(label) {
+        modeChip.textContent = label;
+        modeChip.style.display = 'block';
+    }
+
+    function setOffline() {
+        badge.classList.add('offline');
+        badgeText.textContent = 'OFFLINE';
+        showOverlay('This stream has ended', 'The recording may appear here shortly.', false);
+        teardown();
+    }
+
+    function teardown() {
+        if (pc) { try { pc.close(); } catch (e) {} pc = null; }
+        if (hls) { try { hls.destroy(); } catch (e) {} hls = null; }
+    }
+
+    /* ---------------- WHEP: sub-second path ---------------- */
+
+    // Tried first because it is the lowest latency. If anything about it fails
+    // — no UDP path, a restrictive network, an old browser — we fall through
+    // to LL-HLS rather than showing the viewer an error.
+    async function tryWhep() {
+        if (!window.RTCPeerConnection) { return false; }
+
+        try {
+            pc = new RTCPeerConnection({ iceServers: CFG.iceServers || [], bundlePolicy: 'max-bundle' });
+            pc.addTransceiver('video', { direction: 'recvonly' });
+            pc.addTransceiver('audio', { direction: 'recvonly' });
+
+            var streamIn = new MediaStream();
+            pc.addEventListener('track', function (ev) {
+                streamIn.addTrack(ev.track);
+                video.srcObject = streamIn;
+            });
+
+            var offer = await pc.createOffer();
+            await pc.setLocalDescription(offer);
+            await gathered(pc);
+
+            var res = await fetch(CFG.whep, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/sdp' },
+                body: pc.localDescription.sdp
+            });
+
+            if (!res.ok) { throw new Error('whep ' + res.status); }
+
+            await pc.setRemoteDescription({ type: 'answer', sdp: await res.text() });
+
+            return await new Promise(function (resolve) {
+                var settled = false;
+                function decide(ok) { if (!settled) { settled = true; resolve(ok); } }
+
+                pc.addEventListener('connectionstatechange', function () {
+                    if (pc.connectionState === 'connected') { decide(true); }
+                    if (pc.connectionState === 'failed') { decide(false); }
+                });
+
+                // Don't let a half-open connection stall the viewer forever.
+                setTimeout(function () { decide(pc && pc.connectionState === 'connected'); }, 6000);
+            });
+        } catch (e) {
+            return false;
+        }
+    }
+
+    function gathered(pc) {
+        if (pc.iceGatheringState === 'complete') { return Promise.resolve(); }
+        return new Promise(function (resolve) {
+            var done = false;
+            function finish() { if (!done) { done = true; resolve(); } }
+            pc.addEventListener('icegatheringstatechange', function () {
+                if (pc.iceGatheringState === 'complete') { finish(); }
+            });
+            setTimeout(finish, 3000);
+        });
+    }
+
+    /* ---------------- LL-HLS: the path that always works ---------------- */
+
+    function loadHlsLibrary() {
+        return new Promise(function (resolve, reject) {
+            if (window.Hls) { return resolve(); }
+            var s = document.createElement('script');
+            s.src = 'https://cdn.jsdelivr.net/npm/hls.js@1.5/dist/hls.min.js';
+            s.onload = resolve;
+            s.onerror = reject;
+            document.head.appendChild(s);
+        });
+    }
+
+    async function tryHls() {
+        // Safari plays HLS natively and does it better than hls.js does.
+        if (video.canPlayType('application/vnd.apple.mpegurl')) {
+            video.src = CFG.hls;
+            return true;
+        }
+
+        try { await loadHlsLibrary(); } catch (e) { return false; }
+        if (!window.Hls || !window.Hls.isSupported()) { return false; }
+
+        return await new Promise(function (resolve) {
+            hls = new Hls({ lowLatencyMode: true, backBufferLength: 30, liveSyncDurationCount: 2 });
+            var settled = false;
+            function decide(ok) { if (!settled) { settled = true; resolve(ok); } }
+
+            hls.on(Hls.Events.MANIFEST_PARSED, function () { video.play().catch(function () {}); decide(true); });
+            hls.on(Hls.Events.ERROR, function (_e, data) {
+                if (data && data.fatal) { decide(false); }
+            });
+
+            hls.loadSource(CFG.hls);
+            hls.attachMedia(video);
+            setTimeout(function () { decide(false); }, 12000);
+        });
+    }
+
+    /* ---------------- Orchestration ---------------- */
+
+    async function connect() {
+        if (started) { return; }
+        started = true;
+
+        showOverlay('Connecting…', 'Finding the fastest route');
+
+        if (await tryWhep()) {
+            setMode('Ultra-low latency');
+            hideOverlay();
+            video.play().catch(function () {});
+            return;
+        }
+
+        teardown();
+        showOverlay('Connecting…', 'Using the standard route');
+
+        if (await tryHls()) {
+            setMode('Low latency');
+            hideOverlay();
+            return;
+        }
+
+        started = false;
+        showOverlay('Could not start playback', 'The stream may still be starting up. Retrying…', false);
+        setTimeout(function () { if (!started) { connect(); } }, 5000);
+    }
+
+    /* ---------------- Live state ---------------- */
+
+    // Polling is a deliberate, cheap fallback: this platform has no realtime
+    // channel of its own, and one small request every 10s per viewer is far
+    // less costly than a socket layer built only for this page.
+    async function pollStatus() {
+        try {
+            var res = await fetch(CFG.statusUrl, { credentials: 'same-origin', headers: { 'Accept': 'application/json' } });
+            if (!res.ok) { return; }
+            var data = await res.json();
+
+            document.getElementById('lwViewers').innerHTML = '<i class="bi bi-eye"></i> ' + data.viewers + ' watching';
+
+            if (data.live && !started) { connect(); }
+            if (!data.live && data.status === 'ended') { setOffline(); }
+        } catch (e) { /* transient */ }
+    }
+
+    if (CFG.isLive) {
+        connect();
+    } else {
+        showOverlay('Waiting for the broadcast to start', 'This page will begin automatically.', true);
+    }
+
+    setInterval(pollStatus, 10000);
+    window.addEventListener('pagehide', teardown);
+})();
+</script>
+@endsection
diff --git a/routes/web.php b/routes/web.php
index 92d5164..47a5261 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -200,6 +200,30 @@ Route::get('/channel/{username}/videos/more', [UserController::class, 'channelVi
 // in UserController::channel() to prefer a dedicated `handle` column.
 // The {handle} segment must be url-encoded (e.g. /%40alice) OR plain `@alice`
 // — Laravel's router accepts both because `@` is allowed in URI path segments.
+// ─── Live streaming ─────────────────────────────────────
+use App\Http\Controllers\LiveAuthController;
+use App\Http\Controllers\LiveStreamController;
+
+Route::get('/live', [LiveStreamController::class, 'index'])->name('live.index');
+Route::get('/live/new', [LiveStreamController::class, 'create'])->name('live.create');
+Route::post('/live', [LiveStreamController::class, 'store'])->name('live.store')->middleware('throttle:10,1');
+
+Route::get('/live/{stream}/broadcast', [LiveStreamController::class, 'broadcast'])->name('live.broadcast');
+Route::post('/live/{stream}/token', [LiveStreamController::class, 'token'])->name('live.token')->middleware('throttle:30,1');
+Route::post('/live/{stream}/stop', [LiveStreamController::class, 'stop'])->name('live.stop')->middleware('throttle:30,1');
+
+Route::get('/live/{stream}', [LiveStreamController::class, 'watch'])->name('live.watch');
+Route::get('/live/{stream}/status', [LiveStreamController::class, 'status'])->name('live.status')->middleware('throttle:120,1');
+
+// Live chat — polling by viewers, send by signed-in users (rate-limited).
+Route::get('/live/{stream}/chat',  [LiveStreamController::class, 'chatPoll'])
+    ->name('live.chat.poll')->middleware('throttle:120,1');
+Route::post('/live/{stream}/chat', [LiveStreamController::class, 'chatSend'])
+    ->name('live.chat.send')->middleware('throttle:60,1');
+
+Route::post('/api/live/auth', [LiveAuthController::class, 'authenticate'])->withoutMiddleware([\App\Http\Middleware\VerifyCsrfToken::class]);
+Route::post('/api/live/hook', [LiveAuthController::class, 'hook'])->withoutMiddleware([\App\Http\Middleware\VerifyCsrfToken::class]);
+
 Route::get('/@{handle}', [UserController::class, 'channel'])
     ->where('handle', '[A-Za-z0-9][A-Za-z0-9._-]*')
     ->name('channel.handle');