HTML5でプッシュストリーミングを実装する方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

HTML5でプッシュストリーミングを実装する方法

藏色散人

Jan 28, 2023 am 10:44 AM

html5 プッシュストリーミング

html5 プッシュストリーミングを実装する方法: 1. 「npm insatll node-media-server --save」を通じて「node-media-server」をインストールします; 2. 「new nodeMediaServer(config)」を初期化します; 3. 「node app.js」を実行; 4. HTML5 側で「if(flvjs.isSupported()) {...}」メソッドを使用します。

HTML5でプッシュストリーミングを実装する方法

このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、DELL G3 コンピューター

プッシュストリーミングの実装方法html5?

ノード OBS HTML5 はライブプッシュストリーミングを実装します

ノード側:

1.node-media-server

npm insatll node-media-server --save

ログイン後にコピー

# をインストールします##2.初期化

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: &#39;*&#39;
    }
}
var nms = new nodeMediaServer(config)
nms.run();

ログイン後にコピー

3.実行

node app.js

ログイン後にコピー

OBS:

HTML5でプッシュストリーミングを実装する方法

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>

ログイン後にコピー

推奨調査: 「

HTML5 ビデオチュートリアル」

以上がHTML5でプッシュストリーミングを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。