一、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
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>video.js</title> <link href="./css/video-js.min.css" rel="stylesheet"> <script src="./js/video.min.js"></script> <script src="./js/videojs-flash.js"></script> <script src="./js/videojs-contrib-hls.js"></script> <style type="text/css"> body{ padding: 0; margin: 0; } </style> </head> <body> <video id="my-player" class="video-js" controls> <source src="http://172.18.1.209:8765/hls/pc.m3u8" type="application/x-mpegURL"> </video> <script type="text/javascript"> var player = videojs('my-player',{ document.body.clientWidth, }); </script> </body> </html>
我是uni-app嵌套了一个 html页面
live.vue
<template>
<view class="live" style="padding-bottom: 0;margin-bottom: 0;">
<view style=" 750rpx;height:422rpx;border: 2rpx solid #0062CC;background-color: #000000;">
<web-view style=" 750rpx;" :webview-styles="webviewStyles" src="http://localhost:8848/getBagsMallApp/hybrid/video/video.html"></web-view>
</view>
<scroll-view style="z-index: 9999;background-color: white;" :scroll-top="scrollTop" scroll-y="true" class="live-scroll-view">
<view style=" 750rpx;">
</view>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
scrollTop: 0,
webviewStyles: {
progress: {
color: '#000000',
}
},
}
},
methods: {
onPageScroll(res) { //监听滚动事件
this.Height = res.scrollTop //距离页面顶部距离
},
}
}
</script>
<style scoped>
page {
display: flex;
flex-direction: column;
height: 100%;
100%;
}
.live {
display: flex;
flex-direction: column;
height: 100%;
100%;
}
.live-scroll-view {
100%;
height: 100rpx;
flex-grow: 1;
}
</style>
参考 资料 Windows10环境下 Nginx+ffmpeg 制作本地服务器HLS直播流
Windows10环境下 Nginx+ffmpeg自搭服务器制作RTMP直播流