masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > Bagaimana untuk melaksanakan penstriman push dalam html5

Bagaimana untuk melaksanakan penstriman push dalam html5

藏色散人
Lepaskan： 2023-01-28 10:44:31
asal
2537 orang telah melayarinya

Cara melaksanakan penstriman dalam HTML5: 1. Pasang "node-media-server" melalui "npm insatll node-media-server --save" 2. Mulakan "new nodeMediaServer(config)"; Jalankan "node app.js"; 4. Gunakan kaedah "if(flvjs.isSupported()) {...}" pada bahagian HTML5.

Bagaimana untuk melaksanakan penstriman push dalam html5

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi HTML5, komputer DELL G3

Cara melaksanakan penstriman tekan dalam html5?

Node + OBS + HTML5 untuk melaksanakan penstriman langsung

Sebelah nod:

1 

npm insatll node-media-server --save
Salin selepas log masuk
2. Permulaan

const nodeMediaServer = require("node-media-server")
const config = {
    rtmp: {
        port: 1935,
        chunk_size: 60000,
        gop_cache: true,
        ping: 60,
        ping_timeout: 30
    },
    http: {
        port: 8000,
        allow_origin: '*'
    }
}
var nms = new nodeMediaServer(config)
nms.run();
Salin selepas log masuk
3.Larian

node app.js
Salin selepas log masuk
OBS:

Bagaimana untuk melaksanakan penstriman push dalam html5

Sebelah HTML5: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>直播</title>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.5.0/flv.min.js"></script>
    <video id="videoElement" width="100%" controls></video>
    <script>
        if (flvjs.isSupported()) {
            var videoElement = document.getElementById(&#39;videoElement&#39;);
            var flvPlayer = flvjs.createPlayer({
                type: &#39;flv&#39;,
                url: &#39;http://localhost:8000/live/1234.flv&#39;
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>
</html>
Salin selepas log masuk
Pembelajaran yang disyorkan: "

Tutorial Video HTML5"

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

Label berkaitan：
html5 Tekan penstriman
sumber：php.cn
Artikel sebelumnya：Bagaimana untuk mencapai kesan tiga dimensi dalam html5 Artikel seterusnya：Bagaimana untuk melaksanakan fungsi kaca pembesar dalam html5
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Hasilkan nilai lalai dan pembolehubah CSS menggunakan SCSS Saya sedang melaksanakan penggayaan laman web. Atas sebab sokongan warisan, saya perlu men...
daripada 2024-04-06 17:46:54
0
1
355
Kemas kini status tidak berfungsi dalam React-Native pada Android Saya mempunyai beberapa kod yang mempunyai sepasang imej dalam galeri mendatar boleh leret...
daripada 2024-04-06 16:54:10
0
1
410
Node.js: Tidak dapat menyimpan hasil pertanyaan SQL dalam tatasusunan Saya cuba menolak hasil pertanyaan SQL ke tatasusunan. Namun, ia nampaknya tidak berkesan....
daripada 2024-04-06 14:14:46
0
1
373
Tolak objek ke tatasusunan, API boleh gubah Ada projek. Terdapat dua pilihan pilihan "saiz" (besar, kecil) dan kuantiti (2/4...
daripada 2024-04-05 14:41:47
0
1
1526
Lancarkan penyemak imbas telus untuk meningkatkan pengalaman aplikasi web dan PWA [menyokong HTML statik, CSS dan JavaScript] [membenarkan pengguna melihat kertas dinding desktop dalam aplikasi web/PWA kami] Saya seorang pembangun dan pereka bentuk hadapan junior yang sedang membangunkan aplikasi ...
daripada 2024-04-05 13:50:12
0
1
1367
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan