Tangkapan layar di Chrome - bersiap-siap untuk getDisplayMedia


Toko Web Chrome telah memutuskan untuk melarang pemasangan ekstensi inline untuk Chrome. Ini terkait langsung dengan aplikasi WebRTC, karena sekarang Anda memerlukan ekstensi untuk tangkapan layar di Chrome. Akankah getDisplayMedia API datang untuk menyelamatkan?

Tangkapan layar di Chrome


Ketika fitur ini muncul di Chrome 33 , diperlukan ekstensi untuk berfungsi - untuk menyelesaikan masalah keamanan. Metode ini lebih baik daripada yang sebelumnya, ketika tangkapan layar disembunyikan di bawah bendera, karena situs yang meminta pengguna untuk mengaktifkan bendera ini ... Yang menyebabkan pesan keselamatan publik .

Chrome tidak banyak berubah sejak 2013. Persyaratan ekstensi menambah kesulitan pada proses berbagi, tetapi berkat instalasi inline , yang mempermudah masa pakai:

  • pengguna mengklik tombol untuk memulai tangkapan layar;
  • Aplikasi web menentukan bahwa Chrome sedang digunakan dan bahwa ekstensi yang diinginkan tidak diinstal;
  • aplikasi web memulai instalasi inline, berhasil menyelesaikan panggilan balik;
  • di Chrome, jendela pilihan muncul dengan tepat apa yang ingin dibagikan pengguna.

Detail implementasi dapat ditemukan di sini .

Kotak pilihan adalah elemen kunci di sini. Apakah aman menggunakannya tanpa jaringan Web Store?


Dalam hal ini, berbagi tab sangat membingungkan, karena melanggar prinsip kotak pasir untuk skrip "lintas asal".

Screenshot Firefox


Firefox memiliki pendekatan berbeda - daftar putih situs yang diizinkan menggunakan API. Untuk mendapatkan daftar ini, situs harus membuat permintaan ke Mozilla dan menunjukkan bahwa ia memiliki Ketentuan Layanan dan kebijakan privasi. Anda dapat mengubah daftar putih menggunakan ekstensi. Kebutuhan untuk daftar seperti itu menghilang dengan rilis Firefox 52, ketika sumber yang dikonfirmasi diizinkan untuk menggunakan tangkapan layar. API getDisplayMedia baru masih belum digunakan di sini , yang akan kita bicarakan segera, tetapi implementasinya hampir sama:

navigator.mediaDevices.getUserMedia({video: {mediaSource: 'screen'}})
.then(stream => {
// ,
videoElement.srcObject = stream;
}, error => {
console.log(" ", error);
});

Akibatnya, implementasinya akan diubah untuk memenuhi spesifikasi .

API getDisplayMedia


Konsorsium W3C bekerja untuk membakukan API tangkapan layar . Ini relatif sederhana dan berdasarkan pada janji, seperti getUserMedia :

// 1 Screen Capture API
navigator.getDisplayMedia({ video: true })
.then(stream => {
// ,
videoElement.srcObject = stream;
}, error => {
console.log(" ", error);
});
view raw example1-spec.js hosted with ❤ by GitHub

Microsoft EDGE telah meluncurkan tangkapan layar tahun ini. Skenario penggunaan dipikirkan dengan sangat baik, dengan penambahan bingkai kuning di sekitar area yang pengguna bagikan:


Tangkapan Layar Jendela di Tepi. Perhatikan bingkai kuning yang menyoroti apa yang sebenarnya dibagikan.

Waktu berubah, dan ekstensi Chrome bersamanya


Berbicara tentang pengalaman pengguna, ekstensi looks.in berfungsi seperti dijelaskan di atas dan memiliki lebih dari satu juta instalasi. Sebagian besar pengguna datang melalui pemasangan sebaris, dan ada banyak dari mereka yang tangkapan layar ekstensi di Toko Web Chrome belum diperbarui sejak ... mungkin tahun 2014.

Seperti yang dikatakan blog Toko Web Chrome , mereka sekarang memotong instalasi inline. Itu adalah kejutan besar, saya pertama kali mempelajarinya berkat masalah Chrome yang lama - untuk membuat tangkapan layar lebih mudah diakses (terima kasih kepada Wilhelm Wanecek untuk tipnya)

Jika saya mengerti dengan benar, ini akan mengarah pada pembukaan Toko Web Chrome di tab terpisah. Pada bagian dari aplikasi web, akan menjadi lebih sulit untuk menentukan kapan pengguna menginstal ekstensi, Anda harus menggunakan polling atau batas waktu. Ketentuan berikut ditunjukkan dalam pos:

  • Instalasi inline tidak akan tersedia untuk ekstensi baru mulai 12 Juni. Tanpa pemberitahuan sebelumnya;
  • untuk ekstensi yang sudah diterbitkan, instalasi inline akan tersedia hingga 12 September. Pemberitahuan di muka - tiga bulan sebelumnya.

Klaim


Pasti ada masalah di sini. Dan saya bahkan tidak berbicara tentang Google Hangouts / Meet, yang sepenuhnya menghindari kesulitan UX yang harus dihadapi semua orang dengan ekstensi bawaan. Orang-orang dari Chrome sudah memutar tangan mereka .

Saya ingin menerima beberapa berita dari tim Toko Web Chrome terlebih dahulu (surat itu tiba sekitar 24 jam setelah posting blog). Ekstensierge.in memiliki lebih dari satu juta pengguna, yang menjadikan ekstensi ini salah satu yang paling populer untuk tangkapan layar. Pengguna kami mempercayai situs kami, yaitu mereka memberi kami akses ke mikrofon dan kamera mereka. Menggunakan instalasi sebaris berdasarkan kepercayaan ini mungkin lebih aman daripada menginstal dari Toko Web Chrome. Kami juga beralih ke dukungan dari Web Store untuk menghapus salinan ilegal ekstensi, yang telah diatur berulang kali oleh ratusan pengguna.

Dan alangkah baiknya jika orang-orang dari Google memperingatkan kita.


Akun @webrtc menyebutkan niat untuk meluncurkan getDisplayMedia sebagai tanggapan terhadap perubahan kebijakan pemasangan inline.

Path untuk Chrome adalah rilis getDisplayMedia . "Niat untuk meluncurkan" diterbitkan tak lama setelah berita utama . Namun, mengingat siklus rilis Chrome, itu akan memakan waktu beberapa minggu. Ini adalah perubahan non-sepele dalam ketentuan keamanan dan skenario pengguna, sehingga diragukan bahwa itu akan terjadi sebelum batas waktu 12 September. Poin cabang untuk Chrome 69, yang akan dirilis pada 12 September, dalam satu bulan.

Situasi dengan Chrome diperumit oleh kenyataan bahwa sekarang berbagi tab diperbolehkan, tetapi dengan batasan pada pilihan tampilan untuk pengguna. Pembagian output audio didukung di Chrome, tetapi tidak termasuk dalam spesifikasi getDisplayMedia .

Cara mempersiapkan perubahan di Chrome


Kode yang terkait dengan dukungan getDisplayMedia relatif tidak rumit. Biasanya, panggilan ke API ini sama dengan getUserMedia dengan argumen mediaSource disebut di Firefox. Menentukan apakah fitur ini tersedia mudah, Anda perlu memeriksa apakah getDisplayMedia ada dan menggunakannya sebagai prioritas jika tersedia:

if ('getDisplayMedia' in window.navigator) {
// getDisplayMedia
} else {
//
}

Masih belum jelas bagaimana menunjukkan frame rate. Menggunakan applyConstraints di MediaStreamTrack yang dikembalikan berfungsi untuk getUserMedia dan mungkin akan bekerja untuk getDisplayMedia :

navigator.getDisplayMedia({video: true})
.then(stream => {
stream.getTracks()[0].applyConstraints({frameRate: 5});
return stream;
})
view raw frame-rate.js hosted with ❤ by GitHub

Detailnya ada di spesifikasi bugtracker .

Sayangnya, adapter.js tidak dapat memasukkan getDisplayMedia , karena interaksi dengan setiap ekstensi diimplementasikan sedikit berbeda.

Lebih jauh dan lebih tinggi


Dengan hati-hati saya memantau apakah pengembang WebRTC Google dapat memengaruhi tenggat waktu untuk pemasangan sebaris atau meluncurkan getDisplayMedia tepat waktu. Pengembangan di bawah web terkadang berantakan, ya, tetapi sebagai aturan pada akhirnya kami melihat hasil yang baik. Kami menunggu akhir dari cerita ini dan dengan senang hati akan mengucapkan selamat tinggal pada ekstensi kami.



Cuplikan layar dalam Voximplant


Kami juga memiliki tangkapan layar yang berhasil di Chrome. Namun, sementara tidak ada yang mengucapkan selamat tinggal pada ekstensi, Anda perlu melakukan hal berikut:

  1. Unduh ekstensi dari repositori kami: github.com/voximplant/voximplant-chrome-extension
  2. Buka folder tempat ekstensi diunduh, buka manifest.json dan tambahkan URL situs Anda ke bagian yang cocok .
  3. Di tab Chrome baru, masukkan chrome: // extensions , aktifkan mode pengembang dan muat ekstensi dari folder.

Jadi, Anda menginstal versi dev ekstensi. Lebih nyaman bagi pengguna akhir jika Anda menerbitkan ekstensi di Googe Web Store. Tentang ini, serta cara menggunakan tangkapan layar di platform kami, Anda dapat membaca di Bagaimana- caranya. Selamat berbagi!

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


All Articles