近兩年時間,視頻直播可謂大火。在視頻直播領域,有不同的商家提供各種的商業解決方案,包括軟硬件設備,攝像機,編碼器,流媒體服務器等。本文要講解的是如何使用一系列免費工具,打造一套視頻直播方案。
視頻直播流程
視頻直播的流程可以分為如下幾步:
采集 —>處理—>編碼和封裝—>推流到服務器—>服務器流分發—>播放器流播放
一般情況下我們把流程的前四步稱為第一部分,即視頻主播端的操作。視頻采集處理后推流到流媒體服務器,第一部分功能完成。第二部分就是流媒體服務器,負責把從第一部分接收到的流進行處理并分發給觀眾。第三部分就是觀眾啦,只需要擁有支持流傳輸協議的播放器即可。
一、采集
采集是整個視頻推流過程中的第一個環節,它從系統的采集設備中獲取原始視頻數據,將其輸出到下一個環節。視頻的采集涉及兩方面數據的采集:音頻采集和圖像采集,它們分別對應兩種完全不同的輸入源和數據格式。
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小時內與您取得聯系。