Hari ini saya akan berbicara tentang modul
Hardware di SDK Web Voximplant. Modul ini menggantikan sistem manajemen perangkat audio dan video yang lama. Tapi pertama-tama, sedikit tentang manajemen perangkat di tumpukan WebRTC dan mengapa semua ini diperlukan.
Jarang, pengguna akhir memiliki beberapa mikrofon. Atau ada beberapa speaker: misalnya, speaker biasa dan headphone bluetooth; atau speaker telepon dan speaker ponsel untuk smartphone.
Tetapi dua kamera di dunia modern sangat umum. Pada tablet dan ponsel: reguler dan frontal. Pada laptop: internal dan eksternal yang lebih baik. Dan seterusnya dan seterusnya. Pengguna bisa sangat marah jika, secara default, perangkat yang salah dipilih dan ia tidak dapat mengubahnya dengan cara apa pun. Ini adalah aplikasi manajemen media pertama di WebRTC.
Aplikasi kedua adalah penyempurnaan audio dan video. Semua jenis pembatalan gema, pengurangan noise, pengaturan resolusi video, frame rate, white balance dan hal-hal lain yang didukung browser Anda secara khusus.
Sebelumnya, untuk manajemen perangkat, kami menyediakan antarmuka
kendala , dan pengembang harus menetapkan semua batasan dan parameter permintaan media secara independen. Berikut adalah contoh kecil dari permintaan audio dan video yang sepenuhnya disesuaikan:
const myConstraints = { audio:{ sampleSize: 16, channelCount: 2, noiseSuppression: true, echoCancellation: false }, video:{ width: { min: 640, ideal: 1920, max: 1920 }, height: { min: 400, ideal: 1080 }, aspectRatio: 1.777777778, frameRate: { max: 30 }, facingMode: { exact: "user" } } };
Ini memberikan fleksibilitas luar biasa saat mengatur audio dan video, tetapi selalu ada "TAPI". Seperti yang ditunjukkan oleh statistik survei dukungan, pelanggan pada dasarnya tidak menggunakan opsi ini, karena kami adalah platform yang ramah dan kami membiasakan pengguna dengan kesederhanaan. Mereka yang berani menggunakan ini, sering menembak diri mereka sendiri tepat di atas lutut, karena browser memiliki sedikit ketidakcocokan pada saat ini dalam ruang.
Sekarang jelas bagaimana kita sampai pada kehidupan seperti itu. Sudah waktunya untuk turun ke bisnis: melihat modul dengan cepat; untuk bacaan terperinci, saya akan meninggalkan tautan ke
dokumentasi di situs web kami .
Titik masuk ke modul ini adalah
StreamManager . Secara historis, [gambar dengan elephant.jpg], bahwa banyak bagian SDK Web kami adalah singleton, dan kelas ini tidak terkecuali: Anda bisa mendapatkan instance menggunakan fungsi
get () . Ada banyak alasan untuk ini, tetapi lebih banyak tentang itu di waktu lain, mungkin.
const streamManager = VoxImplant.Hardware.StreamManager.get();
Menggunakan StreamManager, Anda dapat mengaktifkan atau menonaktifkan video lokal dan
untuk mendapatkan aliran media untuknya - pada kenyataannya, itu saja. Titik masuknya tidak terlalu besar ketika melihat antarmuka eksternal.
(async () => { try{ console.log('[WebSDK] '); await streamManager.showLocalVideo(); console.log('[WebSDK] '); await streamManager.hideLocalVideo(); console.log('[WebSDK] !'); } catch(e){ console.log('[WebSDK] - . , ?!'); console.error(e); } })();
Fakta menarik tentang video lokal: video lokal tidak ditransmisikan ke lawan bicara dengan cara apa pun. Misalnya, pengguna dapat ditunjukkan gambar dalam HD, dan mengirimkan 320 * 240, atau sebaliknya, jika video lokal disembunyikan di sudut. Di bawah ini adalah tentang cara menghidupkan trik seperti itu.
Ada 3 acara di StreamManager:
- DevicesUpdated - dipanggil ketika pengguna telah menghubungkan / memutus mikrofon atau kamera;
- MediaRendererAdded - menambahkan video lokal atau tangkapan layar dengan pratinjau;
- MediaRendererRemoved - menghapus video atau tangkapan layar lokal dengan pratinjau.
Menggunakan fungsi getLocalMediaRenderers () , penting untuk mendapatkan tautan ke elemen DOM dengan video lokal jika Anda belum menyimpan objek ke diri Anda sendiri.
streamManager.getLocalMediaRenderers().forEach(renderer => { cont elementOfDOM = renderer.element; elementOfDOM.addEventListener('on42',doSomething,true); });
Mari kita beralih ke pengaturan video (yang paling enak, tonton tanganmu). Tiba-tiba
CameraManager . Sekali lagi, singleton dengan fungsi
get () yang membosankan:
const cameraManager= VoxImplant.Hardware.CameraManager.get();
Pengaturan apa yang bisa kita atur sama sekali? Mari kita lihat antarmuka
CameraParams :
3 opsi lain bertanggung jawab untuk ukuran video:
Mari kita kembali ke CameraManager dan menerapkan pengaturan! Di dalam ada 2 getter dan 2 setter pengaturan:
Semua itu dengan "Default" adalah pengaturan "default", seperti yang Anda duga. Mereka akan digunakan untuk menerima video lokal, untuk panggilan masuk dan keluar baru.
Dan sekarang fokus yang dijanjikan:
console.log('[WebSDK] .'); await cameraManager.setDefaultVideoSettings({ frameWidth:320, frameHeight:240, frameRate:12 }); await streamManager.showLocalVideo(); cameraManager.setDefaultVideoSettings({ frameWidth:640, frameHeight:480, frameRate:25 }); const newCall = client.call('mySchoolFriendBoris');
Memasangkan dengan Nama panggilan sedikit lebih rumit. Fungsi-fungsi ini dirancang untuk menerima dan mengatur preferensi selama panggilan yang sedang berlangsung. Saat mengubah pengaturan, acara
CallEvents.Updated akan
terjadi .
console.log('[WebSDK] .'); cameraManager.setCallVideoSettings(newCall,{ frameWidth:320, frameHeight:240, frameRate:12 }); newCall.on(VoxImplant.CallEvents.Updated,e => { console.log('[WebSDK] .'); });
Dua fungsi CameraManager tetap ada. Sangat kuat tapi canggih. Enum
VideoQuality memiliki tiga arti menarik:
- VIDEO_QUALITY_HIGH;
- VIDEO_QUALITY_MEDIUM;
- VIDEO_QUALITY_LOW.
Sebuah pertanyaan logis: "Igor! Jika SDK Web mengetahui kualitas terbaik, terburuk, dan rata-rata, lalu mengapa tidak ada metode untuk mendaftarkan resolusi yang didukung oleh webcam?! ” Tsimes tidak tahu.
Dan untuk mengetahuinya, Anda perlu memilah-milah semua izin yang mungkin. Apa yang berhasil saya dapatkan didukung. Kedengarannya cukup sederhana, tetapi sebenarnya butuh beberapa menit. Karena itu, kami tidak dapat melakukan ini dalam inisialisasi WebSDK, misalnya. Sehingga Anda dapat melakukan ini pada saat yang paling nyaman bagi pengguna - jika Anda ingin melakukan ini - dan ada
testResolutions . Akan lebih baik untuk menyimpan hasil dari fungsi fungsi di localStorage dan kemudian memuatnya melalui
loadResolutionTestResult ketika halaman
dimuat ulang:
console.log('[WebSDK] , WebSDK .'); const testResults = await cameraManager.testResolutions(); localStorage.setItem('defaultCameraResolutionTestResults',JSON.stringify(testResolutions));
Terakhir,
AudioDeviceManager . Kelasnya sangat mirip dengan
CameraManager . Hanya untuk suara, pengaturan Anda tercermin dalam antarmuka
AudioParams :
- ketat - benar bertanggung jawab untuk secara ketat mengikuti kehendak Anda;
- inputId - pemilihan mikrofon. Daftar semua mikrofon dapat diperoleh melalui AudioDeviceManager.getInputDevices ;
- outputId - pilihan speaker. Opsi ini hanya berfungsi di Chrome, browser lain akan mengabaikannya. Anda bisa mendapatkan daftar perangkat melalui getOutputDevices ;
- noiseSuppression - pengurangan noise. Secara default, pengurangan noise diaktifkan dan berfungsi dengan baik. Tetapi hilangnya sebagian suara dapat terjadi jika pengguna bekerja di ruangan tempat mereka banyak berbicara, misalnya, di pusat panggilan. Filter mungkin hanya membuat sedikit kesalahan dan memotong kelebihannya. Jika Anda memiliki masalah seperti ini, ada baiknya mengatur opsi ini menjadi false ;
- echoCancellation - menghapus gema dari mikrofon. Itu harus dinonaktifkan bersama dengan opsi sebelumnya;
- autoGainControl - termasuk mekanisme untuk secara otomatis menyesuaikan penguatan mikrofon yang tertanam dalam sistem operasi. Opsi ini tidak memiliki efek samping, tetapi operasinya sangat tergantung pada sistem operasi dan perangkat keras. Kadang-kadang itu mungkin tidak berfungsi dan hasilnya akan konstan, yang juga bagus.