近两年时间,视频直播可谓大火。在视频直播领域,有不同的商家提供各种的商业解决方案,包括软硬件设备,摄像机,编码器,流媒体服务器等。本文要讲解的是如何使用一系列免费工具,打造一套视频直播方案。
视频直播流程
视频直播的流程可以分为如下几步:
采集 —>处理—>编码和封装—>推流到服务器—>服务器流分发—>播放器流播放
一般情况下我们把流程的前四步称为第一部分,即视频主播端的操作。视频采集处理后推流到流媒体服务器,第一部分功能完成。第二部分就是流媒体服务器,负责把从第一部分接收到的流进行处理并分发给观众。第三部分就是观众啦,只需要拥有支持流传输协议的播放器即可。
一、采集
采集是整个视频推流过程中的第一个环节,它从系统的采集设备中获取原始视频数据,将其输出到下一个环节。视频的采集涉及两方面数据的采集:音频采集和图像采集,它们分别对应两种完全不同的输入源和数据格式。
1.1-音频采集
1.2-图像采集
视频采集的采集源主要有 摄像头采集、屏幕录制和从视频文件推流。
二、处理
视频或者音频完成采集之后得到原始数据,为了增强一些现场效果或者加上一些额外的效果,我们一般会在将其编码压缩前进行处理,比如打上时间戳或者公司 Logo 的水印,祛斑美颜和声音混淆等处理。在主播和观众连麦场景中,主播需要和某个或者多个观众进行对话,并将对话结果实时分享给其他所有观众,连麦的处理也有部分工作在推流端完成。
如上图所示,处理环节中分为音频和视频处理,音频处理中具体包含混音、降噪和声音特效等处理,视频处理中包含美颜、水印、以及各种自定义滤镜等处理。
三、编码和封装
3.1-编码
⑴.基本原理
⑵.编码器的选择
注:音频编码器有Mp3, AAC等。
3.2-封装
目前,我们在流媒体传输,尤其是直播中主要采用的就是 FLV 和 MPEG2-TS 格式,分别用于 RTMP/HTTP-FLV 和 HLS 协议。
四、推流到服务器
推流是直播的第一公里,直播的推流对这个直播链路影响非常大,如果推流的网络不稳定,无论我们如何做优化,观众的体验都会很糟糕。所以也是我们排查问题的第一步,如何系统地解决这类问题需要我们对相关理论有基础的认识。
推送协议主要有三种:
RTMP协议基于 TCP,是一种设计用来进行实时数据通信的网络协议,主要用来在 flash/AIR 平台和支持 RTMP 协议的流媒体/交互服务器之间进行音视频和数据通信。支持该协议的软件包括 Adobe Media Server/Ultrant Media Server/red5 等。
它有三种变种:
RTMP 是目前主流的流媒体传输协议,广泛用于直播领域,可以说市面上绝大多数的直播产品都采用了这个协议。
RTMP协议就像一个用来装数据包的容器,这些数据可以是AMF格式的数据,也可以是FLV中的视/音频数据。一个单一的连接可以通过不同的通道传输多路网络流。这些通道中的包都是按照固定大小的包传输的。
五、服务器流分发
流媒体服务器的作用是负责直播流的发布和转播分发功能。
流媒体服务器有诸多选择,如商业版的Wowza。但我选择的是Nginx,它是一款优秀的免费Web服务器,后面我会详细介绍如何搭建Nginx服务器。
六、播放器流播放
主要是实现直播节目在终端上的展现。因为我这里使用的传输协议是RTMP, 所以只要支持 RTMP 流协议的播放器都可以使用,譬如:
目前市面上集视频采集、编码、封装和推流于一体的SDK已经有很多了,例如商业版的NodeMedia,但NodeMedia SDK按包名授权,未授权包名应用使用有版权提示信息。
我这里使用的是别人分享在github上的一个免费SDK。因头条发文规则不允许插入外部链接,文章下评论+私信我获取!
下面我就代码分析一下直播推流的过程吧:
先看入口界面:
很简单,一个输入框让你填写服务器的推流地址,另外一个按钮开启推流。
public class StartActivity extends Activity { public static final String RTMPURL_MESSAGE="rtmppush.hx.com.rtmppush.rtm purl"; private Button _startRtmpPushButton=null; private EditText _rtmpUrlEditText=null; private View.OnClickListener _startRtmpPushOnClickedEvent=new View.OnClickListener() { @Override public void onClick(View arg0) { Intent i=new Intent(StartActivity.this, MainActivity.class); String rtmpUrl=_rtmpUrlEditText.getText().toString(); i.putExtra(StartActivity.RTMPURL_MESSAGE, rtmpUrl); StartActivity.this.startActivity(i); } }; private void InitUI(){ _rtmpUrlEditText=(EditText)findViewById(R.id.rtmpUrleditText); _startRtmpPushButton=(Button)findViewById(R.id.startRtmpButton); _rtmpUrlEditText.setText("rtmp://192.168.1.104:1935ve/12345"); _startRtmpPushButton.setOnClickListener(_startRtmpPushOnClickedEvent); } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_start); InitUI(); } }
主要的推流过程在MainActivity里面,同样,先看界面:
布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/cameraRelative" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" android:theme="@android:style/Theme.NoTitleBar.Fullscreen"> <SurfaceView android:id="@+id/surfaceViewEx" android:layout_width="match_parent" android:layout_height="match_parent"/> <Button android:id="@+id/SwitchCamerabutton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBottom="@+id/surfaceViewEx" android:text="@string/SwitchCamera" /> </RelativeLayout>
其实就是用一个SurfaceView显示摄像头拍摄画面,并提供了一个按钮切换前置和后置摄像头。从入口函数看起:
@Override protected void onCreate(Bundle savedInstanceState) { requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON, WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON); super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); Intent intent=getIntent(); _rtmpUrl=intent.getStringExtra(StartActivity.RTMPURL_MESSAGE); InitAll(); PowerManager pm=(PowerManager) getSystemService(Context.POWER_SERVICE); _wakeLock=pm.newWakeLock(PowerManager.SCREEN_DIM_WAKE_LOCK, "My Tag"); }
首先设置全屏显示,常亮,竖屏,获取服务器的推流url,再初始化所有东西。
private void InitAll() { WindowManager wm=this.getWindowManager(); int width=wm.getDefaultDisplay().getWidth(); int height=wm.getDefaultDisplay().getHeight(); int iNewWidth=(int) (height * 3.0 / 4.0); RelativeLayout rCameraLayout=(RelativeLayout) findViewById(R.id.cameraRelative); RelativeLayout.LayoutParams layoutParams=new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT); int iPos=width - iNewWidth; layoutParams.setMargins(iPos, 0, 0, 0); _mSurfaceView=(SurfaceView) this.findViewById(R.id.surfaceViewEx); _mSurfaceView.getHolder().setFixedSize(HEIGHT_DEF, WIDTH_DEF); _mSurfaceView.getHolder().setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS); _mSurfaceView.getHolder().setKeepScreenOn(true); _mSurfaceView.getHolder().addCallback(new SurceCallBack()); _mSurfaceView.setLayoutParams(layoutParams); InitAudioRecord(); _SwitchCameraBtn=(Button) findViewById(R.id.SwitchCamerabutton); _SwitchCameraBtn.setOnClickListener(_switchCameraOnClickedEvent); RtmpStartMessage();//开始推流 }
首先设置屏幕比例3:4显示,给SurfaceView设置一些参数并添加回调,再初始化AudioRecord,最后执行开始推流。音频在这里初始化了,那么相机在哪里初始化呢?其实在SurfaceView的回调函数里。
@Override public void surfaceCreated(SurfaceHolder holder) { _iDegrees=getDisplayOritation(getDispalyRotation(), 0); if (_mCamera !=null) { InitCamera(); //初始化相机 return; } //华为i7前后共用摄像头 if (Camera.getNumberOfCameras()==1) { _bIsFront=false; _mCamera=Camera.open(Camera.CameraInfo.CAMERA_FACING_BACK); } else { _mCamera=Camera.open(Camera.CameraInfo.CAMERA_FACING_FRONT); } InitCamera(); } @Override public void surfaceDestroyed(SurfaceHolder holder) { } }
相机的初始化就在这里啦:
public void InitCamera() { Camera.Parameters p=_mCamera.getParameters(); Size prevewSize=p.getPreviewSize(); showlog("Original Width:" + prevewSize.width + ", height:" + prevewSize.height); List<Size> PreviewSizeList=p.getSupportedPreviewSizes(); List<Integer> PreviewFormats=p.getSupportedPreviewFormats(); showlog("Listing all supported preview sizes"); for (Camera.Size size : PreviewSizeList) { showlog(" w: " + size.width + ", h: " + size.height); } showlog("Listing all supported preview formats"); Integer iNV21Flag=0; Integer iYV12Flag=0; for (Integer yuvFormat : PreviewFormats) { showlog("preview formats:" + yuvFormat); if (yuvFormat==android.graphics.ImageFormat.YV12) { iYV12Flag=android.graphics.ImageFormat.YV12; } if (yuvFormat==android.graphics.ImageFormat.NV21) { iNV21Flag=android.graphics.ImageFormat.NV21; } } if (iNV21Flag !=0) { _iCameraCodecType=iNV21Flag; } else if (iYV12Flag !=0) { _iCameraCodecType=iYV12Flag; } p.setPreviewSize(HEIGHT_DEF, WIDTH_DEF); p.setPreviewFormat(_iCameraCodecType); p.setPreviewFrameRate(FRAMERATE_DEF); showlog("_iDegrees="+_iDegrees); _mCamera.setDisplayOrientation(_iDegrees); p.setRotation(_iDegrees); _mCamera.setPreviewCallback(_previewCallback); _mCamera.setParameters(p); try { _mCamera.setPreviewDisplay(_mSurfaceView.getHolder()); } catch (Exception e) { return; } _mCamera.cancelAutoFocus();//只有加上了这一句,才会自动对焦。 _mCamera.startPreview(); }
还记得之前初始化完成之后开始推流函数吗?
private void RtmpStartMessage() { Message msg=new Message(); msg.what=ID_RTMP_PUSH_START; Bundle b=new Bundle(); b.putInt("ret", 0); msg.setData(b); mHandler.sendMessage(msg); }
Handler处理:
public Handler mHandler=new Handler() { public void handleMessage(android.os.Message msg) { Bundle b=msg.getData(); int ret; switch (msg.what) { case ID_RTMP_PUSH_START: { Start(); break; } } } };
真正的推流实现原来在这里:
private void Start() { if (DEBUG_ENABLE) { File saveDir=Environment.getExternalStorageDirectory(); String strFilename=saveDir + "/aaa.h264"; try { if (!new File(strFilename).exists()) { new File(strFilename).createNewFile(); } _outputStream=new DataOutputStream(new FileOutputStream(strFilename)); } catch (Exception e) { e.printStackTrace(); } } //_rtmpSessionMgr.Start("rtmp://192.168.0.110ve/12345678"); _rtmpSessionMgr=new RtmpSessionManager(); _rtmpSessionMgr.Start(_rtmpUrl); //------point 1 int iFormat=_iCameraCodecType; _swEncH264=new SWVideoEncoder(WIDTH_DEF, HEIGHT_DEF, FRAMERATE_DEF, BITRATE_DEF); _swEncH264.start(iFormat); //------point 2 _bStartFlag=true; _h264EncoderThread=new Thread(_h264Runnable); _h264EncoderThread.setPriority(Thread.MAX_PRIORITY); _h264EncoderThread.start(); //------point 3 _AudioRecorder.startRecording(); _AacEncoderThread=new Thread(_aacEncoderRunnable); _AacEncoderThread.setPriority(Thread.MAX_PRIORITY); _AacEncoderThread.start(); //------point 4 }
里面主要的函数有四个,我分别标出来了,现在我们逐一看一下。首先是point 1,这已经走到SDK里面了
public int Start(String rtmpUrl){ int iRet=0; _rtmpUrl=rtmpUrl; _rtmpSession=new RtmpSession(); _bStartFlag=true; _h264EncoderThread.setPriority(Thread.MAX_PRIORITY); _h264EncoderThread.start(); return iRet; }
其实就是启动了一个线程,这个线程稍微有点复杂
private Thread _h264EncoderThread=new Thread(new Runnable() { private Boolean WaitforReConnect(){ for(int i=0; i < 500; i++){ try { Thread.sleep(10); } catch (InterruptedException e) { e.printStackTrace(); } if(_h264EncoderThread.interrupted() || (!_bStartFlag)){ return false; } } return true; } @Override public void run() { while (!_h264EncoderThread.interrupted() && (_bStartFlag)) { if(_rtmpHandle==0) { _rtmpHandle=_rtmpSession.RtmpConnect(_rtmpUrl); if(_rtmpHandle==0){ if(!WaitforReConnect()){ break; } continue; } }else{ if(_rtmpSession.RtmpIsConnect(_rtmpHandle)==0){ _rtmpHandle=_rtmpSession.RtmpConnect(_rtmpUrl); if(_rtmpHandle==0){ if(!WaitforReConnect()){ break; } continue; } } } if((_videoDataQueue.size()==0) && (_audioDataQueue.size()==0)){ try { Thread.sleep(30); } catch (InterruptedException e) { e.printStackTrace(); } continue; } //Log.i(TAG, "VideoQueue length="+_videoDataQueue.size()+", AudioQueue length="+_audioDataQueue.size()); for(int i=0; i < 100; i++){ byte[] audioData=GetAndReleaseAudioQueue(); if(audioData==null){ break; } //Log.i(TAG, "###RtmpSendAudioData:"+audioData.length); _rtmpSession.RtmpSendAudioData(_rtmpHandle, audioData, audioData.length); } byte[] videoData=GetAndReleaseVideoQueue(); if(videoData !=null){ //Log.i(TAG, "$$$RtmpSendVideoData:"+videoData.length); _rtmpSession.RtmpSendVideoData(_rtmpHandle, videoData, videoData.length); } try { Thread.sleep(1); } catch (InterruptedException e) { e.printStackTrace(); } } _videoDataQueueLock.lock(); _videoDataQueue.clear(); _videoDataQueueLock.unlock(); _audioDataQueueLock.lock(); _audioDataQueue.clear(); _audioDataQueueLock.unlock(); if((_rtmpHandle !=0) && (_rtmpSession !=null)){ _rtmpSession.RtmpDisconnect(_rtmpHandle); } _rtmpHandle=0; _rtmpSession=null; } });
看18行,主要就是一个while循环,每隔一段时间去_audioDataQueue和_videoDataQueue两个缓冲数组中取数据发送给服务器,发送方法_rtmpSession.RtmpSendAudioData和_rtmpSession.RtmpSendVideoData都是Native方法,通过jni调用so库文件的内容,每隔一段时间,这个时间是多少呢?看第4行,原来是5秒钟,也就是说我们的视频数据会在缓冲中存放5秒才被取出来发给服务器,所有直播会有5秒的延时,我们可以修改这块来控制直播延时。
上面说了我们会从_audioDataQueue和_videoDataQueue两个Buffer里面取数据,那么数据是何时放进去的呢?看上面的point 2,3,4。首先是point 2,同样走进了SDK:
public boolean start(int iFormateType){ int iType=OpenH264Encoder.YUV420_TYPE; if(iFormateType==android.graphics.ImageFormat.YV12){ iType=OpenH264Encoder.YUV12_TYPE; }else{ iType=OpenH264Encoder.YUV420_TYPE; } _OpenH264Encoder=new OpenH264Encoder(); _iHandle=_OpenH264Encoder.InitEncode(_iWidth, _iHeight, _iBitRate, _iFrameRate, iType); if(_iHandle==0){ return false; } _iFormatType=iFormateType; return true; }
其实这是初始化编码器,具体的初始化过程也在so文件,jni调用。point 3,4其实就是开启两个线程,那我们看看线程中具体实现吧。
private Thread _h264EncoderThread=null; private Runnable _h264Runnable=new Runnable() { @Override public void run() { while (!_h264EncoderThread.interrupted() && _bStartFlag) { int iSize=_YUVQueue.size(); if (iSize > 0) { _yuvQueueLock.lock(); byte[] yuvData=_YUVQueue.poll(); if (iSize > 9) { Log.i(LOG_TAG, "###YUV Queue len=" + _YUVQueue.size() + ", YUV length=" + yuvData.length); } _yuvQueueLock.unlock(); if (yuvData==null) { continue; } if (_bIsFront) { _yuvEdit=_swEncH264.YUV420pRotate270(yuvData, HEIGHT_DEF, WIDTH_DEF); } else { _yuvEdit=_swEncH264.YUV420pRotate90(yuvData, HEIGHT_DEF, WIDTH_DEF); } byte[] h264Data=_swEncH264.EncoderH264(_yuvEdit); if (h264Data !=null) { _rtmpSessionMgr.InsertVideoData(h264Data); if (DEBUG_ENABLE) { try { _outputStream.write(h264Data); int iH264Len=h264Data.length; //Log.i(LOG_TAG, "Encode H264 len="+iH264Len); } catch (IOException e1) { e1.printStackTrace(); } } } } try { Thread.sleep(1); } catch (InterruptedException e) { // TODO Auto-generated catch block e.printStackTrace(); } } _YUVQueue.clear(); } };
也是一个循环线程,第9行,从_YUVQueue中取出摄像头获取的数据,然后进行视频旋转,第24行,对数据进行编码,然后执行26行,InsertVideoData:
public void InsertVideoData(byte[] videoData){ if(!_bStartFlag){ return; } _videoDataQueueLock.lock(); if(_videoDataQueue.size() > 50){ _videoDataQueue.clear(); } _videoDataQueue.offer(videoData); _videoDataQueueLock.unlock(); }
果然就是插入之前提到的_videoDataQueue的Buffer。这里插入的是视频数据,那么音频数据呢?在另外一个线程,内容大致相同
private Runnable _aacEncoderRunnable=new Runnable() { @Override public void run() { DataOutputStream outputStream=null; if (DEBUG_ENABLE) { File saveDir=Environment.getExternalStorageDirectory(); String strFilename=saveDir + "/aaa.aac"; try { if (!new File(strFilename).exists()) { new File(strFilename).createNewFile(); } outputStream=new DataOutputStream(new FileOutputStream(strFilename)); } catch (Exception e1) { e1.printStackTrace(); } } long lSleepTime=SAMPLE_RATE_DEF * 16 * 2 / _RecorderBuffer.length; while (!_AacEncoderThread.interrupted() && _bStartFlag) { int iPCMLen=_AudioRecorder.read(_RecorderBuffer, 0, _RecorderBuffer.length); // Fill buffer if ((iPCMLen !=_AudioRecorder.ERROR_BAD_VALUE) && (iPCMLen !=0)) { if (_fdkaacHandle !=0) { byte[] aacBuffer=_fdkaacEnc.FdkAacEncode(_fdkaacHandle, _RecorderBuffer); if (aacBuffer !=null) { long lLen=aacBuffer.length; _rtmpSessionMgr.InsertAudioData(aacBuffer); //Log.i(LOG_TAG, "fdk aac length="+lLen+" from pcm="+iPCMLen); if (DEBUG_ENABLE) { try { outputStream.write(aacBuffer); } catch (IOException e) { // TODO Auto-generated catch block e.printStackTrace(); } } } } } else { Log.i(LOG_TAG, "######fail to get PCM data"); } try { Thread.sleep(lSleepTime / 10); } catch (InterruptedException e) { e.printStackTrace(); } } Log.i(LOG_TAG, "AAC Encoder Thread ended ......"); } }; private Thread _AacEncoderThread=null;
这就是通过循环将音频数据插入_audioDataQueue这个Buffer。
以上就是视频采集和推流的代码分析,Demo中并没有对视频进行任何处理,只是摄像头采集,编码后推流到服务器端。
流媒体服务器有诸多选择,如商业版的Wowza。但我选择的是免费的Nginx(nginx-rtmp-module)。Nginx本身是一个非常出色的HTTP服务器,它通过nginx的模块nginx-rtmp-module可以搭建一个功能相对比较完善的流媒体服务器。这个流媒体服务器可以支持RTMP和HLS。
Nginx配合SDK做流媒体服务器的原理是: Nginx通过rtmp模块提供rtmp服务, SDK推送一个rtmp流到Nginx, 然后客户端通过访问Nginx来收看实时视频流。 HLS也是差不多的原理,只是最终客户端是通过HTTP协议来访问的,但是SDK推送流仍然是rtmp的。
集成rtmp模块的windows版本的Nginx。下载后,即可直接使用,因头条发文规则不允许插入外部链接,文章下评论+私信我获取!
1、rtmp端口配置
配置文件在/conf/nginx.conf
RTMP监听 1935 端口,启用live 和hls 两个application
所以你的流媒体服务器url可以写成:rtmp://(服务器IP地址):1935/live/xxx 或 rtmp://(服务器IP地址):1935/hls/xxx
例如我们上面写的 rtmp://192.168.1.104:1935/live/12345
HTTP监听 8080 端口,
2、启动nginx服务
双击nginx.exe文件或者在dos窗口下运行nginx.exe,即可启动nginx服务:
1)启动任务管理器,可以看到nginx.exe进程
2)打开网页输入http://localhot:8080,出现如下画面:
显示以上界面说明启动成功。
主播界面:
上面说过了只要支持RTMP流传输协议的播放器都可以收看到我们的直播。下面举两个例子吧:
(1)window端播放器VLC
(2)android端播放器ijkplayer
private void initPlayer() { player=new PlayerManager(this); player.setFullScreenOnly(true); player.setScaleType(PlayerManager.SCALETYPE_FILLPARENT); player.playInFullScreen(true); player.setPlayerStateListener(this); player.play("rtmp://192.168.1.104:1935ve/12345"); }
到这里整个基于RTMP推流实现Android视频直播的项目已经完成了,如有你有更好的想法可以在文章下方评论留言或私信我!另外前文中第二部分提到的推流SDK以及第三部分提到的已经集成rtmp模块的windows版本的Nginx下载地址由于头条发文规则不允许插入外部链接,如有需要的可以再文章下留言评论后私信我回复【下载地址】获取!
验目的:让Nginx支持flv和mp4格式文件,同时支持Rtmp协议;同时打开rtmp的hls功能
资料:
HTTP Live Streaming(缩写是 HLS)是一个由苹果公司提出的基于HTTP的流媒体 网络传输协议。
HLS只请求基本的HTTP报文,与实时传输协议(RTP)不同,HLS可以穿过任何允许HTTP数据通过的防火墙或者代理服务器。它也很容易使用内容分发网络来传输媒体流。
使用ffmpeg来完成对flv、mp4、mp3等格式的转化(点播实验暂时不测试)
一、流媒体播放方式
1、 HTTP方式
这种方式要下载FLV视频文件到本地播放,一旦FLV视频文件下载完成,就不会消耗服务器的资源和带宽,但是拖动功能没有RTMP/RTMP流媒体方式强大,很多视频网站都是用HTTP方式实现的,如:YouTube,土豆,酷6等
2、 RTMP/RTMP流媒体方式
这种方式不用下载FLV视频文件到本地,可以实时的播放flv文件,可以任意拖拽播放进度条,但是比较消耗服务器的资源。
二、使用nginx来搭建flv流媒体服务器
1.安装git
yum install git
2.安装依赖包
yum -y install gcc glibc glibc-devel make nasm pkgconfig lib-devel openssl-devel expat-devel gettext-devel libtool mhash.x86_64 perl-Digest-SHA1.x86_64
3、安装ffmpeg及其依赖包(我的依赖包安装在/usr/local/src下,不过安装位置可以根据个人习惯而定)
以下安装包能用yum安装的,尽量用yum来安装,没有的再wget来获得。
#wget http://www.tortall.net/projects/yasm/releases/yasm-1.2.0.tar.gz
#tar xzvf yasm-1.2.0.tar.gz
#cd yasm-1.2.0
#./configure
#make
#make install
#cd ..
#git clone git://git.videolan.org/x264
#cd x264
#./configure --enable-shared
#make
#make install
#cd ..
#wget http://downloads.sourceforge.net/project/lame/lame/3.99/lame-3.99.5.tar.gz
#tar xzvf lame-3.99.5.tar.gz
#cd lame-3.99.5
#./configure --enable-nasm
#make
#make install
#cd ..
#yum install libogg
注:libogg根据网上各版本教程都是用的.tar.gz包来安装,不过安装后再安装libvorbis,libvpx等会发现找不到libogg安装位置,导致安装失败。
#wget http://downloads.xiph.org/releases/vorbis/libvorbis-1.3.3.tar.gz
#tar xzvf libvorbis-1.3.3.tar.gz
#cd libvorbis-1.3.3
#./configure
#make
#make install
#cd ..
#git clone http://git.chromium.org/webm/libvpx.git
#cd libvpx
#./configure --enable-shared
#make
#make install
#cd ..
#wget http://downloads.sourceforge.net/project/faac/faad2-src/faad2-2.7/faad2-2.7.tar.gz
#tar zxvf faad2-2.7.tar.gz
#cd faad2-2.7
#./configure
#make
#make install
#cd ..
#wget http://downloads.sourceforge.net/project/faac/faac-src/faac-1.28/faac-1.28.tar.gz
#tar zxvf faac-1.28.tar.gz
#cd faac-1.28
#./configure
#make
#make install
#cd ..
#wget http://downloads.xvid.org/downloads/xvidcore-1.3.2.tar.gz
#tar zxvf xvidcore-1.3.2.tar.gz
#cd xvidcore/build/generic
#./configure
#make
#make install
#cd ..
#git clone git://source.ffmpeg.org/ffmpeg
#cd ffmpeg
#./configure --prefix=/opt/ffmpeg/ --enable-version3 --enable-libvpx --enable-libfaac --enable-libmp3lame --enable-libvorbis --enable-libx264 --enable-libxvid --enable-shared --enable-gpl --enable-postproc --enable-nonfree --enable-avfilter --enable-pthreads
#make && make install
#cd ..
修改/etc/ld.so.conf如下:
include ld.so.conf.d/*.conf
/lib
/lib64
/usr/lib
/usr/lib64
/usr/local/lib
/usr/local/lib64
/opt/ffmpeg/lib
三、安装nginx模块
#wget http://h264.code-shop.com/download/nginx_mod_h264_streaming-2.2.7.tar.gz
#tar zxvf nginx_mod_h264_streaming-2.2.7.tar.gz
#git clone git://github.com/arut/nginx-rtmp-module.git
#yum install pcre
nginx没有找到地址,只能手动下载,然后上传了。
#tar zxvf nginx-1.2.6.tar.gz
#cd nginx-1.2.6
#./configure --prefix=/usr/local/nginx --add-module=../nginx_mod_h264_streaming-2.2.7 --with-http_flv_module --with-http_gzip_static_module --with-http_stub_status_module --with-http_mp4_module --add-module=../nginx-rtmp-module --add-module=../nginx-rtmp-module/hls --with-cc-opt=-I/opt/ffmpeg/include --with-ld-opt='-L/opt/ffmpeg/lib -Wl,-rpath=/opt/ffmpeg/lib'
#make && make install
安装yamdi
yadmi的作用是为flv文件添加关键帧,才能实现拖动播放
#下载yadmi
wget http://sourceforge.net/projects/yamdi/files/yamdi/1.4/yamdi-1.4.tar.gz/download
#安装yadmi
tar xzvf yamdi-1.4.tar.gz
cd yamdi-1.4
make && make install
使用方法:yamdi -i input.flv -o out.flv
给input.flv文件 添加关键帧,输出为out.flv文件
四、修改nginx主配置文件
vi /usr/local/nginx/conf/nginx.conf
user www www;
worker_processes 30;
error_log /usr/local/nginx/logs/error.log crit;
pid /usr/local/nginx/logs/nginx.pid;
events {
use epoll;
worker_connections 65535;
}
http {
include mime.types;
default_type application/octet-stream;
log_format main '$remote_addr - $remote_user [$time_local] '
'"$request" $status $bytes_sent '
'"$http_referer" "$http_user_agent" '
'"$gzip_ratio"';
keepalive_timeout 60;
server_names_hash_bucket_size 128;
client_header_buffer_size 32k;
large_client_header_buffers 4 32k;
access_log off;
gzip on;
gzip_min_length 1100;
gzip_buffers 4 8k;
gzip_types text/plain;
output_buffers 1 32k;
postpone_output 1460;
client_header_timeout 3m;
client_body_timeout 3m;
send_timeout 3m;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
server {
listen 80;
server_name 192.168.1.105;
root /usr/local/nginx/html/;
limit_rate_after 5m; ####在flv视频文件下载了5M以后开始限速
limit_rate 512k; ####速度限制为512K
index index.html;
charset utf-8;
location ~ \.flv {
flv;
}
location ~ \.mp4$ {
mp4;
}
error_page 500 502 503 504 /50x.html;
location=/50x.html {
root html;
}
}
}
五、启动nginx
ue-video-player(5.0.2)
最近我的项目做了一个监控视屏的显示,后台提供的视屏格式是rtmp
后来又改为m3u8,没成功,原因是占用内存过大,所以取消了这种方式
npm i vue-video-player -S
npm i videojs-flash -S ______播放rtmp
npm i videojs-contrib-hls -S ______播放m3u8
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css' //videoJs的样式
// import 'vue-video-player/src/custom-theme.css' //vue-video-player的样式
import 'videojs-flash'; //引入才能播放rtmp视屏
// import 'videojs-contrib-hls' //引入才能播放m3u8文件
Vue.use(VideoPlayer)
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
@ended="onPlayerEnded($event)"
></video-player>
//完整的配置数据(不要的可以直接注释掉)
data(){
return {
playerOptions:{
playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
// fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [{
type: "application/x-mpegURL",//这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
src: "" //url地址
}],
// hls:true, //如果是播放m3u8必须加(需注释掉techOrder,不然会有报错)
techOrder: ['flash'], //播放rtmp必须加
poster: "", //你的封面地址
notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
fullscreenToggle: true //全屏按钮
}
}
}
}
1、设置了autoplay: true 不能自动播放,原因是我这里播放视频的窗口小于了400x400
2、如何使用外部按钮点击全屏
//点击全屏播放
handleFullScreen(index){
const player=this.$refs.videoPlayer.player;
player.requestFullscreen();//调用全屏api方法
player.isFullscreen(true)
player.play()
}
*请认真填写需求信息,我们会在24小时内与您取得联系。