H5推流解決方案測試環境搭建指南

部署服務器端
centos (阿里云服務器系統)
1.sudo yum install git
2.git clone https://github.com/phoboslab/jsmpeg.git
3.wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
4.source ~/.nvm/nvm.sh
5.nvm use node
6.npm i -g http-server

7.cd jsmpeg
8.npm install ws #注意這里沒有-g
9.node websocket-relay 123 #后臺運行 nohup node websocket-relay 123 &
10.http-server #后臺運行 nohup http-server &

目前暫時還沒時間搞定ffmpeg的安卓版本編譯安裝。但實現連接在這里:https://blog.csdn.net/u014418171/article/details/53337759
所以快速版本使用linux進行ffmpeg推流攝像頭。

1.首先下載linuxmint-17.3-xfce-32bit.iso 。下載地址自行百度。 也可以安裝其他版本的linux。自己保證ffmpeg編譯通過就行。非本版本的linux編譯ffmpeg問題,本人無力解決。
2.將其用Universal-USB-Installer-1.9.8.0.exe 制作成linux安裝盤。
3.打開工業主機的bios,設置成u盤啟動,插入該u盤。執行linux系統安裝。
4.下載ffmpeg-3.4.2 并解壓。進入解壓后的目錄。
git clone https://git.ffmpeg.org/ffmpeg.git ffmpeg
#然后執行sudo apt-get install yasm 先安裝yasm
cd ffmpeg
apt-get install build-essential
./configure
./configure --enable-shared --disable-yasm --prefix=/usr/local/ffmpeg
make
sudo make install
測試。 輸入ffmpeg 顯示有version表示安裝成功

5.到https://github.com/phoboslab/jsmpeg 下載jsmpeg。這是h5播放推流視頻用的。詳見https://segmentfault.com/a/1190000000392586
git clone https://github.com/phoboslab/jsmpeg.git
6.現在需要安裝node 和 ws來運行jsmpeg。請按照這個鏈接 https://blog.csdn.net/gaomengwang/article/details/77540429 完成node 和npm的安裝。
wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
之后需要激活nvm:
$ source ~/.nvm/nvm.sh
激活完成后,安裝node
nvm install node
安裝完成后,切換到該版本
nvm use node
7.安裝完nodejs和npm后。先安裝npm i -g http-server
8.安卓websocket 轉到jsmpeg /目錄 cd jsmpeg/ 安裝Node.js Websocket庫: npm install -g ws

====啟動測試
1.進入jsmpeg
node websocket-relay 123 其中123是你的密碼
2.輸入http-server 啟動web服務
3.你電腦的瀏覽器輸入 http://192.168.0.124:8080/view-stream.html 這里就是等下播放h5視頻的默認鏈接地址。其中 前面的ip是你實際的該linux工業主機ip地址。
4.現在輸入ffmpeg -re -i "aa.mp4" -f mpegts -codec:v mpeg1video -s 640x480 -b:v 150k -r 30 -bf 0 -ac 1 -b:a 128k http://192.168.0.116:8081/123
來快速測試 音頻推流。 前提是你的當前目錄下有aa.mp4這個文件。成功的話,應該能夠在瀏覽器的該頁面中看到畫面。
5.推流攝像頭數據
rtmp://114.55.36.228/live/DZJ001_1
ffmpeg -f video4linux2 -framerate 25 -video_size 640x480 -i /dev/video0 -f mpegts -codec:v mpeg1video -s 640x480 -b:v 1000k -bf 0 http://192.168.0.124:8081/123

成功的話也可以在瀏覽器看到該畫面。 結合音頻輸入推流,還沒有做測試,請自己百度如何使用ffmpeg推流音頻和視頻。

關于推流地址的分配,123只是推流的密碼。如果你要使用非默認的推流地址 請注意推流的時候
ffmpeg -re -i "aa.mp4" -f mpegts -codec:v mpeg1video -s 640x480 -b:v 150k -r 30 -bf 0 -ac 1 -b:a 128k http://192.168.0.116:8081/123/abc/MAC_1
這時候,需要修改view_stream.html的內容為var url = 'ws://'+document.location.hostname+':8082/abc/MAC_1'; 或者你可以用傳參的方式令這個頁面動態播放視頻。本人沒有深入擴展。

ffmpeg -re -i "aa.mp4" -f mpegts -codec:v mpeg1video -s 640x480 -b:v 150k -r 30 -bf 0 -ac 1 -b:a 128k http://120.79.88.118:8081/123

app內嵌網頁 可參看

 #MainActivity.java
 package com.yijue.hello.mpegplayer;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {
    private WebView mWebView;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    init();

}
private void init(){
    setContentView(R.layout.activity_main);
    //WebView
    WebView browser=(WebView)findViewById(R.id.webView);
    browser.loadUrl("http://192.168.1.142:8080/view-stream.html");

    //設置可自由縮放網頁
    browser.getSettings().setSupportZoom(true);
    browser.getSettings().setBuiltInZoomControls(true);

    // 如果頁面中鏈接,如果希望點擊鏈接繼續在當前browser中響應,
    // 而不是新開Android的系統browser中響應該鏈接,必須覆蓋webview的WebViewClient對象
    browser.setWebViewClient(new WebViewClient() {
        public boolean shouldOverrideUrlLoading(WebView view, String url)
        {
            //  重寫此方法表明點擊網頁里面的鏈接還是在當前的webview里跳轉,不跳到瀏覽器那邊
            view.loadUrl(url);
            return true;
        }
    });

    //啟用支持javascript
    WebSettings settings = browser.getSettings();
    settings.setJavaScriptEnabled(true);


//        webView.setWebChromeClient(new WebChromeClient() {
//            @Override
//            public void onProgressChanged(WebView view, int newProgress) {
//                // TODO Auto-generated method stub
//                if (newProgress == 100) {
//                    // 網頁加載完成
//
//                } else {
//                    // 加載中
//
//                }
//
//            }
//        });
    //WebView加載web資源
//        webView.loadUrl("https://www.baidu.com/");
//        webView.getSettings().setCacheMode(WebSettings.LOAD_NO_CACHE);
    //覆蓋WebView默認使用第三方或系統默認瀏覽器打開網頁的行為,使網頁用WebView打開
//        webView.setWebViewClient(new WebViewClient(){
//            @Override
//            public boolean shouldOverrideUrlLoading(WebView view, String url) {
//                // TODO Auto-generated method stub
//                //返回值是true的時候控制去WebView打開,為false調用系統瀏覽器或第三方瀏覽器
//                view.loadUrl(url);
//                return true;
//            }
//        });
    }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/webView"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    />

ubuntu
1.自帶 ffmpeg
sudo curl -L https://npmjs.org/install.sh | sh
2.sudo apt install nodejs
sudo apt install nodejs-legacy
3.sudo apt install aptitude
4.sudo aptitude install npm
5.sudo npm i -g http-server
6.sudo npm install -g ws

sudo npm install -g n
sudo n latest

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容