美文网首页
obs+node-media-server+flv.js实现录播

obs+node-media-server+flv.js实现录播

作者: 复古先生 | 来源:发表于2019-11-20 17:48 被阅读0次

实现思路

下载obs软件,进行视频的录制

通过node-media-server开启一个服务,在obs中推流到该服务器

通过flv.js配合html5的video标签实现node-media-server中视频源的播放

开始实现

obs的使用

obs的下载请移步官网,有windows, mac, linux 三个平台的版本可供下载

我这里使用的是mac版,其他版本的使用应该也差不多

首先需要新建一个场景

新建场景.png

这里有很多种场景可以使用,我用显示捕获来示范一下吧...

新建场景.png

可以对场景进行命名,我直接使用默认的名字,点击确定

新建场景.png

再次点击确定,这个时候场景就创建成功了,拖动场景可以将场景进行缩放,缩放到遮住黑色的背景就好了

缩放场景.png

推流

视频的本质其实是一张张截下来的图片,我们需要将这一张张图片放到一个地方,然后前端就可以从这个地方读取,从而展示出来,因此在这之前我们需要开启一个服务,作为前端获取视频的源地址

node-media-server开启服务

新建一个空白的文件夹,执行npm init, 根据提示输入相关信息后,下载node-media-server

npm install node-media-server --save

新建一个入口文件index.js

constNodeMediaServer=require('node-media-server');constconfig={rtmp:{port:1935,chunk_size:60000,gop_cache:true,ping:60,ping_timeout:30},http:{port:8000,allow_origin:'*'}};varnms=newNodeMediaServer(config)nms.run();

然后在命令行中执行

node index.js

如果看到下面的提示,表示我们已经成功开启node-media-server服务了

开启服务.png

flv.js

flv.js是来自Bilibli的开源项目。它解析FLV文件喂给原生HTML5 Video标签播放音视频数据,使浏览器在不借助Flash的情况下播放FLV成为可能。具体的介绍请自行google哈,继续刚才的项目

新建一个index.html文件

<!DOCTYPE html><html><head><metacharset="UTF-8"><title>直播</title></head><body><scriptsrc="https://cdn.bootcss.com/flv.js/1.4.0/flv.min.js"></script><videoid="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/hello.flv'          });          flvPlayer.attachMediaElement(videoElement);          flvPlayer.load();          flvPlayer.play();      }</script></body></html>

这里遇到了一个坑,可能是mac的原因,默认视频是没有自动播放的,而且一开始video标签我也没有加上controls,所以网页上一直显示的是一张静态的图片,偶然才发现原来是视频处于暂停状态 =_=!!

可以进行录播啦~

点击obs中的设置,进入设置页面,点击流,如果是在本地直播的话,流类型选择自定义流媒体服务器,url填写如图所示,流名称填写index.html设置的名字,本项目是hello

我们也可以通过bilibili等直播平台进行播放,这里就填写你bilibili上的直播链接和名称

image.png

点击obs的开始推流按钮

image.png

这时双击在浏览器打开index.html就可以看到直播啦,记得点击视频下方的开始按钮~

相关文章

  • 监控推拉流资料收集

    obs+node-media-server+flv.js实现录播和直播 Android PC投屏简单尝试(录屏直播...

  • obs+node-media-server+flv.js实现录播

    实现思路 下载obs软件,进行视频的录制 通过node-media-server开启一个服务,在obs中推流到该服...

  • obs+node-media-server+flv.js实现录播

    实现思路 下载obs软件,进行视频的录制 通过node-media-server开启一个服务,在obs中推流到该服...

  • obs+node-media-server+flv.js实现录播

    实现思路 下载obs软件,进行视频的录制 通过node-media-server开启一个服务,在obs中推流到该服...

  • [Python]实现代码录播

    最近无聊在看烟云酱的锐雯录播,但是发现录播文件好像会定期删除,所以我决定自己写一个程序录播烟云酱 python环境...

  • 视频播放器(直播、录播一体化)解决方案(video.js + f

    背景描述: 实现一款视频播放器,同时支持直播和录播功能 功能清单: 支持解析m3u8或flv两种直播流,支持录播且...

  • 2019-06-21

    智能录播教室 随着教育部启动精品课程的建设,全自动录播系统在校园中的应用也更加普遍。为了实现先进的信息化手段,将教...

  • 录播教室

    今天的数学课老师带着我们来到了一个特别的教室――录播教室。 来到大门边,过了一会儿,下课铃打了,...

  • 录播室

    今天我们在录播室上课,我们今天上午。学了,语文音乐数学美术数。下课我们离开录播室,之后我们就去上厕所。上课的时候,...

  • 录播课

    今天,老师带我们到二楼去上录播课,下楼的时候同学们很吵,老师说“吵的人要给小组扣分”,霎时楼道里变得鸦雀...

网友评论

      本文标题:obs+node-media-server+flv.js实现录播

      本文链接:https://www.haomeiwen.com/subject/gcfaictx.html