Buat ruang sembang video masa nyata dengan WebRTC & Twilio

Artikel ini mendapat manfaat daripada Kajian Peer oleh Wern Ancheta dan Tim Sevien. Terima kasih kepada pengulas rakan sebaya SitePoint untuk meningkatkan kandungan kami!

Membina artikel saya sebelumnya, "The Dawn of Webrtc," yang menunjukkan aplikasi gerai foto mudah, artikel ini membimbing anda melalui membuat bilik sembang video berfungsi menggunakan API Komunikasi Masa Nyata Web (WebRTC).

WebRTC memberi kuasa kepada pemaju web dan mudah alih untuk membina aplikasi video dan audio definisi tinggi dengan API yang mudah. Pelbagai industri, termasuk penjagaan kesihatan, pendidikan, perkhidmatan pelanggan, dan media sosial, memanfaatkan WebRTC untuk aplikasi generasi akan datang. Anda mungkin menggunakan WebRTC tanpa disedari melalui platform seperti Facebook Messenger, WhatsApp, dan Snapchat.

Titik pembelajaran utama:

Mengintegrasikan video dan audio masa nyata ke dalam aplikasi anda menggunakan API video yang boleh diprogramkan Twilio, meningkatkan penglibatan pengguna.
Sediakan ruang sembang video dengan Twilio dan Firebase untuk Pengurusan Pengguna.
Pastikan keserasian dengan pelayar yang disokong oleh WEBRTC (Chrome, Firefox, Opera) dan melaksanakan penyulitan SSL untuk komunikasi yang selamat.
Gunakan kod PHP dan JavaScript yang disediakan untuk Pengesahan Pengguna, Jemputan Sembang, dan Pengurusan Sambungan.
Membangunkan aplikasi sembang video masa nyata yang mantap dengan kemas kini status pengguna dan keupayaan sambungan/pemotongan dinamik.

Streamlining Development dengan Twilio

WebRTC dan teknologi yang serupa merevolusikan komunikasi. Pemaju boleh dengan mudah mengintegrasikan ciri -ciri komunikasi yang dipertingkatkan ke dalam sebarang aplikasi. Sama seperti platform utama seperti Facebook, Snapchat, Tango, dan WhatsApp telah menggabungkan audio dan video secara langsung, begitu juga anda.

Proses ini mengejutkan mudah, cepat, dan kos efektif. Sifat sumber terbuka Google WebRTC menghapuskan yuran pelesenan. Walau bagaimanapun, menavigasi komponen WebRTC seperti Turn/Stun, Isyarat, dan MCU boleh mencabar.

Banyak penyedia PaaS menawarkan penyelesaian WebRTC. Berdasarkan pengalaman kami di Blacc Spot Media, kami mengesyorkan Twilio untuk keberkesanannya yang terbukti. Artikel ini memberi tumpuan kepada platform mereka.

Twilio Video: alat yang berkuasa

Twilio menawarkan suite alat komunikasi melalui API dan SDK yang mudah. Video yang boleh diprogramkan mereka membolehkan pengalaman video dan audio HD berbilang pihak dalam aplikasi web dan mudah alih. Twilio adalah pemimpin dalam ruang WebRTC, terus meningkatkan penawarannya. Peningkatan masa depan termasuk perkongsian skrin mudah alih dan keupayaan berbilang pihak yang lebih baik.

Membina ruang sembang

Demo ini memerlukan akaun Twilio (mendaftar untuk akaun percuma dan pilih "Video Programmable"). Anda perlukan:

Credential	Description
Twilio Account SID	Your main Twilio account identifier (found on your dashboard).
Twilio Video Config SID	Enables video capabilities in the access token (generate one on your dashboard).
API Key	Used for authentication (generate one on your dashboard).
API Secret	Used for authentication (generate one on your dashboard).

Kami juga akan menggunakan Firebase untuk Pengurusan Pengguna. (Daftar untuk akaun percuma jika diperlukan). Selepas persediaan, anda boleh menggunakan demo ini ke pelayan.

Demo

Kod ini boleh didapati di GitHub, dan demo langsung dihoskan di Blacc Spot Media. Ingatlah bahawa WebRTC kini menyokong Google Chrome, Mozilla Firefox, dan Opera di desktop. Semak keserasian penyemak imbas di bolehkah saya menggunakan rtcpeerconnection?

Untuk penyebaran pelayan (Chrome 47 dan kemudian memerlukan SSL), gunakan mari enkripsi untuk sijil SSL percuma. Tutorial Ocean Digital boleh membantu dengan pemasangan.

kod php (token.php)

Skrip PHP ini mengendalikan pengesahan Twilio dan token.

<code class="language-php">// ADD TWILIO REQUIRED LIBRARIES
require_once('twilio/Services/Twilio.php');

// TWILIO CREDENTIALS
$TWILIO_ACCOUNT_SID = 'your account sid here';
$TWILIO_CONFIGURATION_SID = 'your configuration sid here';
$TWILIO_API_KEY = 'your API key here';
$TWILIO_API_SECRET = 'your API secret here';

// CREATE TWILIO TOKEN
$id = $_GET['id'];

$token = new Services_Twilio_AccessToken(
    $TWILIO_ACCOUNT_SID,
    $TWILIO_API_KEY,
    $TWILIO_API_SECRET,
    3600,
    $id
);

$grant = new Services_Twilio_Auth_ConversationsGrant();
$grant->setConfigurationProfileSid($TWILIO_CONFIGURATION_SID);
$token->addGrant($grant);

echo json_encode(array(
    'id'    => $id,
    'token' => $token->toJWT(),
));</code>

kod html (index.html)

HTML ini menyediakan struktur asas untuk antara muka bilik sembang.

<code class="language-html"><div class="m-content">
    <h1>Quick Start Your WebRTC Project with Twilio</h1>
    <div class="start">
        <input type="text" id="id" name="id" value="" placeholder="Enter your name to join the chat">
        <button id="start">Join Chat Room</button>
        <button id="disconnect" class="b-disconnect hide">Disconnect from Chat</button>
        <div class="status">
            <strong>MY STATUS:</strong> <span id="status">DISCONNECTED</span>
        </div>
    </div>
    <div class="local">
        <div id="lstream"></div>
    </div>
    <div class="remote">
        <div id="rstream"></div>
    </div>
    <div class="users-list"></div>
    <div class="logs"></div>
</div>




</code>

kod javascript (app.js)

JavaScript ini mengendalikan fungsi WebRTC, interaksi pengguna, dan integrasi Firebase. (Nota: Ini adalah versi yang sangat dipendekkan untuk keringkasan. Kod penuh boleh didapati di GitHub.)

<code class="language-javascript">// ... (WebRTC browser check, tlog function, etc.) ...

$('#start').on('click', function() {
  // ... (Ajax request to token.php, Twilio client setup) ...
});

// ... (clientConnected, firebaseConnect, addParticipant functions) ...

function startConversation() {
  // ... (Get user media, attach to #lstream) ...
}

// ... (conversationInvite, conversationStarted, participantConnected, participantDisconnected functions) ...

$('#disconnect').on('click', function() {
  // ... (Firebase disconnect, stop conversation, reset UI) ...
});

// ... (stopConversation function) ...</code>

Kod JavaScript lengkap, termasuk fungsi yang ditinggalkan, boleh didapati di repositori GitHub yang dikaitkan dalam artikel asal.

Kesimpulan

WebRTC sedang mengubah komunikasi. Twilio dan Firebase memudahkan pembangunan aplikasi komunikasi masa nyata. Mula membina penyelesaian inovatif anda sendiri hari ini! Untuk lebih banyak tutorial dan sumber WebRTC, lawati WebRTC.Tutorial (apabila dilancarkan).

(bahagian Soalan Lazim dari input asal telah ditinggalkan kerana kekangan panjang, tetapi ia dapat dengan mudah diintegrasikan semula ke dalam output yang disemak ini.)

Atas ialah kandungan terperinci Buat ruang sembang video masa nyata dengan WebRTC & Twilio. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!