全栈开发——动手打造属于自己的直播间（Vue+SpringBoot+Nginx）的补充使用说明

全栈开发——动手打造属于自己的直播间（Vue+SpringBoot+Nginx）的补充使用说明

   这几天应学姐的要求，需要做一个直播的小网站用来内部考核，我一想这个直播，不会啊，就去GitHub上找找有什么易学的项目没有，然后就发现了这个项目以及作者写的使用说明。但是看了作者的使用说明，一些地方还是不明了，于是这篇补充说明就出世了，希望可以帮助到学习这个项目的人。

全栈开发——动手打造属于自己的直播间（Vue+SpringBoot+Nginx）

使用说明

服务端

   首先直播服务需要视频服务器，作者本人选择的是Nginx+Nginx-rtmp-module来做视频服务，我就找了个Centos 7的服务器来配置。配置过程按照此博客来配置 从零搭建流媒体服务器+obs推流直播，此博客缺少了首次启动nginx的命令，此命令为：

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

当然我们的Nginx的配置文件内容还是要用原作者的配置文件。原作者的配置文件的第二个（关于配置server）少一个大括号（添加上去或者只复制中间的配置内容），然后有可能在执行运行命令后会报这样的一个错误：

ginx: [emerg] mkdir() "/yjdata/www/www/live/hls/" failed (2: No such file or directory)

这个时候执行下面这个创建文件夹的命令就可以。

mkdir -p /yjdata/www/www/live/hls/

再继续执行启动命令，这个时候输入你的服务器IP就可以看到nginx已经启动成功了。

  再接着配置redis、Erlang、RabbitMQ。具体配置百度就可以，不过需要注意Erlang、RabbitMQ的版本依赖问题， RabbitMQ Erlang版本要求。

  接着将服务端的项目从Github上拉到本地进行修改测试，用IDEA打开以后，我们首先进入pom.xml中将下面这段代码注释掉。它的作用是移除Spring boot中嵌入的tomcat插件。

            
                
                    org.springframework.boot
                    spring-boot-starter-tomcat
                
             

  将下面这段代码注释掉。它在于项目打成war包会用到。

        
            javax.servlet
            javax.servlet-api
            3.1.0
            provided
        

  然后打开application.properties文件，查看数据库名字，如果我们的redis设置了密码，则填写密码，无则不用管。

  然后打开LiveRoomDemo_Server\src\main\java\com\hushangjie\entity包下面的UserEntity类，查看数据库名字和字段（看清表名以及字段名，主键是ip字段），在mysql数据库中自己建表。

  然后可以运行项目跑跑看，网址为

http://localhost:8085/live_room

  界面为：

  接着有可能项目运行过程中会有这样的错误产生：

Failed to connect to reactor.io.net.impl.netty.tcp.NettyTcpClient

  这是因为需要使用以下命令在RabbitMQ上启用stomp代理，在命令提示符中执行以下命令（环境变量要配好）。

rabbitmq-plugins enable rabbitmq_stomp

  然后此时的项目还未真正的跑起来，因为聊天室，以及直播都不可用呢，我们此时要做的事就是将项目中的live.html和app.10bab200145280966f5b.js中的LiveDemo（机灵点，有的地方/也要删掉）找出来删除掉，为什么删除掉？这是因为这是作者打war包后部署到服务器上的项目的名字。此时无论时电脑端，还是手机端的聊天室都可以正常的工作了。

  接着继续说直播的事情，首先手机下载 yasea-apk用于直播推流。推流地址为

rtmp://你的服务器IP:1935/live/随便一个英文字符串
如：rtmp://127.0.0.1:1935/live/mlm

  拉流地址与上面相同。

  接着我们回到live界面，找到这段javascript代码，将其中的src中的内容改为你的推拉流地址。

                videoInit(){
                    this.videoPlayer = videojs('v-player', {
                            //初始化数据
                            height: '439px',
                            width: '640px',
                            "techOrder": ["html5", "flash"],
                            controls: true,
                            "autoplay": true,
                            sources: [{
                                /*rtmp://live.hkstv.hk.lxdns.com/live/hks*/
                                src: 'rtmp://127.0.0.1:1935/live/mlm',
                                type: 'rtmp/mp4'
                            }]
                        },
                        function () {
                            this.on('loadeddata', function () {
                                console.log(this)
                            })

                            this.on('pause', function () {
                                //alert('pause')
                            })
                        }

  然后再继续往下面找到这段javascript代码，将其中的rtmp地址改为你的推拉流地址。

        function changeSrc(){
            alert("请使用推流软件(OBS等)，推送到rtmp://127.0.0.1:1935/live/mlm,即可在本直播间看到您的直播内容!")
            chatroom.videoPlayer.src('rtmp://127.0.0.1:1935/live/mlm')
            chatroom.videoPlayer.load('rtmp://127.0.0.1:1935/live/mlm');
            chatroom.videoPlayer.play()
        }

  然后启动项目，打开推流软件开始推流。有可能直播区域显示下面这样一句话。

no compatible source was found for this media

no compatible source was found for this media解决方案

然后就可以愉快的使用作者开发的直播网站了，仅作学习使用。大家看完后还有不会使用再评论问我，我会一一解答。