フロント – ページ 13 – 今日という日は贈り物

概要

ffmpegのインストール
mp4ファイルの用意
m3u8リスト ts分割
apacheのmime type追加
ファイルの配置とm3u8の編集
HTMLページを作成してアクセスしてみる

詳細

ffmpegのインストール

sudo apt-get install ffmpeg

1	sudo apt-get install ffmpeg

mp4ファイルの用意

手持ちのデータを利用する！

m3u8リスト ts分割

分割前のファイルを happy.mp4 とします。
分割後のリストファイルを stream.m3u8 分割ファイルを stream000.ts とします。(000の所は001,002,…と増えていきます)

mkdir stream
ffmpeg -i happy.mp4 -acodec copy -vcodec copy -vbsf h264_mp4toannexb -map 0 -f segment -segment_format mpegts -segment_time 30 -segment_list stream.m3u8 -segment_list_flags -cache stream/stream%03d.ts

1 2	mkdir stream ffmpeg -i happy.mp4 -acodec copy -vcodec copy -vbsf h264_mp4toannexb -map 0 -f segment -segment_format mpegts -segment_time 30 -segment_list stream.m3u8 -segment_list_flags -cache stream/stream%03d.ts

apacheのmime type追加

mine typeに以下を追加します

AddType application/x-mpegURL .m3u8
AddType video/MP2T            .ts

1 2	AddType application/x-mpegURL .m3u8 AddType video/MP2T .ts

ubuntuのdefaultに追加する場合

vi /etc/apache2/sites-enabled/000-default.conf
---
AddType application/x-mpegURL .m3u8
AddType video/MP2T            .ts
---

sudo /etc/init.d/apache reload

vi /etc/apache2/sites-enabled/000-default.conf

---

AddType application/x-mpegURL .m3u8

AddType video/MP2T .ts

---

sudo /etc/init.d/apache reload

nginxの場合 mime.typesに以下を追加

types {
    application/x-mpegURL                 m3u8;
    video/MP2T                            ts;
 < 略>

types {

application/x-mpegURL m3u8;

video/MP2T ts;

< 略>

ファイルの配置とm3u8の編集

DocumentRootから以下の通りファイルを配置します。

/var/www/html/                    ... DocumentRoot
              stream.m3u8
              stream/             ... ファイルが多いので1階層下げた
                    stream000.ts
                    stream001.ts
                    ...

/var/www/html/ ... DocumentRoot

stream.m3u8

stream/ ... ファイルが多いので1階層下げた

stream000.ts

stream001.ts

...

stream.m3u8リストの中身をパスに合わせて編集します。相対パスでもいけると思います。

vi /var/www/html/stream.m3u8
---
#EXTM3U
#EXT-X-VERSION:3
#EXT-X-MEDIA-SEQUENCE:0
#EXT-X-ALLOW-CACHE:NO
#EXT-X-TARGETDURATION:13
#EXTINF:12.053711,
/stream/stream000.ts
#EXTINF:7.966289,
/stream/stream001.ts
 < 略>

vi /var/www/html/stream.m3u8

---

#EXTM3U

#EXT-X-VERSION:3

#EXT-X-MEDIA-SEQUENCE:0

#EXT-X-ALLOW-CACHE:NO

#EXT-X-TARGETDURATION:13

#EXTINF:12.053711,

/stream/stream000.ts

#EXTINF:7.966289,

/stream/stream001.ts

< 略>

HTMLページを作成してアクセスしてみる

vi /var/www/html/index.html
---
<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>HTTP Live Streaming Test</title>
  </head>
  <body>
      <h1>HTTP Live Streaming Test</h1>
      <video width="640" height="360" src="stream.m3u8" preload="none" onclick="this.play()" controls />
  </body>
</html>
---

vi /var/www/html/index.html

---

<!DOCTYPE html>

<head>

<title>HTTP Live Streaming Test</title>

</head>

<body>

<h1>HTTP Live Streaming Test</h1>

</body>

</html>

---

http://URL/index.html

再生されましたか？

H.264

ffmpeg -i orange.mp4 -map 0 -f ssegment -vcodec libx264 -acodec aac -strict experimental -segment_list stream.m3u8 -segment_time 10 stream%03d.ts

1	ffmpeg -i orange.mp4 -map 0 -f ssegment -vcodec libx264 -acodec aac -strict experimental -segment_list stream.m3u8 -segment_time 10 stream%03d.ts

MP4Boxを使った、MPEG-DASH

cd work
cp DOKOKA/testSource.mp4 ./

ffmpeg -i testSource.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -b:v 500k -strict -2 output_500k.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -strict -2 -b:v 1000k output_1000k.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -strict -2 -b:v 4000k output_4000k.mp4

sudo apt-get install gpac       # MP4Boxが入ったパッケージ

MP4Box -dash 1500 -profile live -out test.mpd output_500k.mp4#video:id=video_500k output_500k.mp4#audio:id=audio output_4000k.mp4#video:id=video_4000k output_1000k.mp4#video:id=video_1000k

python -m SimpleHTTPServer 8999

wget https://raw.githubusercontent.com/Dash-Industry-Forum/dash.js/v1.2.0/dash.all.js -O dash.all-1.2.0.js

vi index.html
---
< !doctype html>
<html>
  <head>
    <script type="text/javascript" src="dash.all-1.2.0.js"></script>
  </head>
  <body>
    <h1>MPEG-DASH sample</h1>
    <div>
      <video id="videoPlayer" controls="true"></video>
    </div>
    <script>
      (function() {
        var url = "http://URL:8999/test.mpd";
        var context = new Dash.di.DashContext();
        var player = new MediaPlayer(context);
        player.startup();
        player.attachView(document.querySelector("#videoPlayer"));
        player.attachSource(url);
      })();
    </script>
  </body>
</html>
--- 

python -m SimpleHTTPServer 8999

cd work

cp DOKOKA/testSource.mp4 ./

ffmpeg -i testSource.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -b:v 500k -strict -2 output_500k.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -strict -2 -b:v 1000k output_1000k.mp4 -r 25 -g 25 -codec:v libx264 -codec:a aac -strict -2 -b:v 4000k output_4000k.mp4

sudo apt-get install gpac # MP4Boxが入ったパッケージ

MP4Box -dash 1500 -profile live -out test.mpd output_500k.mp4#video:id=video_500k output_500k.mp4#audio:id=audio output_4000k.mp4#video:id=video_4000k output_1000k.mp4#video:id=video_1000k

python -m SimpleHTTPServer 8999

wget https://raw.githubusercontent.com/Dash-Industry-Forum/dash.js/v1.2.0/dash.all.js -O dash.all-1.2.0.js

vi index.html

---

< !doctype html>

<html>

<head>

</head>

<body>

<h1>MPEG-DASH sample</h1>

<div>

</div>

(function() {

var url = "http://URL:8999/test.mpd";

var context = new Dash.di.DashContext();

var player = new MediaPlayer(context);

player.startup();

player.attachView(document.querySelector("#videoPlayer"));

player.attachSource(url);

})();

</script>

</body>

</html>

---

python -m SimpleHTTPServer 8999

http://URL:8999/index.html

WindowsなChromeからもみえるようになった！・・・が、途中でとまっちゃう。

ドラッグアンドドロップの動作後のアクションに、AjaxでサーバサイドとAPI通信させてDB連携などして位置情報を保管共有できれば、いいな。
結線や線の削除をする動作を入れたり、オブジェクトの作成・削除を入れたり。
各線に両端のポート名を入れたり。
監視システムと連動させて、ネットワーク異常時に線を赤くしたり。
線や、オブジェクトにカーソルを合わせたら、統計情報のAPIをつついてhichartのようなグラフを表示したり。
色々とやりたいことが膨らんでくる！

論理ネットワーク図(IPやVLANが分かる図)と、物理結線図(装置やポートが分かる図)の両方を切り替えてみたり。
物理的な支障箇所と、論理的な影響箇所が一目でわかる仕組みが欲しいな。

まだまだ先は長そうだけど、コツコツつくってみるかな。

サーバサイドは、Mojoliciousが拡張性があって、とっつきやすそうなのでフレームワークに使ってみるかな。

<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-
ui.min.js"></script>
<style>
.line{
    position: absolute;
    border-top: solid 1px #FF4981;
    -moz-transform-origin:0% 0%;
    -webkit-transform-origin:0% 0%;
    transform-origin:0% 0%;
    float: left;
}
.object {
    border: 4px solid black;
    width: 50px;
    height: 30px;
    position: absolute;
    cursor:pointer;
    z-index:200;
    text-align: center;
    vertical-align: middle;
    background: #ccc;
    font-size: 80%;
}
</style>

<script language="JavaScript">
var xCorrect = 25+4;
var yCorrect = 15+4;
var objects = {
"L2SW11":[800,150,["L2SW12","L2SW17","L2SW1B"]],
"L2SW12":[500,20,["L2SW11","L2SW13","L2SW14","L2SW15","L2SW16"]],
"L2SW13":[600,150,["L2SW12","L2SW18","L2SW1C"]],
"L2SW14":[450,150,["L2SW12","L2SW19","L2SW1A","L2SW1D"]],
"L2SW15":[300,150,["L2SW12"]],
"L2SW16":[200,150,["L2SW12"]],
"L2SW17":[900,250,["L2SW11"]],
"L2SW18":[600,250,["L2SW13"]],
"L2SW19":[300,250,["L2SW14"]],
"L2SW1A":[400,250,["L2SW14"]],
"L2SW1B":[800,250,["L2SW11"]],
"L2SW1C":[700,250,["L2SW13"]],
"L2SW1D":[500,250,["L2SW14"]]
};
function init() {
  for(var objName in objects){
    var objDiv = $("<div id='" + objName + "'>" + objName + "</div>")
              .addClass("object")
              .css({
                "left": objects[objName][0],
                "top": objects[objName][1],
              });
    $(document.body).append(objDiv);
    for(var i=0; i < objects[objName][2].length; ++i){
      var dstObjName = objects[objName][2][i];
      var id = objName + dstObjName;
      if( objName > dstObjName ){
        id = dstObjName + objName;
      }
      $("#" + id).remove();
      drawLine({
        ID: id,
        x1: objects[objName][0] + xCorrect,
        y1: objects[objName][1] + yCorrect,
        x2: objects[dstObjName][0] + xCorrect,
        y2: objects[dstObjName][1] + yCorrect
      });
    }    
  }
}
function drawLine(params) {
  var param = jQuery.extend({
              ID: 0
            , x1: 0
            , y1: 0
            , x2: 0
            , y2: 0
            , line_style: "solid"
            , line_color: "#aaaaaa"
            , line_width: "1px"
            , parent: $("body")
            , callback: function(){}
  }, params);
  if(param.x1 < param.x2){
    sx = param.x1;
    ex = param.x2;
    sy = param.y1;
    ey = param.y2;
  }
  else {
    sx = param.x2;
    ex = param.x1;
    sy = param.y2;
    ey = param.y1;
  }
  var w = Math.sqrt(Math.pow((sx - ex) ,2) + Math.pow((sy - ey) ,2));
  var base = Math.max(sx, ex) - Math.min(sx, ex);
  var tall = Math.max(sy, ey) - Math.min(sy, ey);
  var aTan = Math.atan(tall / base);
  var deg = aTan * 180 / Math.PI;
  deg = sy > ey ? 0 - deg: deg;
  var line = $("<div id=" + param.ID + "></div>")
    .addClass("line")
    .css({
      "left": sx,
      "top": sy,
      "width": w,
      "transform": "rotate(" + deg + "deg)",
      "-webkit-transform": "rotate(" + deg + "deg)",
      "border-top-style": param.line_style,
      "border-top-color": param.line_color,
      "border-top-width": param.line_width,
    });
  $(param.parent).append(line);
}
function dispJson() {
  alert(JSON.stringify(objects));
}
$(document).ready(function()
{
  // init draw objects
  init();
  $('.object').draggable({
    stop: function(){
      var ofs = $(this).offset();
      var objName = this.id;
      objects[objName][0] = ofs.left;
      objects[objName][1] = ofs.top;
      for(var i=0; i < objects[objName][2].length; ++i){
        var dstObjName = objects[objName][2][i];
        var id = objName + dstObjName;
        if( objName > dstObjName ){
          id = dstObjName + objName;
        }
        $("#" + id).remove();
        drawLine({
          ID: id,
          x1: objects[objName][0] + xCorrect,
          y1: objects[objName][1] + yCorrect,
          x2: objects[dstObjName][0] + xCorrect,
          y2: objects[dstObjName][1] + yCorrect
        });
      }    
    }
  });
});
</script>
</head>
<body>
<input type="button" value="disp objects at json" onClick="dispJson()">
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

<html>

<head>

ui.min.js"></script>

<style>

.line{

position: absolute;

border-top: solid 1px #FF4981;

-moz-transform-origin:0% 0%;

-webkit-transform-origin:0% 0%;

transform-origin:0% 0%;

float: left;

}

.object {

border: 4px solid black;

width: 50px;

height: 30px;

position: absolute;

cursor:pointer;

z-index:200;

text-align: center;

vertical-align: middle;

background: #ccc;

font-size: 80%;

}

</style>

var xCorrect = 25+4;

var yCorrect = 15+4;

var objects = {

"L2SW11":[800,150,["L2SW12","L2SW17","L2SW1B"]],

"L2SW12":[500,20,["L2SW11","L2SW13","L2SW14","L2SW15","L2SW16"]],

"L2SW13":[600,150,["L2SW12","L2SW18","L2SW1C"]],

"L2SW14":[450,150,["L2SW12","L2SW19","L2SW1A","L2SW1D"]],

"L2SW15":[300,150,["L2SW12"]],

"L2SW16":[200,150,["L2SW12"]],

"L2SW17":[900,250,["L2SW11"]],

"L2SW18":[600,250,["L2SW13"]],

"L2SW19":[300,250,["L2SW14"]],

"L2SW1A":[400,250,["L2SW14"]],

"L2SW1B":[800,250,["L2SW11"]],

"L2SW1C":[700,250,["L2SW13"]],

"L2SW1D":[500,250,["L2SW14"]]

};

function init() {

for(var objName in objects){

var objDiv = $("<div id='" + objName + "'>" + objName + "</div>")

.addClass("object")

.css({

"left": objects[objName][0],

"top": objects[objName][1],

});

$(document.body).append(objDiv);

for(var i=0; i < objects[objName][2].length; ++i){

var dstObjName = objects[objName][2][i];

var id = objName + dstObjName;

if( objName > dstObjName ){

id = dstObjName + objName;

}

$("#" + id).remove();

drawLine({

ID: id,

x1: objects[objName][0] + xCorrect,

y1: objects[objName][1] + yCorrect,

x2: objects[dstObjName][0] + xCorrect,

y2: objects[dstObjName][1] + yCorrect

});

}

function drawLine(params) {

var param = jQuery.extend({

ID: 0

, x1: 0

, y1: 0

, x2: 0

, y2: 0

, line_style: "solid"

, line_color: "#aaaaaa"

, line_width: "1px"

, parent: $("body")

, callback: function(){}

}, params);

if(param.x1 < param.x2){

sx = param.x1;

ex = param.x2;

sy = param.y1;

ey = param.y2;

}

else {

sx = param.x2;

ex = param.x1;

sy = param.y2;

ey = param.y1;

}

var w = Math.sqrt(Math.pow((sx - ex) ,2) + Math.pow((sy - ey) ,2));

var base = Math.max(sx, ex) - Math.min(sx, ex);

var tall = Math.max(sy, ey) - Math.min(sy, ey);

var aTan = Math.atan(tall / base);

var deg = aTan * 180 / Math.PI;

deg = sy > ey ? 0 - deg: deg;

var line = $("<div id=" + param.ID + "></div>")

.addClass("line")

.css({

"left": sx,

"top": sy,

"width": w,

"transform": "rotate(" + deg + "deg)",

"-webkit-transform": "rotate(" + deg + "deg)",

"border-top-style": param.line_style,

"border-top-color": param.line_color,

"border-top-width": param.line_width,

});

$(param.parent).append(line);

}

function dispJson() {

alert(JSON.stringify(objects));

}

$(document).ready(function()

{

// init draw objects

init();

$('.object').draggable({

stop: function(){

var ofs = $(this).offset();

var objName = this.id;

objects[objName][0] = ofs.left;

objects[objName][1] = ofs.top;

for(var i=0; i < objects[objName][2].length; ++i){

var dstObjName = objects[objName][2][i];

var id = objName + dstObjName;

if( objName > dstObjName ){

id = dstObjName + objName;

}

$("#" + id).remove();

drawLine({

ID: id,

x1: objects[objName][0] + xCorrect,

y1: objects[objName][1] + yCorrect,

x2: objects[dstObjName][0] + xCorrect,

y2: objects[dstObjName][1] + yCorrect

});

}

});

</script>

</head>

<body>

</body>

</html>

カテゴリー: フロント

HTML5のVIDEOタグを使ったストリーミング(HLS)

概要

詳細

H.264

MP4Boxを使った、MPEG-DASH

JavaScriptでcanvasを使わないでネットワーク図を書いてみるよ