How to implement push streaming in html5-Front-end Q&A-php.cn

Home

Web Front-end

Front-end Q&A

How to implement push streaming in html5

藏色散人

Jan 28, 2023 am 10:44 AM

html5 Push streaming

html5 method to implement streaming: 1. Install "node-media-server" through "npm insatll node-media-server --save"; 2. Initialize "new nodeMediaServer(config)"; 3. Execute "node app.js"; 4. Use the "if(flvjs.isSupported()) {...}" method on the HTML5 side.

How to implement push streaming in html5

The operating environment of this tutorial: Windows 10 system, HTML5 version, DELL G3 computer

How to implement push streaming in html5?

Node OBS HTML5 implements live push streaming

Node side:

1. Install node-media-server

npm insatll node-media-server --save

Copy after login

2.Initialization

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();

Copy after login

3.Run

node app.js

Copy after login

OBS:

How to implement push streaming in html5

HTML5 end:

<!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>

Copy after login

Recommended Study: "HTML5 Video Tutorial"

The above is the detailed content of How to implement push streaming in html5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn