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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349

推荐阅读更多精彩内容