码迷,mamicode.com
首页 > 移动开发 > 详细

手机浏览器 H5直播

时间:2020-05-23 18:24:23      阅读:251      评论:0      收藏:0      [点我收藏+]

标签:path   size   processes   tran   article   details   ogre   页面   图片   

一、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流的推流、拉流测试

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

 

手机浏览器 H5直播

标签:path   size   processes   tran   article   details   ogre   页面   图片   

原文地址:https://www.cnblogs.com/aknife/p/12943567.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!