Membina aplikasi sembang video WebRTC dengan SimpleWebrtc

Bina aplikasi sembang video secara langsung berdasarkan SimpleWebrtc

Buku ini "6 JavaScript Projects" mengandungi artikel ini, yang bertujuan untuk membantu anda mendapatkan wawasan tentang pembangunan JavaScript moden. Dengan kebangkitan WebRTC dan keupayaan penyemak imbas yang dipertingkatkan untuk mengendalikan komunikasi titik ke titik masa nyata, membina aplikasi masa nyata lebih mudah dari sebelumnya. Tutorial ini akan meneroka SimpleWebRTC dan bagaimana ia dapat memudahkan kerja kami semasa melaksanakan WebRTC. Sepanjang proses ini, kami akan membina aplikasi sembang video WebRTC dengan keupayaan pemesejan.

Jika anda memerlukan pengetahuan latar belakang mengenai WebRTC dan komunikasi peer-to-peer, disarankan untuk membaca "Dawn of Webrtc" dan "A Beginner of GetUsermedia API".

mata teras

SimpleWebRTC adalah perpustakaan JavaScript yang memudahkan pelaksanaan WebRTC dan menjadikannya lebih mudah untuk membuat aplikasi video dan audio masa nyata yang boleh dijalankan pada pelayar yang berbeza tanpa menulis kod khusus pelayar.
Tutorial ini menunjukkan cara membina aplikasi sembang video menggunakan SimpleWEBRTC, yang melibatkan penubuhan aplikasi halaman tunggal pada pelayan Express dan memerlukan Node.js dan NPM untuk Pengurusan Ketergantungan.
Ketergantungan utama termasuk SimpleWEBRTC, CSS UI semantik untuk tetapan gaya, jQuery untuk operasi DOM, hendal untuk templat, dan menyatakan sebagai pelayan web.
Aplikasi ini menyokong membuat dan menyertai bilik sembang, menghantar mesej, dan memproses pelbagai aliran video, menunjukkan keupayaan SimpleWebrTC untuk menguruskan senario komunikasi point-to-point yang kompleks.
Aplikasi boleh dengan mudah digunakan menggunakan alat CLI ZEIT, yang membolehkan persediaan cepat dan perkongsian awam aplikasi.
• now Tutorial ini menyediakan panduan yang komprehensif mengenai cara membina aplikasi komunikasi masa nyata yang kaya dengan ciri-ciri yang menggunakan SimpleWebRTC, yang menonjolkan kemudahan penggunaan dan keserasian silang pelayar perpustakaan.

Apa itu SimpleWebrtc?

Adalah penting untuk memahami alat utama yang akan kami gunakan sebelum meneruskan. SimpleWebRTC adalah perpustakaan JavaScript yang memudahkan data point-to-point WebRTC, video dan panggilan audio.

SimpleWebRTC bertindak sebagai pembalut untuk pelaksanaan WebRTC penyemak imbas. Seperti yang anda ketahui, vendor penyemak imbas tidak bersetuju sepenuhnya dengan pendekatan tunggal untuk melaksanakan fungsi yang berbeza, yang bermaksud bahawa setiap pelayar mempunyai pelaksanaan WebRTC yang berbeza. Sebagai pemaju, anda perlu menulis kod yang berbeza untuk setiap penyemak imbas yang anda merancang untuk menyokong. SimpleWebrt bertindak sebagai pembungkus untuk kod ini. API terdedahnya mudah digunakan dan difahami, yang menjadikannya pilihan yang sangat baik untuk melaksanakan WebRTC silang pelayar.

membina aplikasi sembang video WebRTC

Sudah tiba masanya untuk membina aplikasi anda. Kami akan membina satu aplikasi halaman yang berjalan di pelayan Express.

Sila ambil perhatian bahawa anda boleh memuat turun kod untuk tutorial ini dari repositori GitHub kami. Untuk menjalankannya atau mengikutinya di rumah, anda perlu memasang nod dan npm. Sekiranya anda tidak biasa dengan ini atau memerlukan bantuan pemasangan, sila lihat tutorial sebelumnya:

• Pasang pelbagai versi node.js menggunakan nvm
• NPM MELAKUKAN Panduan Panduan Pakej Node

Anda juga memerlukan komputer atau komputer riba dengan webcam. Jika tidak, anda memerlukan webcam USB yang boleh disambungkan ke bahagian atas monitor. Anda mungkin memerlukan rakan atau peranti kedua untuk menguji sambungan jauh.

Dependencies

kami akan menggunakan kebergantungan berikut untuk membina projek kami:

• SimpleWebRTC - Perpustakaan WebRTC
• semantik UI CSS - Rangka kerja CSS yang elegan
• jQuery - Digunakan untuk memilih elemen dan pemprosesan acara pada halaman.
• hendal - Perpustakaan template JavaScript yang akan kami gunakan untuk menghasilkan HTML untuk mesej
• Express - NodeJS Server.

Tetapan Projek

pergi ke ruang kerja anda dan buat folder yang dipanggil simplewebrtc-messenger. Buka folder dalam vscode atau editor kegemaran anda dan buat struktur fail dan folder berikut:

<code>simplewebrtc-messenger
├── public
│   ├── images
│   │   └── image.png
│   ├── index.html
│   └── js
│       └── app.js
├── README.md
└── server.js</code>

atau, jika anda lebih suka, anda boleh melakukan perkara yang sama melalui baris arahan:

<code>mkdir -p simplewebrtc-messenger/public/{images,js}
cd simplewebrtc-messenger
touch public/js/app.js public/index.html .gitignore README.md server.js</code>

buka README.md dan salin yang berikut:

<code># Simple WebRTC Messenger

A tutorial on building a WebRTC video chat app using SimpleWebRTC.</code>

Jika anda bercadang untuk menggunakan repositori git, tambahkan node_modules ke fail .gitignore. Gunakan arahan berikut untuk menghasilkan fail package.json:

<code>npm init -y</code>

anda harus mendapatkan output berikut:

{
  "name": "simplewebrtc-messenger",
  "version": "1.0.0",
  "description": "A tutorial on building a WebRTC video chat app using SimpleWebRTC.",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

mari pasang kebergantungan kita sekarang:

<code>npm install express handlebars jquery semantic-ui-css simplewebrtc</code>

Semasa pemasangan, salin kod ini ke server.js:

const express = require('express');

const app = express();
const port = 3000;

// 设置公共文件夹为根目录
app.use(express.static('public'));

// 从客户端提供对node_modules文件夹的访问
app.use('/scripts', express.static(`${__dirname}/node_modules/`));

// 将所有流量重定向到index.html
app.use((req, res) => res.sendFile(`${__dirname}/public/index.html`));

app.listen(port, () => {
  console.info('listening on %d', port);
});

Kod pelayan sangat standard. Cukup baca komen untuk melihat apa yang sedang berlaku.

Seterusnya, mari kita tetapkan fail public/index.html:

(kod index.html harus dimasukkan di sini, dan disebabkan oleh batasan ruang, ia ditinggalkan di sini. Sila rujuk teks asal untuk mendapatkan kod lengkap)

Seterusnya, mari kita tetapkan kod JavaScript pelanggan asas. Salin kod ini ke public/js/app.js:

window.addEventListener('load', () => {
  // 将所有客户端代码放在这里
});

Akhirnya, muat turun imej ini dari repositori GitHub kami dan simpan ke folder public/images.

sekarang kita boleh menjalankan aplikasi kita:

<code>npm start</code>

Buka URL dalam penyemak imbas anda localhost:3000, dan anda harus melihat yang berikut:

(imej hendaklah dimasukkan di sini, kerana batasan ruang, ditinggalkan di sini. Sila rujuk teks asal untuk mendapatkan gambar)

(kandungan berikut terus memproses segmen kod sama mengikut struktur teks asal. Oleh kerana batasan ruang, semua segmen dan gambar kod berikutnya ditinggalkan di sini. Sila rujuk teks asal untuk kod lengkap dan gambar.)

Kesimpulan

Dalam tutorial ini, anda belajar SimpleWebrtc dan cara menggunakannya untuk membuat aplikasi langsung. Khususnya, kami membuat aplikasi pemesejan yang membolehkan pengguna menghantar teks dan membuat panggilan video ke rakan -rakan jauh. SimpleWEBRTC adalah perpustakaan penyemak imbas yang hebat yang dapat dengan mudah melaksanakan WebRTC dalam aplikasi web.

Jangan lupa bahawa kod yang digunakan dalam tutorial ini boleh didapati di GitHub. Klon itu, buat sesuatu yang sejuk dan bersenang -senang!

(Bahagian FAQ ditinggalkan di sini, kerana batasan ruang, ia ditinggalkan di sini. Sila rujuk teks asal untuk kandungan FAQ yang lengkap.)

Atas ialah kandungan terperinci Membina aplikasi sembang video WebRTC dengan SimpleWebrtc. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!