搭建RTMP服务端与HLS流媒体搭建一个直播间

使用 Linux 搭建 RTMP 流媒体服务器，进行在线直播。

搭建串流服务器

好用的Docker镜像，比较好用，比较简单，比较方便，比较容易使用。
博主使用的是 CentOS 8.0 系统，没有预装 Docker

在开始安装之前，有必要提醒，更新yum的下载源！！

更新下载源

备份现有源

设置新的`yum`目录

安装wget

下载配置。

此处一定要注意，很多教程都是CentOS 7的教程，所以贴的CentOS 7的下载源，对于CentOS 8一定要改为CentOS 8的下载源，否则还是不行。

清除文件并重建元数据缓存

最后更新软件包，稍等软件安装包安装完就可以了

最后，贴上清华大学镜像站

安装Docker

部署镜像

至此！

你拥有了一个可以收发媒体流的RTMP服务端

详情参见: alqutami/rtmp-hls

配置OBS串流

下载与安装就不需要再赘述了吧

官方地址

OBS串流设置

右键左上方'文件'

找到左侧栏目'推流'选项

客户端

Vite框架

博主使用Vite框架，这并不代表播放HLS流媒体只能使用Vite前端框架。

为了方便，在这里就不赘述Video.js的使用方法了

<html lang="en">
	<head>
		<style class="vjs-styles-defaults">
			.video-js {
				width: 300px;
				height: 150px;
			}

			.vjs-fluid {
				padding-top: 56.25%
			}
    	</style>
		<style class="vjs-styles-dimensions">
			.player-dimensions {
				width: 720px;
				height: 405px;
			}

			.player-dimensions.vjs-fluid {
				padding-top: 56.25%;
			}
 	   </style>
		<meta charset="UTF-8">
		<title>HLS Live Streaming</title>
		<link href="https://vjs.zencdn.net/7.5.5/video-js.css" rel="stylesheet">
		<script src="https://vjs.zencdn.net/7.5.5/video.js"></script>
	</head>
	<body>
		<h1>HLS Player</h1>
		<video id="player" width=1280 height=720 class="vjs-default-skin" controls>
			<source src="http://hls.i5res.com/hls/zj520.m3u8" type="application/x-mpegURL"></source>
		</video>
		<script>
			var player = videojs('#player');
		</script>
	</body>
</html>

Vite初始化

关于如何使用NPM进行初始化，请参见: https://vitejs.cn/guide/#scaffolding-your-first-vite-project

这里以NPM做简要概述:

初始化程序

随后跟随步骤完成项目创建即可。

LarchLiu/vue3-video-player

安装包文件

./main.ts

import { createApp } from 'vue';
import App from './App.vue';
import Vue3VideoPlayer from '@cloudgeek/vue3-video-player';
import '@cloudgeek/vue3-video-player/dist/vue3-video-player.css';


createApp(App).use(Vue3VideoPlayer, {
	lang: 'zh-CN'
}).mount('#app');

xxx.vue

<script setup lang="ts">
import HLSCore from '@cloudgeek/playcore-hls';
import { reactive } from 'vue';

const options = reactive({
	sources: [
		{
			src: "http://hls.i5res.com/hls/zj520.m3u8",
			type: "application/x-mpegURL",
		},
	]
});

</script>

<template>
	<vue3-video-player :core="HLSCore" :options="options" :src="options.sources" title="大猫咪的直播间">
	</vue3-video-player>
</template>

预览地址

其他问题

如何开启RTMPS适配SSL进行推流

为什么我的 video.js 出现很多错误

RTMPS适配SSL进行推流

博主尝试过为流加密传输，也就是RTMPS的协议，但！！！

缓存更新太慢，博主赶时间。所以使用Nginx反代来实现伪加密。

为代理服务器域名申请SSL，也就是 https://xx.com

将 stream.i5res.com 代理 hls.i5res.com:8080

访问 https://stream.i5res.com 就等于访问了 http://hls.i5res.com:8080

配置文件

server {
  listen 443 ssl;
  listen [::]:443 ssl;
  server_name stream.i5res.com
  access_log /data/wwwlogs/stream_nginx.log combined;
  index index.html index.htm index.php;
  root /data/wwwroot/live;

  #error_page 404 /404.html;
  #error_page 502 /502.html;

  # SSL
  ssl_certificate_key /data/cert/stream/private.key;
  ssl_certificate /data/cert/stream/full_chain.pem;

  ssl_session_timeout 1m;
  ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;

  location ~ / {
    proxy_pass http://hls.i5res.com:8080;
  }
}