html5如何實現(xiàn)推流

發(fā)布時間：2023-01-31 09:15:27 來源：億速云閱讀：131 作者：iii 欄目：web開發(fā)

這篇“html5如何實現(xiàn)推流”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“html5如何實現(xiàn)推流”文章吧。

html5實現(xiàn)推流的方法：1、通過“npm insatll node-media-server --save”安裝“node-media-server”；2、初始化“new nodeMediaServer(config)”；3、執(zhí)行“node app.js”；4、在HTML5端使用“if(flvjs.isSupported()) {...}”方法即可。

Node + OBS + HTML5 實現(xiàn)推流直播

Node端：

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

3.運行

node app.js

OBS：

html5如何實現(xiàn)推流

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('videoElement');
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                url: 'http://localhost:8000/live/1234.flv'
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
        }
    </script>
</body>
</html>

以上就是關(guān)于“html5如何實現(xiàn)推流”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

html5如何實現(xiàn)推流

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽