使用flv.js实现视频直播

一、磨刀（准备工具）

1.下载安装 nginx：http://nginx.org/en/download.html

2.下载安装 livego：https://github.com/gwuhaolin/livego/releases

3.下载安装 OBS：https://obsproject.com/

4.引用 flv.js：https://github.com/Bilibili/flv.js

二、砍柴

1.运行 livego.exe，如下图

2.运行OBS，配置流服务器：

找到：文件》设置》推流
服务：选择自定义
服务器：就是 livego启动的服务，接收视频流，将FLV文件流转换为ISO BMFF（Fragmented MP4）段，然后通过Media Source Extensions API 将mp4段提供给HTML5 元素。
串流秘钥：相当于视频流的名称

添加视频载入源

点击开始推流：如livego的服务地址错误，会有提示

开始推流成功livego会显示一下提示

三、编写js脚本

把flv.js放入nginx下的html目录，并修改index.html如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>flv.js dome</title>
</head>
<body><div class="mainContainer"><video id="video" controls autoplay width="1024" height="576"></video></div><br><div ><button onclick="flv_start()">开始</button><button onclick="flv_pause()">暂停</button><button onclick="flv_destroy()">停止</button></div><script src="flv.js"></script><script>var player = document.getElementById('video');if (flvjs.isSupported()) {var flvPlayer = flvjs.createPlayer({type: 'flv',"isLive": true,url: 'http://192.168.201.1:7001/live/test.flv',//改为自己服务的地址});flvPlayer.attachMediaElement(video);flvPlayer.load(); //加载flv_start();}function flv_start() {player.play();}function flv_pause() {player.pause();}function flv_destroy() {player.pause();player.unload();player.detachMediaElement();player.destroy();player = null;}</script>
</body>
</html>

四、运行NGINX

在浏览器输入127.0.0.1或是本机的局域网ip：效果如下图
电脑屏幕直播

利用摄像头直播

使用flv.js实现视频直播相关推荐

【webLive】用Flv.js+OBS做直播
环境准备 win10 Nginx LiveGo OBS Flv.js 启动LiveGo服务器双击解压后的livego.exe 启动OBS并设置打开OBS 添加媒体源,添加一个本地的flv文件即可 ...
flv.js播放视频时遇到的问题
文章目录前言一.报错二.原因三.方案前言 rtsp流通过ffmpeg+nginx-http-flv转成rtmp以及http-flv流,并通过flv.js在页面播放,带有音频的流出现播放不了问 ...
调用flv.js显示视频报错
flv.js开源地址:https://www.bootcdn.cn/flv.js/ 代码 <video class="video" id="videoElement ...
js实现视频直播,结合bilibili开源项目
flv.js为核心,使用构造器来创建video标签,当然flv文件流必须是正确推送,flv.js会把flv视频流解析成为blob对象来播放. 经过实际测试这个方案是可行的,bilibili开源的这个 ...
基于flv.js的视频自动播放
1: html <video class="video-content" id="video">您的浏览器不支持 HTML5 video! < ...
基于nginx和ffmpeg前端flv.js简单的直播环境搭建（rtmp+http-flv+hls）
https://blog.csdn.net/xjb2006/article/details/106681078 https://segmentfault.com/a/1190000016043297? ...
video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置首先运行livego ...
H5视频之视频直播(前端, video.js)
H5视频之视频直播(前端, video.js) 原理视频直播的流程原理图如下: 这里写图片描述: 大致过程(摘自知乎:https://www.zhihu.com/question/37887655/ ...
flv.js 插件完成 flv 格式的视频播放
记录--- api中文文档: flv.js 中文API文档 - 简书参考文章:全网最详细!vue中使用flv.js 播放直播监控视频流_vue使用flv.js_抄一下你代码的博客-CSDN博客问题 ...

使用flv.js实现视频直播

一、磨刀（准备工具）

1.下载安装 nginx：http://nginx.org/en/download.html

2.下载安装 livego：https://github.com/gwuhaolin/livego/releases

3.下载安装 OBS：https://obsproject.com/

4.引用 flv.js：https://github.com/Bilibili/flv.js

二、砍柴

1.运行 livego.exe，如下图

2.运行OBS，配置流服务器：

三、编写js脚本

四、运行NGINX

使用flv.js实现视频直播相关推荐

最新文章

热门文章

使用flv.js实现视频直播

一、磨刀（准备工具）

1.下载安装 nginx：http://nginx.org/en/download.html

2.下载安装 livego：https://github.com/gwuhaolin/livego/releases

3.下载安装 OBS：https://obsproject.com/

4.引用 flv.js：https://github.com/Bilibili/flv.js

二、砍柴

1.运行 livego.exe，如下图

2.运行OBS， 配置流服务器：

三、编写js脚本

四、运行NGINX

使用flv.js实现视频直播相关推荐

最新文章

热门文章

2.运行OBS，配置流服务器：