您现在的位置: 首页 > 微信营销 > 人气美食 > 如何打造自己的平台, 程序员如何打造属于自己的直播平台

如何打造自己的平台, 程序员如何打造属于自己的直播平台

作者:   来源:  热度:11  时间:2021-07-17






写在开始网络直播在中国社会的兴起,肯定是有庞大的市场需求的,这一庞大需求群体当中除去那些围观、好奇、新颖的社交之外就是主要支持群体,想必不用说大家也都能知道那

写在开始

网络直播在中国社会的兴起,肯定是有庞大的市场需求的,这一庞大需求群体当中除去那些围观、好奇、新颖的社交之外就是主要支持群体,想必不用说大家也都能知道那是些什么人。其实还是这个社会闲人太多了,太空虚和寂寞,而通过看直播这种不需要大量投资就可以获得类似于视频聊天支配真人表演的方式成为一些人排解的方法罢了。

当然还有一部分是非常热爱学习的,要区分开来,自己会给自己贴上标签。就比如我们爱学习的程序员和程序媛们,下面跟大家分享一下如何打造属于自己的视频直播平台。

小程序

小程序升级实时音视频录制及播放能力,开放 Wi-Fi、NFC(HCE) 等硬件连接功能。同时提供按需加载、自定义组件和更多访问层级等新特性,增强了第三方平台的能力,以满足日趋丰富的业务需求。

为更高效地连接用户与商家,小程序提供了实时音视频录制及播放组件。符合类目要求的小程序自助开通后,可自建或使用云服务,实现单向、双向甚至多向的音视频功能,如在线授课、远程咨询、视频客服,以及多人会议等。

2017-12-26微信小程序推送了这样一条消息,文档,代码也是简单的一笔带过,用户需要自建或使用云服务,实现单向、双向甚至多向的音视频功能。目前仅支持 flv, rtmp 格式。

本篇博客通过介绍使用nginx的rtmp模块来使nginx服务支持rtmp协议,可以完成推流和播放的功能。

开发环境

Linux (centos7),Nginx (openresty),nginx-rtmp-module

安装

由于之前已经安装过了openresty,详见博文。这里我们只需要安装nginx-rtmp-module模块即可。

下载并解压模块:

  1. wget https://github.com/arut/nginx-rtmp-module/archive/master.zip

  2. unzip  master.zip

停止原来的Nginx服务:

  1. nginx -s stop

配置并编辑:

  1. ./configure --add-module=/home/nginx-rtmp-module-master

  2. make

复制Nginx:

  1. ## 路径根据自己软件路径自行配置

  2. cp /home/openresty/build/nginx-1.11.2/objs/nginx /usr/local/openresty/nginx/sbin

配置rtmp服务:

  1. rtmp {                #RTMP服务

  2.    server {

  3.       listen 1935;  #//服务端口

  4.       chunk_size 4096;   #//数据传输块的大小

  5.       application vod {

  6.           play /opt/video; #//视频文件存放位置。

  7.       }

  8.       application live{ #直播

  9.           live on;

  10.       }

  11.   }

  12. }

检查并启动服务:

  1. nginx -t

  2. nginx

播放

上传一个视频文件test.flv至/opt/video目录。

下载一个VLC media player,工具栏-媒体-打开网络串流-网络,然后偶输入网络URL(rtmp://ip:port/vod/test.flv),点击播放。

回看

实时回看视频服务器的配置:

  1. events {

  2.    use epoll;# 选择epoll模型可以达到最佳的IO性能

  3.    worker_connections  1024;

  4. }

  5. rtmp {                #RTMP服务

  6.    server {

  7.       listen 1935;  #//服务端口

  8.       chunk_size 4096;   #//数据传输块的大小

  9.       application vod {

  10.           play /opt/video; #//视频文件存放位置。

  11.       }

  12.       application rtmplive {

  13.          live on;

  14.          #为 rtmp 引擎设置最大连接数。默认为 off

  15.          max_connections 1024;

  16.       }

  17.       application live{ #直播

  18.           live on;

  19.           hls on; #这个参数把直播服务器改造成实时回放服务器。

  20.           wait_key on; #对视频切片进行保护,这样就不会产生马赛克了。

  21.           hls_path /opt/video/hls; #切片视频文件存放位置。

  22.           hls_fragment  600s;     #设置HLS片段长度。

  23.           hls_playlist_length 10m;  #设置HLS播放列表长度,这里设置的是10分钟。

  24.           hls_continuous on; #连续模式。

  25.           hls_cleanup on;    #对多余的切片进行删除。

  26.           hls_nested on;     #嵌套模式。

  27.       }

  28.   }

  29. }

HTTP服务:

  1. server {

  2.        listen       80;

  3.        server_name  rtmp.52itstyle.com;

  4.        location /stat {

  5.          rtmp_stat all;

  6.           rtmp_stat_stylesheet stat.xsl;

  7.        }

  8.        location /stat.xsl {

  9.            root /home/nginx-rtmp-module-master/;

  10.        }

  11.        location / {

  12.            root   html;

  13.            index  index.html index.htm;

  14.        }

  15.        location /live {  #这里也是需要添加的字段。

  16.            types {  

  17.               application/vnd.apple.mpegurl m3u8;  

  18.               video/mp2t ts;  

  19.            }

  20.            alias /opt/video/hls;

  21.            expires -1;

  22.            add_header Cache-Control no-cache;

  23.            add_header Access-Control-Allow-Origin *;

  24.        }  

  25.        error_page   500 502 503 504  /50x.html;

  26.        location = /50x.html {

  27.            root   html;

  28.        }

  29.    }

微信推流

  1. color: rgb(197, 200, 198);"> webviewId="push" url="rtmp://ip:port/live/itstyle"

  2.    mode="HD"

  3.    autopush ="true"

  4.    bindstatechange="statechange"

  5.    beauty = "10"

  6.    whiteness="10"

  7.    style="width: 300px; height: 225px;" />

手机打开小程序页面,进行视频推流服务,稍后我们会在/opt/video/hls/itstyle 目录下发现一些ts文件和index.m3u8文件。

注意 url中的itstyle可以随便定义,相当于一个房间标识。

PC推流

PC 直播是在 PC(windows/mac)上借助安装的推流软件 OBS(推荐,游戏娱乐解说必备)或者 XSplit 向RTMP视频云的推流地址,推送经过压缩编码现场活动、教学、投影或者游戏等画面,同时观众可以通过和推流地址相对应的播放地址收看实时画面。

PC 直播流程非常简单,主要步骤:

  • 通过RTMP自定义一个推流地址,解决往哪推流的问题;

  • 采用第三方的推流软件,设置推流音视频源以及编码参数,解决推什么内容的问题;

  • 观众就可以使用我们提供的 RTMP DEMO 通过设置播放地址即可进行观看,解决内容触达到观众那里的问题。

推荐阅读:第三方推流工具使用指南

Web播放

xiaozhibo.html:

  1. color: rgb(197, 200, 198);"> lang="zh-cmn-Hans">

  2.    

  3.        color: rgb(197, 200, 198);"> http-equiv="X-UA-Compatible" content="IE=Edge" />

  4.        color: rgb(197, 200, 198);"> http-equiv="Content-Type" content="text/html; charset=UTF-8">

  5.        color: rgb(197, 200, 198);"> name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">

  6.        小直播

  7.        color: rgb(197, 200, 198);"> name="keywords" content="">

  8.        color: rgb(197, 200, 198);"> name="description" content="小直播——直播分享">

  9.        color: rgb(197, 200, 198);"> name="format-detection" content="telephone=no">

  10.        color: rgb(197, 200, 198);"> name="apple-mobile-web-app-capable" content="yes">

  11.        color: rgb(197, 200, 198);"> name="apple-mobile-web-app-status-bar-style" content="black">

  12.        color: rgb(197, 200, 198);"> name="msapplication-tap-highlight" content="no">

  13.        color: rgb(197, 200, 198);"> src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.2.1.js" charset="utf-8">

  14.    

  15.    

  16.        color: rgb(197, 200, 198);"> id="id_test_video" style="width:100%; height:auto;">

  17.        color: rgb(197, 200, 198);"> type="text/javascript">

  18.           var player =  new TcPlayer('id_test_video', {

  19.                "m3u8": "/live/itstyle002/index.m3u8",

  20.                "autoplay" : true,//iOS下safari浏览器,以及大部分移动端浏览器是不开放视频自动播放这个能力的

  21.                "coverpic" : "https://blog.52itstyle.com/usr/uploads/2017/12/2652725976.jpg",

  22.                "width" :  '480',//视频的显示宽度,请尽量使用视频分辨率宽度

  23.                "height" : '320'//视频的显示高度,请尽量使用视频分辨率高度

  24.            });

  25.        

  26.    

跨域问题crossdomain.xml放置在网站根目录:

  1.  color: rgb(197, 200, 198);"> domain="*.qq.com" secure="false"/>

总结

其实做一个视频直播网站或者APP并不难,技术倒不是主要的,只要钱到位,运营到位,用户,流量,技术就都不是问题。如果大家只是做着玩娱乐一下,开源的Nginx+ffmpeg完全可以满足大家的需求。

点击图片查看更多推荐内容

↓↓↓

阿里感悟- 如何准备面试(文末进阶福利)

程序员的3年之痒改变的不止薪水

从京东618秒杀聊聊秒杀限流的多种实现

记一次真实的网站被黑经历

一个有温度的微信公众号

      期待与你共同进步,分享美文

  分享各种Java学习资源

▲长按图片识别二维码关注

阅读原文体验推流直播(一个有温度的微信公众号,期待与你共同进步,分享美文,分享各种Java学习资源)。

转载请注明出处:如何打造自己的平台, 程序员如何打造属于自己的直播平台 :http://www.720weixin.com/marketing/453724.html
  • 登录

    使用微信帐号直接登录,无需注册