Kako ugraditi videopozive u Next.js aplikaciju

Videopoziv izgleda kao jedna značajka, a u Next.js aplikaciji to ih je zapravo nekoliko. Dva preglednika moraju pronaći jedan drugoga i dogovoriti se kako će se spojiti. Pozvana osoba mora čuti zvonjavu na kojoj god stranici bila. Neke mreže nikad ne propuštaju izravnu vezu. A prije svega toga vaša aplikacija mora odlučiti tko smije zvati koga.

Većina tutorijala stane na dva preglednika na jednoj stranici koji ručno razmjenjuju ponude. Ovaj članak prolazi kroz svaki dio koji treba stvarna aplikacija, uz cijeli primjer koji radi: stranicu za upoznavanje iz našeg vodiča za Next.js, na kojoj dvoje članova odlazi na video spoj u svom chatu. Možete je isprobati uživo: odaberite tko ćete biti, zatim je otvorite u privatnom prozoru, odaberite nekog drugog i nazovite.

Što videopozivu treba

• Signalizacija i zvonjava. Prije ikakve slike dva preglednika preko poslužitelja razmjenjuju ponude i mrežne kandidate, a pozvanoj osobi mora zazvoniti u svakoj kartici koju ima otvorenu. Za to trebaju veze otvorene cijelo vrijeme, a takve serverless funkcija ne može držati (zašto i što učiniti).
• Put između preglednika. Izravno kad to njihove mreže dopuštaju, a preko releja kad ne dopuštaju (objašnjenje STUN i TURN poslužitelja).
• Tko smije zvati koga. Pravilo na vašem poslužitelju, s podacima vaše aplikacije, provjereno prije nego što ikome zazvoni.
• Kamera i mikrofon. Jedan upit preglednika za dopuštenje, izbor uređaja, utišavanje mikrofona i gašenje kamere.
• Zaslon poziva. Zvonjava, javljanje i odbijanje, oba videa, trajanje poziva, prekidanje.
• Medijski poslužitelji, čim je u pozivu više od dvije osobe (kako rade grupni pozivi).

Svaki od tih dijelova možete sami izgraditi na WebRTC-u. Ili veze, zvonjavu i releje prepustite oblaku u stvarnom vremenu, a vaš poslužitelj zadrži jedini dio koji je doista vaš: pravilo. Upravo to radi naša stranica za upoznavanje, preko WordPlus Clouda.

Primjer: video spojevi na stranici za upoznavanje

Članovi pronalaze ljude koje traže, vide tko je na mreži, dopisuju se i odlaze na video spoj prije nego što se upoznaju uživo. To je Next.js aplikacija s App Routerom i Postgresom, a njezin dio za rad u stvarnom vremenu stane u nekoliko datoteka. Njezine pozive čine četiri koraka.

1. Tko smije zvati koga

Na stranici za upoznavanje dvije osobe smiju razgovarati kad svaka od njih traži onu drugu i nijedna nije blokirala drugu. Web-stranica to pravilo ima na jednom mjestu, kao canMeet, a chat kao broj s popisom članova. mayChat kaže da netko smije koristiti chat kad je jedan od njegovih članova i kad se i dalje smije upoznati sa svim ostalima. Pozivi se deklariraju imenom sobe chata, s tim pravilom za obje osobe:

realtime.calls('chat:{id}', async (user, other, { id }) => {
    // The one asking: who calls, as they call, or who is called, as they answer.
    const userMayChat = await mayChat(user, id);
    // The other one of the call.
    const otherMayChat = await mayChat(other, id);
    return userMayChat && otherMayChat;
});

Pravilo se izvršava za onoga tko zove, i ponovno za pozvanoga kad se javi. Zato blokiranje djeluje odmah: od trenutka kad jedan blokira drugoga, canMeet kaže ne, a sljedeći poziv bude odbijen.

2. Gdje se pravilo izvršava

Kad stranica zatraži da nazove ili da se javi, najprije pita poslužitelj same web-stranice, u route handleru:

import { currentUserId } from '@/lib/auth';
import { realtime } from '@/lib/realtime';

export async function POST(request: Request) {
    // JSON only, which a page of another site can't send here.
    if (!request.headers.get('content-type')?.includes('application/json')) {
        return new Response(null, { status: 415 });
    }
    const ask = await request.json();
    const user = await currentUserId();
    const pass = await realtime.authorizeCall(ask, user);
    return Response.json(pass);
}

currentUserId() je prijava same web-stranice, pa sesija ovdje radi kao na bilo kojoj stranici. Kad pravilo kaže da, stranica dobiva propusnicu potpisanu tajnim ključem aplikacije, a WordPlus Cloud uz nju zvoni drugoj osobi. Ruta odgovori u jednom kratkom zahtjevu, a upravo to serverless hosting radi dobro.

3. Zvonjava na svakoj stranici

Layout stranica za prijavljene korisnike spaja se jednom i renderira zaslon poziva uz same stranice:

'use client';

import '@wordplus/realtime-ui/calls.css';
import '@wordplus/realtime-ui/chat.css';
import { useRealtime } from '@wordplus/realtime/react';
import { CallScreen } from '@wordplus/realtime-ui/react';

export function Screens() {
    return <CallScreen rt={useRealtime()} />;
}

<Screens /> se nalazi unutar komponente RealtimeProvider u datoteci app/(app)/layout.tsx, pa poziv zvoni na bilo kojoj stranici koju član ima otvorenu, u svakoj kartici i na svakom uređaju, a prestaje zvoniti posvuda čim se član javi na jednom od njih. Zaslon poziva je onaj iz Better Messagesa, iscrtan u vlastitom React stablu web-stranice, pa do njega dopire njezin CSS.

4. Poziv u svom chatu

Na stranici za upoznavanje poziv pripada razgovoru. Chat na stranici člana smješta svoj poziv u sebe, pokraj poruka:

<Chat
    rt={useRealtime()}
    room={room}
    to={to}
    name={name}
    avatar={avatar}
    call
    startCall={start}
/>

Njegova gornja traka prikazuje drugu osobu s gumbima za poziv. Gumb Video na kartici u katalogu otvara chat s pozivom koji već počinje (startCall), pa spoj počinje ondje gdje si njih dvoje mogu i pisati.

Chat je samo jedno od mjesta za poziv. CallButton pokreće poziv s bilo kojeg mjesta, CallSpot prikazuje pozive u dijelu stranice koji odaberete, a useCalls vam daje svaki poziv kako biste iscrtali vlastiti zaslon.

Što dobivate uz to

• Jedan upit. Preglednik jednom traži dopuštenje za kameru i mikrofon zajedno.
• Uvijek se spoji. Poziv između dviju osoba ide izravno između njihovih preglednika kad može, preko releja na portovima koje svaka mreža ostavlja otvorenima kad ne može, a preko medijskih poslužitelja kad ni releji ne mogu doprijeti, i prelazi s jednog puta na drugi bez prekidanja, šifriran na svakom putu.
• Ne prekida se. Veza, a s njom i poziv, ostaje dok član prelazi sa stranice na stranicu.
• Grupni pozivi na istom API-ju. Soba s više ljudi radi na medijskim poslužiteljima, s vlastitim gumbom i zaslonom za grupni poziv (videopozivi za aplikacije).

Isprobajte, a zatim izgradite svoje

U demu uživo svih jedanaest osoba na jedan dan pripada samo vama, pa što god ondje napišete i koga god nazovete, nitko drugi to ne vidi. Ispod svake stranice ploča How this page works prikazuje kod koji je pokreće, korak po korak, s vrijednostima stranice koju imate otvorenu.

Vodič kroz stranicu za upoznavanje izgrađuje cijelu web-stranicu i u cijelosti donosi svaku datoteku njezina dijela za rad u stvarnom vremenu, a Pozivi u Next.js-u pokazuju svaki način da pokrenete poziv u vlastitoj aplikaciji.

WordPlus Cloud for Apps ima cijenu prema istodobnim vezama, od 1.000 naviše, uz mjesečnu ili godišnju naplatu. Pogledajte što nudi aplikacijama ili cijene za aplikacije. Pitanja o vašoj integraciji? Pišite nam.