Cara mendapatkan streaming webcam dengan rasio aspek 1:1 dan resolusi maksimum yang tersedia

Pada dasarnya pertanyaannya ada di judul. Ini tentang fungsi WebRTC dan getUserMedia. Pertanyaan serupa ada di sini: Cara menyimpannya Video dengan rasio aspek 1:1 sepanjang waktu di WebRTC. Namun dalam kasus saya, saya perlu merekam streaming menggunakan MediaRecorder, memotong elemen video dengan css saja tidak cukup. Saya agak bingung tentang batasan getUserMedia. Ada parameter aspekRatio, tetapi saya tidak mengatur cara mencapai hasil yang diperlukan dengannya. Yang berhasil bagi saya adalah mendefinisikan batasan dengan cara seperti itu:

const constraints = {
  audio: true,
  video: {
    width: { exact: 720 },
  }
};

Tapi itu tidak menentukan resolusi maksimal secara otomatis. Apakah Anda punya ide bagaimana melakukannya dengan cara yang cerdas?


javascript webrtc getusermedia
person Vitalii Ivanov    schedule 19.06.2017    source sumber
comment
Kemungkinan duplikat Cara menyimpan 1: 1 video rasio aspek sepanjang waktu di WebRTC   -  person jib    schedule 19.06.2017
comment
@jib ya, pertanyaan itu serupa, tetapi saya memerlukan aliran untuk merekamnya menggunakan MediaRecorder. Memotong elemen video dengan css saja tidak cukup.   -  person Vitalii Ivanov    schedule 19.06.2017
comment
aspectRatio belum diterapkan di Chrome atau Firefox. Namun, sepertinya Anda mengharapkan getUserMedia() mengubah skala keluaran kamera untuk Anda. Tidak semua browser melakukan hal ini, malah membiarkan Anda menemukan mode asli kamera Anda, jadi ini mungkin gagal karena OverconstrainedError.   -  person jib    schedule 20.06.2017
comment
Tampaknya aspectRatio sekarang berfungsi di Chrome terbaru, meskipun saya tidak dapat menemukan informasi apa pun tentang itu. Namun, setidaknya batasan min dan max berhasil bagi saya di Chrome.   -  person Piet    schedule 26.02.2018

Jawaban (1)


arrow_upward
5
arrow_downward

Tidak semua kamera mendukung semua rasio aspek. 1:1 tentu saja merupakan rasio aspek yang aneh.

Yang harus Anda lakukan adalah melakukan cropping sendiri dan membuat aliran sendiri. Anda dapat melakukan ini dengan menyetel srcObject video ke getUserMediaStream, lalu setiap frame (gunakan requestAnimationFrame()), gambar video tersebut ke kanvas, dengan cara apa pun yang Anda inginkan. Dari sana, gunakan CanvasCaptureMediaStream untuk mengeluarkan kembali video yang telah diedit sebagai streaming yang dapat Anda gunakan dalam panggilan WebRTC Anda.

person Brad    schedule 19.06.2017