HTTP Live Streaming は、特別なサーバーアプリケーションを必要とせず、MIME設定を行えば簡単に配信できることを、HTTP Live Streaming 動画配信のやり方 （実践）で、説明しましたが、そのとき、Webサーバーは、Apacheをベースにしていたので、今回は、Windows ServerのIISから配信を試してみようと思います。

とはいっても、MIME設定するだけです。

サーバーを用意する
Windows Serverは、AmazonEC2のクラウドを利用しました。数時間程度の利用なら数百円程度で高スペックなサーバーを利用できるので、とても便利です。

IISでMIMEを設定する
IISは、インストール済みであることを前提として、MIMEの設定を追加します。サーバーマネージャーから、Webサイトの設定を行います。いくつか設定項目がある中から「MIMEの種類」を選択します。

MIMEタイプを追加する
「追加」を選択すると、種類を追加することができます。

ここで、下記２つを追加します。

ファイルの拡張子　.m3u8
MIMEの種類　application/x-mpegURL

ファイルの拡張子　.ts
MIMEの種類　video/MP2T

これで設定は完了です、あらかじめ動画用意すると、このような感じで再生できます。

サーバー側のネットワーク負荷をみると、常に負荷が掛かっている訳でなく、断面化された動画のセグメントファイルを、定期的に送信しているように見えます。このあたり、プログレッシブダウンロードと比べてみると面白いかもしれません。

-

【正社員募集のお知らせ】

当社では、映像制作の経験がある方を広く募集しています。自らの発想力とコミュニケーション力を映像制作の現場で発揮したい熱意ある方からのご応募をお待ちしております。

詳しくは【人材募集】のページをご覧ください。

※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。そちらからご応募お願い致します。

ビズバレーの映像スタジオのご紹介です。まず立地がとても良いのでどなた様もアクセスは容易です。地下鉄神保町駅・九段下駅、JR水道橋駅、から徒歩5～6分の好立地です。


それではスタジオへご案内いたします。


弊社のスタジオはブルーバックを使用したクロマキー合成が可能です。


まずはモデルの村岡さんにポーズをとってもらいます。これだけだと背景が青くて特に面白味もないです。


そこにプールサイドの画像を合成すると、もう気分は夏です。（※実際は動画です）


次はこちらです。


雪山登山の映像に早変わりです。


他にもパソコン画面を背景にすることもできます。


ワイプでの切り抜きなど多種多様なニーズに応えられます。


完全防音のモニターブースからカメラ等を操作できます。

今回はクロマキー合成のほんの一部をご紹介しました。パワーポイントを使ってのプレゼンや、セミナー動画など可能性は無限大です。プロンプターもありますのでカメラ目線で原稿を読むことも可能です。

詳細はこちらのスタジオページをご覧ください。見学も可能ですお気軽にご連絡くださいませ。

-

【中途採用・求人情報】

映像制作正社員スタッフ募集しています！
応募は＜こちらのページ＞からお気軽にどうぞ。


※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。

前回はオブジェクトの位置に

x=Math.sin(time*2)*20;
y=Math.sin(time*4)*10;
[x,y]

というエクスプレッションを適用して、ふわふわ浮いているようなアニメーションを作成しました。

今回はこれをベースに別のアニメーションを作成します。

早速ですが記述していきましょう。
2行目を少し変更します。

y=Math.abs(Math.sin(time*4)*10);

太字部分が書き加えられた部分です。
さて、どうなったか見てみましょう。



天井に頭をぶつけて跳ね返っているようなアニメーションができました。

書き加えた Math.abs() は()内の数値の絶対値を取得する命令です。

今回の場合は()内に Math.sin(time*4)*10 すなわち 0 → 10 → 0 → -10 → 0 と
推移する数値が入っています。

よってその絶対値ですから、 0 → 10 → 0 → 10 → 0　と なります。

波形はこのようになっています。



少し改良します。

同じく2行目を

y=Math.abs(Math.sin(time*4)*10)*-1;

と、　*-1　を追加しました。

するとこのように変化します。



反復横跳びのようなアニメーションができました。

Math.abs(Math.sin(time*4)*10)が生成した　0 → 10 → 0 → 10 → 0 　と推移する数値に
*-1 していますので　0 → -10 → 0 → -10 → 0　という結果になっています。



仮にこれで目的のアニメーションができたとします。

ところが、「基本的にはokだけど、もう少し動きを大きくして欲しい」とオーダーがありました。
さてどうしましょう。

簡単ですね。
前回の記事をお読みの方はすぐにお分かりだと思います。

x=Math.sin(time*2)*200;
y=Math.abs(Math.sin(time*4)*50)*-1;
[x,y]

太字部分が変更点です。
xの振れ幅を 20 → 200
yの振れ幅を 10 → 50　と変更しました。

こんな感じになりました。



ちょっと左右の動きが速すぎる気がしますが今回は良しとしましょう。

次回はオブジェクトの位置だけでなく他のプロパティにもsin波を利用した
アニメーションを作成したいと思います。

-

【中途採用・求人情報】

映像制作正社員スタッフ募集しています！
応募は＜こちらのページ＞からお気軽にどうぞ。


※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。

最近、映画館に行かなくなりました。TSUTAYAでDVDレンタルもしなくなりました。
何故なら、家のテレビで観れちゃうからです。Netflix、Amazon Prime、Huluに代表される動画配信サービス便利ですよね。

レベルの高い海外ドラマも容易に観られるようになって嬉しい限りです。そこで今回は保立おすすめの作品を6本ご紹介したいと思います。（アルファベット順）

①BARRY（バリー）
エミー賞で二年連続主演男優賞コメディ部門を獲った作品です。ビル・ヘイダー好きは必見。1話30分というのも、空き時間に観るにはちょうど良いです。

②BIG LITTLE LIES（ビッグ・リトル・ライズ）
ママ友同士のいざこざ話。最後の最後までどうなるかわからない展開です。有名女優たちが熱演します。シーズン2にはメリル・ストリープも出ます。

③BLACK MIRROR（ブラック・ミラー）
近未来を舞台に社会風刺が強烈な1話完結ものです。好みにもよりますが、捨て作ないです。Netflixに入会していてどれを見るか迷ってる人にオススメ！

④STRANGER THINGS（ストレンジャー・シングス）
80年代のインディアナ州が舞台。グーニーズ、スタンドバイミー、ETとか好きな人はハマります。シーズン2のラストは感涙必至。サントラも最高。

⑤TRUE DETECTIVE（トゥルー・ディテクティブ）
南部ゴシックの傑作。私生活でも親友同士のM・マコノヒーとW・ハレルソンが未解決事件を追います。ドラマというより、もはや映画です。

⑥WHEN THEY SEE US（ボクらを見る目 ）
4話完結のミニドラマです。NYセントラルパークで起きた実際の冤罪事件の物語です。この時代に絶対観なければいけない作品だと思います。

前回はsin波を利用して微妙に左右に揺れるアニメーションを作成しました。
あまりに微妙すぎて良く分からなかったと思いますが、あれが基本形ですので敢えて紹介しました。
今回は少し手を加えていきます。

前回オブジェクトの位置に

x=Math.sin(time);
y=0;
[x,y]

と言うエクスプレッションを適用し、左右に1ピクセル揺らすことが出来ました。
これを改良してもう少し振れ幅を大きくしてみます。

x=Math.sin(time)*20;
y=0;
[x,y]

1行目を x=Math.sin(time); から x=Math.sin(time)*20; に変更しました。

どうなったか見てみましょう。

x軸方向に 0 → 20 → -20 → 0 ピクセルと周期的に揺らぎました。

これは Math.sin(time) が生成した数値を *20（"*"は掛け算の意味）することによって、
xの振れ幅が20倍になったからです。
当たり前ですが、この *20 を例えば *100 にすればもちろん 0 → 100 → -100 → 0 と推移します。

これで振れ幅を任意に調整できますね。

今度は周期を変てみましょう。

前回も説明しましたが Math.sin(time)  の周期は約6秒です。
周期を司っているのは time ですので、これになんらかの手を加えれば良さそうです。

試しに、x=Math.sin(time)*20; を x=Math.sin(time*2)*20; と変更してみましょう。

いかがでしょう。ちょっと速く揺らいでいます。
波形を見てみますと、

time では約6秒だった周期が time*2 としたことによって約3秒になりました。
倍速で揺らいでいると言うことですね。
ちなみに time/2 ("/"は割り算）とすれば1/2倍速で周期が約12秒となります。

これで振れ幅と周期を任意に調整出来るようになりました。
ここまでを理解できれば、あとは応用次第でいろいろなアニメーションが作成出来ます。

今度はy軸方向にも動かしましょう。 yはずっと 0 のままでした。
試しにxに入れていた式と同じものをyに入れてみます。

x=Math.sin(time*2)*20;
y=Math.sin(time*2)*20;
[x,y]

どうなるかおおよそ察しが付きますよね。

y軸方向も 0 → 20 → -20 → 0 と周期的に揺らぎだしました。
xと同じ数値が生成されているのでyも同じで当然ですよね。

ここでy軸の周期と振れ幅を変えてみましょう。

x=Math.sin(time*2)*20;
y=Math.sin(time*4)*10;
[x,y]

さてどうなるでしょうか。

ふわふわ浮いているように見えなくもないアニメーションが出来ました。
これはこれで何かに使えそうですね。

yの周期は*4 の4倍速(約1.5秒)で、振れ幅は *10 の10ピクセルです。
参考までに、波形はこの様になっています。

いかかでしょうか。

この様に数値を変えるだけで印象がかなり違うアニメーションが作成できます。

次回はこのエクスプレッションをベースにして、さらに手を加えていきたいと思います。

-

【中途採用・求人情報】

映像制作正社員スタッフ募集しています！
応募は＜こちらのページ＞からお気軽にどうぞ。

※スマートホンでご覧いただいている方は、PCページのトップにリンクがございます。