Menggunakan API Gambar-dalam-Gambar Dokumen Chrome di React – Beragampengetahuan

Pengguna terkadang membuka jendela terpisah di sebelah jendela browser utama untuk melakukan banyak tugas atau fokus pada konten tertentu. Misalnya, saat kita menggunakan halaman tertentu dan perlu menemukan beberapa detail yang relevan, kita mungkin membuka tab browser baru.

Sayangnya, mengulangi perilaku ini sering kali mengakibatkan konsentrasi buruk, kesulitan beralih konteks, mengelola informasi bersama di banyak tab, dan banyak lagi. Untuk mengatasi masalah ini, browser web modern menyediakan API untuk membuat jendela yang selalu berada di atas dalam sesi yang sama.

API Picture-in-Picture (PIP) awalnya dirancang untuk menjaga video tetap terlihat saat pengguna berinteraksi dengan konten lain di halaman. Namun, ini terbatas pada satu video dengan kontrol minimal yang dihasilkan browser. API Dokumen Gambar-dalam-Gambar (DPIP) baru dari Chrome memperluas fungsionalitas API PIP yang sudah ada.

Meskipun PIP terbatas untuk menampilkan satu elemen video di jendela mengambang, DPIP memungkinkan pengembang untuk merender konten HTML sewenang-wenang di jendela tersebut. Fleksibilitas untuk menambahkan konten HTML apa pun di jendela PIP membuka cakupan kasus penggunaan yang lebih luas di luar pemutaran video.

Misalnya, pengguna dapat memanfaatkan DPIP untuk melakukan tugas-tugas seperti mengedit teks secara real-time, membuat catatan, mengelola daftar tugas, atau mengirim pesan dan obrolan saat menggunakan aplikasi lain di perangkat. Bayangkan sebuah aplikasi web di mana pengguna dapat menonton video tutorial di jendela browser utama sambil membuat catatan di jendela DPIP pada halaman yang sama.

Untuk mengilustrasikan fungsionalitas DPIP dengan lebih baik dan mendemonstrasikan bagaimana kita dapat menggunakannya dengan mudah di proyek front-end, mari buat aplikasi React baru dan tambahkan fungsionalitas gambar-dalam-gambar menggunakan API DPIP browser asli. Anda memerlukan pengetahuan dasar React dan akses ke Chrome 116 ke atas untuk mendapatkan hasil maksimal dari tutorial ini.

Mari kita mulai dengan perbandingan singkat API Gambar-dalam-Gambar dan API Dokumentasi Gambar-dalam-Gambar. Jika mau, Anda bisa langsung melompat ke tutorial di bawah ini. Anda juga dapat menemukan kode sumber aplikasi demo kami di sini untuk diikuti.

Bandingkan API Gambar-dalam-Gambar dengan API Dokumentasi Gambar-dalam-Gambar yang baru

PIP Web API memungkinkan pengembang untuk menampilkan elemen video dalam jendela terpisah yang selalu ada di atas. Hal ini memungkinkan pengguna untuk terus menonton video sambil berinteraksi dengan aplikasi lain di perangkat.

Menerapkan PIP relatif sederhana. Pengembang menggunakan requestPictureInPicture() Metode pada elemen video masuk ke mode PIP. Ini akan membuka video di jendela terpisah yang dapat diubah ukurannya dan mengapung di atas jendela browser lainnya.

Beberapa batasan PIP antara lain:

• PIP hanya dapat menampilkan elemen video. Jenis konten lain seperti teks, gambar, atau elemen interaktif tidak didukung
• Pengalaman pengguna dalam mode PIP adalah dasar. Kontrol terbatas selain putar/jeda dan tutup jendela

DPIP (Dokumen Gambar-dalam-Gambar) adalah API Web baru yang dibangun di atas PIP yang memungkinkan pengembang menampilkan konten HTML sewenang-wenang dalam jendela terpisah yang selalu ada di atas. Ini membuka kemungkinan yang lebih luas untuk interaksi pengguna.

Penerapan DPIP sedikit lebih rumit dibandingkan PIP. Pengembang menggunakan window.documentPictureInPicture.requestWindow() Metode dengan opsi untuk menentukan ukuran dan konten.

Penggunaan API DPIP melibatkan pembuatan dokumen HTML terpisah atau penggunaan perpustakaan seperti React untuk memanipulasi konten jendela DPIP secara dinamis. Untungnya, pengembang telah mulai membuat paket npm yang nyaman yang memungkinkan pengembang dengan mudah menggunakan API ini sebagai komponen React yang tidak bergantung pada apa pun.

Dibandingkan dengan PIP API, Document Picture-in-Picture API memungkinkan konten yang lebih luas untuk ditampilkan, termasuk teks, gambar, tombol, dan elemen interaktif. Keunggulan lainnya antara lain:

• Pengguna dapat memanfaatkan DPIP untuk melakukan tugas-tugas seperti mengedit secara real-time, membuat catatan, mengelola daftar tugas, dan bahkan memfasilitasi kemampuan perpesanan dan obrolan saat berinteraksi dengan aplikasi lain.
• Pengembang memiliki kontrol lebih besar atas tampilan dan fungsionalitas jendela DPIP

Namun, DPIP memiliki beberapa keterbatasan yang harus Anda waspadai:

Sekarang, mari kita lihat cara menggunakan Document Picture-in-Picture API di aplikasi React.

Siapkan aplikasi React untuk menggunakan DPIP API

Buka terminal dan jalankan perintah berikut untuk menghasilkan aplikasi React baru:

npx create-react-app docpip

Perintah di atas akan membuat aplikasi React bernama docpip Untukmu.

Selanjutnya, navigasikan ke App.js di dalam file src folder untuk aplikasi React baru dan perbarui dengan kode berikut:

import React, { useRef } from "react";
import ReactDOM from "react-dom/client";
import "./App.css";
function App() {
  const videoRef = useRef(null);
  const openWindow = async () => {
  };
  return (
    <div className="App">
      <button onClick={openWindow}>Open DocumentPIP</button>
    </div>
  );
}
export default App;

Pada kode di atas, kita merender tombol yang akan membuka jendela DPIP dan mengaturnya onClick acara tiba openWindow() Fungsi, saat ini tidak melakukan apa pun.

berlari npm start dan navigasikan untuk melihat aplikasi langsung:

Tambahkan fungsionalitas terbuka ke jendela DPIP

Sekarang, mari kita terapkan openWindow() Fungsi untuk membuka jendela DPIP:

//src/App.js
const openWindow = async () => {
    try {
      const dpip = await window.documentPictureInPicture.requestWindow({
        width: "500",
        height: "500",
      });
    } catch (error) {
      if (error) {
        console.log(error);
      }
    }
  };

Di sini, kami menyiapkan fungsi asinkron untuk membuka jendela DPIP dengan nilai lebar dan tinggi yang ditentukan. Kembali ke browser, jika kita klik Buka dokumen PIP tombol, yang akan membuka jendela baru yang kosong dengan dimensi yang kami tentukan:

Menampilkan konten di jendela DPIP

Selanjutnya, mari kita tampilkan beberapa konten di jendela DPIP baru. di dalam try bagian openWindow() fungsinya, tambahkan cuplikan kode berikut tepat di bawah kode yang ada:

//src/App.js
try {
// existing code
      const pipDiv = dpip.document.createElement("div");
      pipDiv.setAttribute("id", "pip-root");
      dpip.document.body.append(pipDiv);
      const pipRoot = ReactDOM.createRoot(
        dpip.document.getElementById("pip-root")
      );
      pipRoot.render(<WindowContents />);
}

Disini kita:

• Dibuat yang baru div Penggunaan elemen pada jendela DPIP createElement() metode
• kami menggunakan ReactDOM Dan createRoot() Buat elemen root menggunakan div Kami membuatnya sebelumnya. Elemen root akan membantu kita menampilkan komponen React di dalam node DOM browser
• Akhirnya, kami menggunakan render() metode untuk merender WindowContents komponen, yang akan kita buat selanjutnya di jendela DPIP

Sekarang, mari kita berkreasi WindowContents Elemen. Tambahkan cuplikan kode berikut sebelumnya openWindow() fungsi di dalamnya App Elemen:

//src/App.js
import React, { useRef } from "react";
import ReactDOM from "react-dom/client";

  const WindowContents = () => {
    return (
      <div className="App">
        <h2>Puppy's day out 🐶</h2>
        <video ref={videoRef} controls id="pip-object" height={"400"}>
          <source src=" />{" "}
        </video>
        <button onClick={() => window.documentPictureInPicture.window.close()}>
          Close
        </button>
      </div>
    );
  };

Dalam cuplikan di atas, kami menyiapkan a <WindowContents/> Mengembalikan komponen video. Kami dapat memasukkan konten HTML apa pun di sini, tetapi untuk tujuan demonstrasi saya memutuskan untuk menampilkan video dan tombol untuk menutup jendela DPIP. Perhatikan bahwa DPIP memilikinya sendiri close Fungsi.

Sekarang ketika kita mengklik tombol Buka Dokumen PIP, jendela DPIP kita akan terbuka dengan konten kita termasuk judul, video dan penutup Tombol:

Kami telah membuat jendela DPIP yang fungsional di aplikasi React kami dan dapat menambahkan konten HTML berapa pun jumlahnya. Kami selanjutnya dapat memperluas fungsionalitas DPIP melalui metode lain, seperti:

• documentPictureInPicture.onenter — Dieksekusi ketika jendela DPIP dibuka
• pagehide — Dieksekusi saat jendela ditutup

Anda dapat melihat kode sumber untuk tutorial ini di repositori GitHub ini.

Kesimpulannya

Document Picture-in-Picture API di Chrome memberikan keuntungan signifikan untuk aplikasi React, terutama dalam hal meningkatkan pengalaman pengguna dan mengaktifkan fitur-fitur inovatif.

Pada artikel ini, kita membahas bagaimana mengimplementasikan jendela DPIP di aplikasi React. Kami juga melihat keunggulan DPIP API baru dibandingkan PIP API yang sudah ada, serta beberapa batasan yang harus Anda waspadai sebelum mulai menggunakan DPIP.