热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:手机浏览器H5直播

本文由编程笔记#小编为大家整理,主要介绍了手机浏览器H5直播相关的知识,希望对你有一定的参考价值。一、nginx
本文由编程笔记#小编为大家整理,主要介绍了手机浏览器 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





 

 

参考 资料  Windows10环境下 Nginx+ffmpeg 制作本地服务器HLS直播流

    Windows10环境下 Nginx+ffmpeg自搭服务器制作RTMP直播流

    在windows下搭建、配置nginx流媒体服务器,并进行rtmp流的推流、拉流测试

    利用nginx搭建RTMP视频点播、直播、HLS服务器

 


推荐阅读
author-avatar
Snape吾爱
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有