Bagaimana untuk melaksanakan penyiaran skrin dalam uniapp

Dalam beberapa tahun kebelakangan ini, dengan populariti TV pintar, kami menonton filem dan rancangan TV, bermain permainan dan aktiviti lain di rumah dengan lebih kerap dan pada masa yang sama, Internet mengikuti kami ke mana-mana dan memainkan peranan yang semakin penting hidup kita. Dalam persekitaran sedemikian, kepentingan teknologi tayangan skrin telah menjadi semakin menonjol.

Jadi, apakah itu teknologi tayangan skrin? Dalam istilah awam, teknologi tayangan skrin merujuk kepada teknologi menghantar kandungan secara wayarles pada peranti (seperti video dan audio dalam telefon mudah alih dan tablet) ke peranti skrin besar seperti TV atau projektor. Untuk kehidupan hiburan orang ramai, konsep teknologi tayangan skrin adalah sangat penting, membolehkan kita menikmati kesan audio-visual dengan lebih selesa. Oleh itu, apabila permintaan pasaran meningkat, semakin banyak teknologi tayangan skrin menarik perhatian pengguna. Antaranya, uniapp, sebagai rangka kerja pembangunan aplikasi, juga digunakan secara meluas dalam pembangunan TV pintar dan peranti mudah alih.

Jadi, apakah itu uniapp? uniapp ialah alat pembangunan merentas platform sumber terbuka yang membolehkan pembangun membangunkan aplikasi yang berjalan pada berbilang platform seperti iOS, Android dan H5 berdasarkan rangka kerja Vue. Ini bermakna bahawa pembangun hanya perlu menulis kod sekali dan boleh mencapai kesan yang sama pada platform yang berbeza. Pada masa yang sama, ia juga menyepadukan pelbagai komponen UI dan API asli, dan menyokong import perpustakaan komponen pihak ketiga, membolehkan pembangun menyelesaikan tugas pembangunan dengan lebih cekap. Oleh itu, menggunakan uniapp untuk mencapai siaran skrin telah menjadi kaedah yang dipilih oleh lebih ramai pembangun.

Seterusnya, mari perkenalkan langkah untuk menggunakan uniapp untuk melaksanakan penyiaran skrin. Pertama, kita perlu memahami struktur asas uni-app. Dalam apl uni, kami biasanya menemui tiga jenis fail berikut:

1. Fail halaman (fail .vue): Ini ialah jenis yang paling biasa, serupa dengan fail html dalam pembangunan web tradisional, yang menerangkan pelbagai elemen dan gaya yang terkandung dalam halaman. Fail halaman biasanya terdiri daripada tiga bahagian: templat, skrip dan gaya.
2. Folder sumber (statik): Folder ini menyimpan beberapa fail statik yang diperlukan oleh projek uniapp, seperti gambar, audio, video, dsb.
3. Fail konfigurasi (manifest.json): Fail ini menerangkan konfigurasi permulaan, maklumat berkaitan kebenaran, dsb. aplikasi uniapp pada platform berbeza.

Selepas mengkonfigurasi struktur asas, langkah seterusnya ialah melaksanakan fungsi penyiaran skrin. Dalam uniapp, anda boleh menggunakan pemalam uni-socketio untuk merealisasikan penghantaran data masa nyata. Pemalam ini ialah pemalam berdasarkan pengkapsulan Socket.io, yang boleh digunakan dengan mudah dalam aplikasi uniapp untuk mencapai komunikasi data masa nyata. Pada masa yang sama, anda juga boleh menggunakan API yang disediakan oleh uniapp (seperti uni.createUDPSocket) untuk merealisasikan penghantaran video, audio dan data lain. Mengambil penggunaan uniapp untuk melaksanakan tayangan video sebagai contoh, proses pelaksanaan ringkas ialah:

Langkah pertama ialah memasang pemalam uni-socketio. Dalam folder tempat projek uniapp terletak, jalankan perintah npm install --save uni-socketio untuk memasang pemalam.

Langkah kedua ialah memperkenalkan pemalam dan menyambung ke pelayan. Dalam halaman yang perlu menggunakan socketio, perkenalkan pemalam menggunakanKomponen, seperti yang ditunjukkan di bawah:

<using-components>
    <provider socketio="uni-socketio" ></provider>
</using-components>

Kemudian dalam fail js, sambung ke pelayan melalui kod berikut:

this.socket = uni.connectSocket({
    url: 'ws://xxxxx',
    success: function () {
       console.log("connect success");
    }, fail: function () {
       console.log("connect fail");
    }
});

URL di sini Merujuk kepada alamat pelayan yang perlu disambungkan Alamat ini boleh dikonfigurasikan mengikut situasi sebenar.

Langkah ketiga ialah menggunakan API navgitor.mediaDevices.getUserMedia untuk mendapatkan data video. Dalam HTML5, terdapat API navigator.mediaDevices.getUserMedia() yang boleh membantu kami mengakses strim media peranti. API ini boleh mendapatkan pelbagai jenis data media dengan mudah, seperti foto, data audio dan video, dsb. Untuk tayangan video, kita perlu mendapatkan data video yang dirakam oleh kamera Strim video boleh diperolehi melalui kod berikut:

navigator.mediaDevices.getUserMedia({ video: true, audio: true })
.then(function (stream) {
    video.srcObject = stream;
    video.play();
})
.catch(function (error) {
   console.log(error)
});

Dalam kod di atas, kami memanggil navigator.mediaDevices.getUserMedia({. video: true, audio: true }) untuk mendapatkan strim video kamera. Kerana selepas pengguna bersetuju untuk memberi kebenaran, video boleh dimainkan dengan lancar. Pada masa yang sama, jika kami perlu mendapatkan video rakaman skrin, kami juga boleh mencapainya dengan memanggil getScreenMedia() API yang disediakan oleh penyemak imbas Chrome.

Langkah keempat ialah menggunakan socketio untuk menghantar data video ke pelayan. Selepas mendapatkan aliran video, kami menghantar data video ke pelayan untuk merealisasikan penghantaran video masa nyata. Data video boleh dihantar ke pelayan melalui kod berikut:

video.addEventListener("play", function() {
     var canvas = document.createElement("canvas");
     canvas.width = video.videoWidth;
     canvas.height = video.videoHeight;
     setInterval(function () {
         canvas.getContext('2d').drawImage(video, 0, 0,canvas.width, canvas.height);
         outputdata = canvas.toDataURL("image/jpeg", 0.5);
         this.socket.emit('video',outputdata);
     }, 50);

});

Dalam kod di atas, kami mencapai data video masa nyata dengan meletakkan data video ke dalam kanvas dan menukar kanvas menjadi gambar. penularan. Fungsi setInterval() di sini bermakna fungsi tersebut dilaksanakan setiap 50ms dan data imej dalam kanvas dihantar ke pelayan melalui pemalam socketio, iaitu this.socket.emit('video', outputdata).

Akhir sekali, selepas pelayan menerima data video, ia menolak data video yang diterima kepada pelanggan dalam masa nyata melalui WebSocket, dengan itu mencapai kesan tayangan video. Data video boleh dihantar kepada pelanggan melalui kod berikut:

socket.on('video',function (data) {
    var base64Data=data.split(",")[1];
    const binaryImg = Buffer.from(base64Data, 'base64');
    res.write(
        "--myboundary\r\n"
        + "Content-Type: image/jpeg\r\n"
        + "Content-Length: " + binaryImg.length + "\r\n"
        + "X-Timestamp: " + Date.now() + "000\r\n"
        + "\r\n"
    );
    res.write(binaryImg);
    res.write("\r\n");
});

Di atas ialah proses asas menggunakan uniapp untuk melaksanakan penyiaran skrin, yang merealisasikan fungsi penyiaran video yang menyokong berbilang platform. Melalui langkah di atas, kami boleh menggunakan uniapp untuk membangunkan aplikasi merentas platform dengan cepat dan merealisasikan penghantaran data masa nyata untuk mencapai pengalaman pengguna yang lebih baik.

Ringkasnya, menggunakan uniapp untuk melaksanakan fungsi penyiaran skrin bukan sahaja dapat meningkatkan kecekapan pembangunan, tetapi juga mematuhi tabiat penggunaan orang moden. Sebagai pembangun, jika anda berminat dengan teknologi penyiaran skrin, anda boleh cuba menggunakan uniapp untuk melaksanakan penyiaran skrin untuk memberikan pengguna pengalaman yang lebih baik. Pada masa yang sama, pembangunan teknologi unjuran skrin mempunyai rangkaian senario aplikasi yang sangat luas Kami berharap untuk melihat kemunculan teknologi unjuran skrin yang lebih inovatif dan praktikal dalam masa terdekat.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penyiaran skrin dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!