Websocket di HTML5 mengimplementasikan fungsi siaran langsung

Untuk video live streaming, saya mempelajari banyak solusi pada tahap awal, termasuk websocket. Karena berbagai alasan, pada akhirnya saya tidak mengadopsi solusi ini, namun saya tetap ingin merekam pengalaman belajar saya.

WebSocket adalah protokol untuk komunikasi dupleks penuh pada satu koneksi TCP yang mulai disediakan oleh HTML5.

Pada WebSocket API, browser dan server hanya perlu melakukan tindakan jabat tangan, kemudian saluran cepat terbentuk antara browser dan server. Data dapat ditransmisikan secara langsung antara keduanya.

Browser mengirimkan permintaan ke server untuk membuat koneksi WebSocket melalui JavaScript. Setelah koneksi dibuat, klien dan server dapat langsung bertukar data melalui koneksi TCP.

Setelah Anda mendapatkan koneksi Web Socket, Anda dapat mengirim data ke server melalui metode send(), dan menerima data yang dikembalikan oleh server melalui acara onmessage.

Selama proses tersebut, ide utamanya adalah: gunakan setTimeout() pada halaman rekaman untuk mengonversi video menjadi gambar bingkai demi bingkai melalui kanvas pada interval tetap, lalu gunakan socket.send() websocket untuk mengirim data gambar ke server. Pada halaman siaran langsung, pertama-tama Anda membuat struktur <img>, memperoleh data gambar melalui socket.onmessage() dari websocket, dan menampilkannya pada tag <img> untuk membentuk siaran langsung.

Kode terlampir

Struktur HTML halaman video

 <video autoplay id=sourcevid style=width:1600;height:900px></video> <canvas id=output style=display:none></canvas>

Halaman video js

 <tipe skrip=teks/javascript charset=utf-8> //Buat instance + var socket = new WebSocket(ws://+document.domain+:8080); /Mengembalikan lingkungan untuk menggambar di kanvas. var backcontext = back.getContext('2d'); var video = document.getElementsByTagName('video')[0]; var sukses = function(stream){ //Dapatkan streaming video dan ubah menjadi url video.src = window.URL.createObjectURL(stream } //Buka soket socket.onopen = function(){ draw(); Gambar bingkai video ke objek Canvas, dan Canvas mengganti bingkai setiap 100 md untuk membentuk efek video dengan mata telanjang. var draw = function(){ try{ backcontext.drawImage(video,0,0, back.width, back.height) ; }tangkap( e){ if (e.name == NS_ERROR_NOT_AVAILABLE) { return setTimeout(draw, 100); if(video.src){ //Konten Canvas diubah menjadi URI data PNG dan dikirim ke server, 0,5 adalah koefisien kompresi socket.send(back.toDataURL(image/jpeg, 0.5)); , 100) ; } //Panggil kamera perangkat dan masukkan sumber daya ke dalam tag video navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||.navigator.mozGetUserMedia ||.navigator.msGetUserMedia; navigator.getUserMedia({video:true, audio:false}, sukses, console.log>).

Struktur HTML halaman langsung:

 <img id=gaya penerima=lebar:1600px;tinggi:900px/>

Halaman langsung JS

 <script type=text/javascript charset=utf-8> //Membuat instance soket var receiver_socket = new WebSocket(ws://+document.domain+:8008); var image = document.getElementById('receiver'); // Dengarkan pesan receiver_socket.onmessage = fungsi(data) { gambar.src=data.data; } </skrip>

Di atas adalah implementasi websocket dalam HTML5 yang diperkenalkan editor kepada Anda. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!