H5 plug-flow solutions, test environment Guide

A. The deployment server

centos (Ali cloud server system)
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 / the install.sh | the bash
4.source ~ / .nvm / nvm.sh
5.nvm use Node
6.npm I -g HTTP-Server

7.cd jsmpeg
8.npm install WS # Note that no -g
9.node the WebSocket-Relay # 123 running in the background the WebSocket the Node-Relay 123 nohup &
10.http #-Server running in the background nohup http-server &

Currently it is no time to get Android version of ffmpeg compiled and installed. However, to achieve this connection: https://blog.csdn.net/u014418171/article/details/53337759
so fast version linux ffmpeg plug flow for the camera.

1. First, download the linuxmint-17.3-xfce-32bit.iso. Download self-Baidu. You can also install other versions of linux. Ffmpeg compile their own guarantee on the line. Linux version of ffmpeg compiled this non-issue, it can not solve.
2. be made into linux installation disk with Universal-USB-Installer-1.9.8.0.exe.
3. Open bios industrial host, arranged to start u disk, insert the disk u. Linux system to perform the installation.
4. Download and extract ffmpeg-3.4.2. Enter the unpacked directory.
clone git https://git.ffmpeg.org/ffmpeg.git ffmpeg
# Then execute sudo apt-get install yasm install yasm
cd ffmpeg
APT-GET install Build-Essential
./configure
./configure --enable-Shared - yasm---prefix = disable / usr / local / FFmpeg
the make
the sudo the install the make
test. Enter ffmpeg displayed version represents the successful installation

5. https://github.com/phoboslab/jsmpeg to download jsmpeg. This is h5 play streaming video with the push. See https://segmentfault.com/a/1190000000392586
git clone https://github.com/phoboslab/jsmpeg.git
6. ws now need to install node and run jsmpeg. Please follow this link https://blog.csdn.net/gaomengwang/article/details/77540429 complete node and npm install.
-qO- wget https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
after the need to activate NVM:
$ Source ~ / .nvm / nvm.sh
activation is complete, install the Node
NVM install node
after installation, switch to this version
nvm use node
7. after installation nodejs and npm. I -g install HTTP-Server npm
8. Andrews websocket to jsmpeg / directory cd jsmpeg / install Node.js Websocket library: npm install -g ws

==== Start Test

1. Go to jsmpeg
the Node where the WebSocket-123 Relay 123 is your password
2. Enter http-server start a web service
3. Your computer browser input http://192.168.0.124:8080/view-stream.html here is to wait h5 default playback video link address. Which is in front of your actual ip the host ip address linux industry.
4. Now enter -i -Re FFmpeg "aa.mp4" -f MPEGTS -codec: V mpeg1video 640x480 -b -s: 30 -R & lt -BF 0 V 150K -ac. 1 -b: A 128K HTTP: //192.168. 0.116: 8081/123
to quickly test the audio plug flow. Provided there is aa.mp4 this file in your current directory. Successful, you should be able to see the screen in the browser page.
5. Push the camera data stream
RTMP: //114.55.36.228/live/DZJ001_1
FFmpeg -f Video4Linux2 -framerate 640x480 25 -video_size -i / dev / video0 -f MPEGTS -codec: V mpeg1video -s 640x480 -b: V 1000K - 0 bf http://192.168.0.124:8081/123

Success, then you can see the screen in the browser. Combine audio input plug flow, have not done the test, push yourself Baidu how to use ffmpeg streaming audio and video.

Address allocations for plug flow, but the password 123 of plug flow. If you want to use a non-default plug-flow address Please note that the plug-flow when
ffmpeg -re -i "aa.mp4" -f mpegts -codec: v mpeg1video -s 640x480 -b: v 150k -r 30 -bf 0 -ac -b. 1: a 128K http://192.168.0.116:8081/123/abc/MAC_1
this time, it is necessary to modify the content view_stream.html var url = 'ws: //'+document.location.hostname+' : 8082 / abc / MAC_1 '; or you can pass parameters to make this page dynamic way to play the video. I have no further extensions.

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 embedded web page can be found

     #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 altitude install -gn
sudo latest n

Published 45 original articles · won praise 7 · views 10000 +

Guess you like

Origin blog.csdn.net/weixin_38407447/article/details/84426647