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.
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
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: '*'
}
}
var nms = new nodeMediaServer(config)
nms.run();3.Run
node app.js
OBS:
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('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://localhost:8000/live/1234.flv'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
}
</script>
</body>
</html>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!
What are the production methods of html5 animation production?
The difference between HTML and HTML5
What is the use of java
Tutorial on making word document tables
close port
What is system software
Solution to java success and javac failure
How to solve the problem of garbled characters when opening a web page
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
