linux下ffmpeg + livego+flv.js直播推流demo

1、检测linux服务器是否安装编译换

遇到的错误：make:*No targets specified and no makefile found. Stop.

查看 gcc 版本gcc -v

若无安装，则运行yum install gcc-c++

确保 gcc 是安装成功的，

2、安装yasm

下载yasm的source.tar.gz包，下载地址： http://yasm.tortall.net/Download.html 下载页面如下：

下载之后上传至Linux准备安装，首先解压安装包

tar -xvzf yasm-1.3.0.tar.gz

cd yasm-1.3.0/

./configure

make

make install

3、Linux下安装ffmpeg

安装成功之后继续回到ffmpeg解压后的目录，执行下面命令编译并安装

./configure --enable-shared --prefix=/monchickey/ffmpeg

make

make install

make编译过程有点长

make install会把ffmpeg相关执行程序、头文件、lib库安装在/monchickey/ffmpeg/下

cd  /monchickey/ffmpeg/bin

./ffmpeg -version 会报错误，需要创建一个文件并写入lib路径即可，执行命令： vim /etc/ld.so.conf.d/ffmpeg.conf

然后添加一行内容： /monchickey/ffmpeg/lib

之后保存并退出，然后执行 ldconfig 使配置生效，

现在再次执行 ./ffmpeg -version 显示就正常了

4、部署livego程序

编译好livego程序，具体怎么编译查看livego的https://github.com/gwuhaolin/livego说明

上传livego，livego.cfg,gorelease.yaml文件，放同一目录，然后执行运行

先运行livego程序，然后执行推流， ./ffmpeg -re -i 300.mp4 -c copy -f flv rtmp://localhost:1935/live/movie

5、部署nginx

编辑nginx.conf文件，指向路面改为flv.js存放的目录，然后重启

6、部署flv.js前端播放器

先编译好flv.js文件，具体编辑参考https://github.com/bilibili/flv.js,  建议使用cnpm编译

部署flv.js,在生成的dist目录外新建个文件，把下面代码拷贝进入，其中地址改为：http://127.0.0.1:7001/live/movie.flv

index.hmtl代码

   

   

   

   

       

           

               

                    Stream URL:

                   

                    Switch to MediaDataSource

               

               

                   

                    isLive

                   

                    withCredentials

                   

                    hasAudio

                   

                    hasVideo

               

           

           

               

                    MediaDataSource JsonURL:

                   

                    Switch to URL

               

           

       

       

           

               

                    Your browser is too old which doesn't support HTML5 video.

               

           

       

       

            Load

            Start

            Pause

            Destroy

           

            SeekTo

       

       

   

   

   

demo.css 代码

.mainContainer {

    display: block;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

}

@media screen and (min-width: 1152px) {

    .mainContainer {

        display: block;

        width: 1152px;

        margin-left: auto;

        margin-right: auto;

    }

}

.video-container {

    position: relative;

    margin-top: 8px;

}

.video-container:before {

    display: block;

    content: "";

    width: 100%;

    padding-bottom: 56.25%;

}

.video-container > div {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

}

.video-container video {

    width: 100%;

    height: 100%;

}

.urlInput {

    display: block;

    width: 100%;

    margin-left: auto;

    margin-right: auto;

    margin-top: 8px;

    margin-bottom: 8px;

}

.centeredVideo {

    display: block;

    width: 100%;

    height: 100%;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: auto;

}

.controls {

    display: block;

    width: 100%;

    text-align: left;

    margin-left: auto;

    margin-right: auto;

    margin-top: 8px;

    margin-bottom: 10px;

}

.logcatBox {

    border-color: #CCCCCC;

    font-size: 11px;

    font-family: Menlo, Consolas, monospace;

    display: block;

    width: 100%;

    text-align: left;

    margin-left: auto;

    margin-right: auto;

}

.url-input , .options {

    font-size: 13px;

}

.url-input {

    display: flex;

}

.url-input label {

    flex: initial;

}

.url-input input {

    flex: auto;

    margin-left: 8px;

}

.url-input button {

    flex: initial;

    margin-left: 8px;

}

.options {

    margin-top: 5px;

}

.hidden {

    display: none;

}