作者:Snape吾爱 | 来源:互联网 | 2023-09-24 20:26
本文由编程笔记#小编为大家整理,主要介绍了手机浏览器 H5直播相关的知识,希望对你有一定的参考价值。
一、nginx的安装和配置
首先我们下载nginx。在nginx官网上下载的nginx是不带rtmp模块的,所以我们在http://nginx-win.ecsds.eu/download/中下载nginx 1.7.11.3 Gryphon.zip。
该版本的nginx包含rtmp组件,通过rtmp组件,才能提供流媒体服务,使nginx成为rtmp流媒体服务器。
下载完成后解压
进入conf目录下,新建一个文件“nginx.conf”
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
rtmp{
server {
listen 1935;
chunk_size 4000;
#RTMP
application myapp {
live on;
}
#HLS
# For HLS to work please create a directory in tmpfs (/tmp/app here)
# for the fragments. The directory contents is served via HTTP (see
# http{} section in config)
#
# Incoming stream must be in H264/AAC. For iPhones use baseline H264
# profile (see ffmpeg example).
# This example creates RTMP stream from movie ready for HLS:
#
# ffmpeg -loglevel verbose -re -i movie.avi -vcodec libx264
# -vprofile baseline -acodec libmp3lame -ar 44100 -ac 1
# -f flv rtmp://localhost:1935/hls/movie
#
# If you need to transcode live stream use ‘exec‘ feature.
#
application hls {
live on;
hls on;
hls_path hls;
hls_fragment 5s;
}
}
}
http{
server {
listen 8765;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
location /hls {
# Serve HLS fragments
types {
application/vnd.apple.mpegurl m3u8;
video/mp2t ts;
}
alias hls;
expires -1;
add_header Access-Control-Allow-Origin *;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
}
这个配置可以进行推rtmp流,也可以推hls的流
安装obs进行推流(自行百度安装)
用h5播放
video.html
"en" dir="ltr">
"utf-8">
"./css/video-js.min.css" rel="stylesheet">
我是uni-app嵌套了一个 html页面
live.vue
class="live" color: #800000;">"padding-bottom: 0;margin-bottom: 0;">
"width: 750rpx;height:422rpx;border: 2rpx solid #0062CC;background-color: #000000;">
"width: 750rpx;" :webview-styles="webviewStyles" src="http://localhost:8848/getBagsMallApp/hybrid/video/video.html">
"z-index: 9999;background-color: white;" :scroll-top="scrollTop" scroll-y="true" class="live-scroll-view">
"width: 750rpx;">
参考 资料 Windows10环境下 Nginx+ffmpeg 制作本地服务器HLS直播流
Windows10环境下 Nginx+ffmpeg自搭服务器制作RTMP直播流
在windows下搭建、配置nginx流媒体服务器,并进行rtmp流的推流、拉流测试
利用nginx搭建RTMP视频点播、直播、HLS服务器