一、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',{ width:document.body.clientWidth, }); </script> </body> </html>
我是uni-app嵌套了一個 html頁面
live.vue
<template>
<view class="live" style="padding-bottom: 0;margin-bottom: 0;">
<view style="width: 750rpx;height:422rpx;border: 2rpx solid #0062CC;background-color: #000000;">
<web-view style="width: 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="width: 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%;
width: 100%;
}
.live {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
}
.live-scroll-view {
width: 100%;
height: 100rpx;
flex-grow: 1;
}
</style>
參考 資料 Windows10環境下 Nginx+ffmpeg 制作本地服務器HLS直播流
Windows10環境下 Nginx+ffmpeg自搭服務器制作RTMP直播流
在windows下搭建、配置nginx流媒體服務器，並進行rtmp流的推流、拉流測試