使用flv.js实现视频直播
程序员文章站
2022-07-13 12:14:40
...
一、磨刀（准备工具）
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：效果如下图
电脑屏幕直播
利用摄像头直播
上一篇： 3步安装直播系统