OBS推送桌面屏幕视频流到H5页面(直播方式)

原创作者:温岭王骏
1、安装node-media-server
nodejs的环境先安装好,然后执行npm安装node-media-server:
npm install node-media-server
详细的搭建过程请参考:https://www.jb51.net/article/204443.htm

2、运行node media server
index.js代码如下:

const NodeMediaServer = require('node-media-server');
const config = { rtmp:{ port:1935, chunk_size:60000, gop_cache:true, ping:60, ping_timeout:30 },
http:{ port:85, allow_origin:'*' } };
var nms = new NodeMediaServer(config);
nms.run();

运行:

node index.js

运行后将在1935端口接收视频流,85端口输出视频流。

3、安装及配置OBS Studio
安装好OBS Studio,在来源窗口点“+”,添加需要采集的视频源。
点设置按钮,进入推流配置项。
服务:自定义
服务器:rtmp://127.0.0.1:1935/live
串流密钥:123

live和串流密钥可以根据实际需求设定。

4、开始推流
点“开始推流”按钮开始推流。

5、H5页面显示视频

<html>
<body>
<script src="flv.min.js"></script>
<video id="videoElement" controls autoplay width="1024" height="576"></video>
<script>
    if (flvjs.isSupported()) {
        var videoElement = document.getElementById('videoElement');
        var flvPlayer = flvjs.createPlayer({
            type: 'flv',
            url: 'http://localhost:85/live/123.flv'
        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
    }
</script>
</body>
</html>

url里面的live和123,要和OBS里的设置对应。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容