Geekly articles weekly

Streaming panggilan video RTMP


Saat ini, platform streaming berada di puncak popularitas, karena jutaan orang berbakat secara teratur berbagi pengetahuan mereka - baca, mereka menggunakan streaming secara maksimal. Saat pasar ini berkembang, ada banyak aplikasi yang dapat melakukan streaming video langsung menggunakan smartphone atau kamera laptop. Mungkin Anda juga ingin memperkenalkan fungsionalitas tersebut ke dalam aplikasi Anda; jika demikian, maka kami harap - silakan sekarang Voximplant memungkinkan Anda untuk meneruskan panggilan video melalui RTMP ke CDN yang mendukung protokol ini.

Fungsi ini dimungkinkan oleh modul Voxengine baru - StreamingAgent . Di bawah potongan Anda sedang menunggu 5 langkah untuk mengkonfigurasi integrasi ini, selamat datang!

Skema



Panggilan video dari aplikasi seluler / web atau SIP tiba di cloud kami, yang mengarahkannya ke CDN streaming. Pada gilirannya, CDN mengirimkan stream audio dan video ke pengguna akhir - seperti biasanya. Harap dicatat bahwa RTMP hanya mendukung H.264, jadi sangat penting untuk secara eksplisit menentukan codec ini saat streaming.

Anda akan membutuhkannya


  • akun pada layanan streaming, misalnya, Kedutan atau Youtube ;
  • Akun Voximplant. Jika Anda tidak memilikinya, maka pendaftaran tinggal di sini ;
  • Aplikasi Voximplant, serta skrip, aturan, dan satu pengguna. Kami akan membuat semua ini dalam tutorial ini;
  • klien web untuk merekam video dan audio - kami akan menggunakan demo video kami

1. Pengaturan streaming


Pertama-tama, Anda perlu mendapatkan nilai dari dua parameter, yang kami gunakan dalam skrip cloud - stream name / key dan URL server . Berikut ini menunjukkan cara mendapatkan nilai-nilai ini menggunakan Twitch dan YouTube sebagai contoh.

Kedutan


Masuk ke akun Anda, klik gambar profil di sudut kanan atas dan pilih Produser Video.



Di bagian Pengaturan, pilih Saluran, lalu klik Salin di bagian atas halaman untuk mendapatkan Kunci Aliran Utama Anda. Harap dicatat bahwa kunci hanya tersedia dengan otentikasi dua faktor yang diaktifkan. Rekatkan nilai ini ke editor teks Anda atau biarkan halaman ini terbuka untuk menyalin nilai nanti.

Untuk menemukan url server, buka halaman stream.twitch.tv/ingests , pilih salah satu server yang direkomendasikan dan salin tanpa slash terakhir, misalnya: rtmp: //live-sfo.twitch.tv/app

YouTube


Masuk ke akun Anda, klik avatar di sudut kanan atas dan pilih YouTube Studio (beta).



Jika Anda tidak memiliki saluran YouTube, dialog akan muncul tentang membuat saluran. Klik Buat saluran dan Anda akan melihat dasbor saluran yang dibuat dengan pemberitahuan bahwa streaming akan dimungkinkan dalam 24 jam.



Saat di YouTube Studio, buka Fitur lainnya -> Streaming langsung sekarang melalui menu di sebelah kiri. Halaman baru terbuka, di bagian bawahnya adalah blok pengaturan Encoder. Dari sini, Anda perlu mengambil URL Server dan nilai Stream nama / kunci (atau membiarkan halaman terbuka).



2. Pengaturan VOXIMPLANT


Sekarang Anda perlu melakukan pengaturan dari sisi Voximplant. Pertama masuk ke akun Anda: https://manage.voximplant.com/auth . Di menu di sebelah kiri, klik "Aplikasi", lalu "Aplikasi Baru" dan buat aplikasi yang disebut streaming. Masuk ke aplikasi baru, beralih ke tab "Scripts" untuk membuat skrip startStream dengan kode ini (jangan lupa untuk mengganti nilai dari langkah sebelumnya di baris 8 dan 9):

require(Modules.StreamingAgent); VoxEngine.setVideoCodec("H264"); VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 }); e.call.sendMediaTo(streaming); streaming.addEventListener(StreamingAgentEvents.Connected, function (e) { Logger.write("LOG: StreamingAgentEvents.Connected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Disconnected, function (e) { Logger.write("LOG: StreamingAgentEvents.Disconnected: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.ConnectionFailed, function (e) { Logger.write("LOG: StreamingAgentEvents.ConnectionFailed: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.Error, function (e) { Logger.write("LOG: StreamingAgentEvents.Error: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStarted, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStarted: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamError, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamError: " + e.reason); }); streaming.addEventListener(StreamingAgentEvents.StreamStopped, function (e) { Logger.write("LOG: StreamingAgentEvents.StreamStopped: " + e.reason); }); e.call.answer(); e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); }); });

Ini adalah skrip sederhana yang memulai aliran dan juga memantau semua kemungkinannya, seperti: Terhubung, Koneksi gagal, StreamStarted, dll - Detail skrip akan sedikit lebih rendah. Sekarang Anda harus pergi ke tab "Routing" dari aplikasi Anda dan klik "Aturan Baru". Beri nama streamRule, tentukan skrip startStream dan biarkan mask default (. *).


Hal terakhir yang harus dilakukan pada tahap ini adalah membuat pengguna. Buka tab "Pengguna", klik "Buat Pengguna", tentukan nama (misalnya, pengguna1) dan kata sandi, lalu klik "Buat". Kami membutuhkan pasangan nama pengguna / kata sandi ini untuk otentikasi di klien web.


Konfigurasi Voximplant selesai, tetapi sebelum kita beralih ke klien web, saya mengusulkan untuk memahami bagaimana modul StreamingAgent bekerja dalam skenario kami.

3. Skenario


Modul StreamingAgent memungkinkan pengembang untuk meluncurkan stream RTMP ke platform stimulasi populer. Untuk menggunakan fungsionalitas modul, kita harus menghubungkannya di bagian paling awal dari skrip:

 require(Modules.StreamingAgent);

Selanjutnya, Anda harus secara eksplisit menentukan codec yang akan digunakan saat streaming. Karena banyak platform (termasuk Kedutan dan YouTube) menggunakan RTMP, yang, pada gilirannya, mendukung H.264, inilah yang akan kami tunjukkan:

 VoxEngine.setVideoCodec("H264");

Jika codec tidak ditentukan, acara StreamingAgentEvents.StreamError dapat dimunculkan , berisi teks kesalahan:
 "Video codec mismatch. " + codecName + " granted, but should be H.264"

Kemudian kami menambahkan handler untuk acara CallAlerting untuk menangani panggilan video dari klien web (ya, kami akan segera melakukannya). Pertama-tama, kita akan menambahkan panggilan ke metode createStreamingAgent ke handler . Metode ini memiliki parameter berikut, kebanyakan diperlukan, opsional ditandai secara terpisah:

  • protokol - sejauh ini hanya RTMP yang didukung;
  • url - URL server, lihat langkah 1;
  • streamName - nama / kunci stream, lihat langkah 1;
  • applicationName (opsional) - bagian dari streamName, mis. live2. Gunakan opsi ini jika platform yang dipilih membutuhkannya;
  • keyframeInterval (opsional, detik) - seberapa sering bingkai kunci akan dihasilkan dalam aliran. Jika tidak ditentukan, nilai standarnya adalah 2.

Dalam daftar skrip di atas, panggilan ke metode createStreamingAgent terlihat seperti ini:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://live-sfo.twitch.tv/app", streamName: "live_********************", keyframeInterval: 4 });

Tapi kita bisa menghilangkan keyframeInterval dan menggunakan applicationName, seperti ini:

 VoxEngine.addEventListener(AppEvents.CallAlerting, function (e) { const streaming = VoxImplant.createStreamingAgent({ protocol: "RTMP", url: "rtmp://a.rtmp.youtube.com/", applicationName: "live2", streamName: "somename" });

Setelah objek streaming dibuat, skrip melanjutkan untuk memproses panggilan di dalam handler. Langkah selanjutnya adalah mengarahkan aliran video yang masuk dari klien web ke objek streaming yang dibuat:

 e.call.sendMediaTo(streaming);

Kemudian kami menggunakan semua acara streaming yang mungkin untuk debugging: penangan tidak melakukan apa-apa selain mengirim informasi ke log sesi Voximplant. Anda tidak dapat menggunakan kode ini jika Anda mau.

Setelah memproses peristiwa, skrip menjawab panggilan masuk:

 e.call.answer();

Akhirnya, kita harus menangani akhir streaming dengan benar ketika klien web berhenti mengirim video. Secara formal, kami tidak dapat menggunakan penangan ini juga, tetapi sesi akan berakhir hanya setelah 60 detik setelah video berhenti dikirim. Tidak ada artinya dalam ekspektasi ini, oleh karena itu lebih baik untuk mengakhiri sesi, mulai dari acara Terputus :

 e.call.addEventListener(CallEvents.Disconnected, function (e) { Logger.write("LOG: terminating in 6 secs"); setTimeout(VoxEngine.terminate, 6000); });

Memahami logika skenario, kami siap untuk memulai - yang terakhir - bagian dari konfigurasi kami.

4. Klien web


Klon atau unduh demo videochat kami. Kemudian pergi ke folder repositori dan buka file WebApp / JS / app.js dalam editor teks / IDE. Ubah nama aplikasi pada baris 5 dan simpan file:


Sebenarnya itu saja.

5. Mulai streaming


Anda perlu menjalankan folder WebApp secara lokal atau di server web Anda. Untuk berjalan secara lokal, Anda dapat menggunakan utilitas server langsung atau aplikasi Server Web untuk Chrome . Saat memulai klien web, Anda harus memberikannya nama akun Voximplant Anda, misalnya:
  http://127.0.0.1:8080/index.html#accname=johngalt


Setelah meluncurkan klien, masukkan pasangan kata sandi masuk dari langkah 2:


Masukkan karakter yang diatur di sebelah tanda @ dan tekan Panggil. Jika semuanya dilakukan dengan benar, aliran Anda akan segera dimulai :) Streaming yang sukses dan pengembangan produktif untuk Anda!

Source: https://habr.com/ru/post/id472402/

More articles:


All Articles