はじめに 私が行っている業務で試験的にストリーミング配信をやってみようとなったので、S3 を使って簡易的なストリーミング配信のテストをしたので記事にしてみました。 ストリーミング配信とは インターネットを介した動画配信や音楽配信の方式で、データをダウンロードして視聴開始するのではなく、データを受信しながら同時に随時再生していくことができることが特徴です。 メリット インターネット環境があればすぐに視聴することができる ストレージの空きが不要 セキュアな配信ができる デメリット ネットが安定している必要がある ストリーミング再生をやってみよう 今回は AWS の S3 を使ってストリーミング再生をやってみました。 方法は非常に簡単です。 まずは input.mp4 の動画を用意してください。 そして下記のコマンドを実行します。 これを実行すると m3u8 ファイルと ts ファイルが複数生成
先の記事で 動画自体のタイムコードを書き込んだものを作った Shaka Streamer, Shaka Packagerを使ってHLS Liveのストリーミングをローカル環境で構築できた なので、次は「現在時刻（FFmpegで動画を作っている時の時刻）を書き込んだ動画を作成しながらローカル環境でHLS Liveのストリーミング」をしてみる。 使用する環境 macOS 10.14.6（18G3020） FFmpeg version 4.1.4 Shaka Packager v2.4.1-c731217-release Shaka Streamerは使わなくてもよかった。FFmpegからのUDPの入力をするためのShaka Streamerのconfigがわからなかったので、Shaka Streamerを使うのは断念した。 現在時刻を書き込んだ動画を作成 先に書いた記事のコマンドを一部変更して
HLS.js is a JavaScript library that implements an HTTP Live Streaming client. It relies on HTML5 video and MediaSource Extensions for playback. It works by transmuxing MPEG-2 Transport Stream and AAC/MP3 streams into ISO BMFF (MP4) fragments. Transmuxing is performed asynchronously using a Web Worker when available in the browser. HLS.js also supports HLS + fmp4, as announced during WWDC2016. HLS.
2022/01/31 追記 この記事のPVがまだあるので2022/01/31現在の状況を調べてみましたが、まだChromeでは再生できないようです。 超強引なのでオススメしないやり方ですが、できました TL;DR hls.js の解説がすごくわかりやすいので読めばわかります API.md | video-dev / hls.js | GitHub https://github.com/video-dev/hls.js/blob/master/docs/API.md @types/hls.js | yarnpkg https://yarnpkg.com/package/@types/hls.js replace | yarnpkg https://yarnpkg.com/package/replace TypeScript と yarn 周りは過去記事をご参照ください 2020/11版：Ty
YouTube ライブで HLS（HTTP Live Streaming）取り込みプロトコルを使うと、HDR 動画の配信や、RTMP に対応していないコーデックの使用が可能です。 始める前に お使いのエンコーダが HLS に対応しているかを確認します。また、YouTube のライブ配信の基本を把握します。 1. YouTube の HLS プリセットを確認する エンコーダに YouTube への HLS 取り込み向けプリセットがある場合、そのプリセットを選択します。場合によっては、RTMP での配信と同様にストリームキーをコピーして貼り付ける必要があります。これで配信する準備が整いました。 エンコーダに YouTube への HLS 取り込み向けプリセットがない場合は、手順 2 の「サーバー URL を設定する」に進みます。 2. サーバー URL を設定する YouTube のライブ管理
当初、今回は前回の続きでFail2banの話題を取りあげるつもりでしたが、今月の頭からNHKのネットラジオ「らじる☆らじる」の配信形式が変更され、本連載で以前紹介したスクリプトでは録音できなくなったので、急遽そのための対応方法を紹介することにしました。 本連載ではNHKのインターネットラジオ「らじる☆らじる」をLinuxで録音する話題を何度か取りあげてきました。「らじる☆らじる」はNHKのラジオ番組をインターネットで同時配信する仕組みで、2011年にMMSとRTMPの2種類で配信が初まりました。 これを受け、当初はMMS配信をmplayerで録音するようなスクリプトを紹介し、そのスクリプトを中心に予約録音するようなツール類を作りました。 「らじる☆らじる」の開始当時はWindows Media Playerで利用できるMMSの方が広く使われていたものの、マイクロソフト社によるMMSの開発
概要 HLSとはHTTP Live Streamingの略 アップルが自社iOS向けに開発した、HTTPベースのストリーミングプロトコル。 特徴 ・特別な設備（ストリーミングサーバなど）が不要でApacheなどのWebサーバでも配信できるのが特徴。 ・通信速度に応じて映像品質（ビットレートや画面サイズ）を変えるAdaptive bitrate streaming機能を持っている ・（デメリット）再生環境が限定されている（Windows微妙） 動作環境 ・iOS3.0以上 ・Android3.0以上 ・WindowsはVLC1.2以上、QuickTime10以上 ・MacOS X10.6以降のSafariブラウザ 技術詳細 ・基本は地デジと同じMPEG2 TSが使われる ・１０秒に細切れにされたMPEG2-TSファイルを複数の品質作る ・その再生順を書いたプレイリスト（M3U3形式）を作る
AWS Media Servicesを使ってタイムシフト再生可能なライブ配信を行ってみました。MediaPackageのStartover Windowを指定し プレイリストリクエスト方法を変更、さらに再生プレイヤー側の対応を行いました。 はじめに 清水です。AWS Media Servicesを使うとAWSのフルマネージドサービスのみでライブ配信環境を構築できます。今回は単純なライブ配信に加えてタイムシフト再生ができるように設定してみたのでまとめてみたいと思います。 タイムシフト再生とは ライブ映像を見ながらユーザ側で任意に巻き戻して途中からの再生や、ライブの開始地点から最新のライブ地点までなら任意の場所を再生できる機能です。HDDレコーダーなどでも同様のことができますね。「追っかけ再生」とか、「DVR(Digital Video Recorder)」などとも言われます。 AWS Med
[小ネタ] Video.jsのvideojs-contrib-hlsを使ってHLS形式のライブ配信を再生する最低限度の設定 はじめに 清水です。先日下記のエントリにまとめたようにAWS Media Servicesを使って動画配信テストを行いました。その中で、Video.jsを使うことで各種ブラウザでのHLS形式の動画を再生できるよう設定しました。 AKIBA.AWS 第5回 ネットワーク基礎編でAWS Media Servicesを使った社内向け動画配信テストをしてみた #akibaaws ｜ Developers.IO 個人的に、ちょっと前から「HLS形式の動画配信はSafariやEdgeなど一部のブラウザでしか再生できない」という問題に対しての解決策の1つが「Video.jsなどJavaScript製のPlayerを使う」ことである、という認識はあったのですが、「JavaScript
こんにちは、動画チームのhagi＠streampackです。 はじめに HLSのストリーミングサーバーをAWS上で構築する手順を記載します。 最近では無料や低額で利用できるストリーミングサービスもありますが、ここはあえて自分で管理したいなー、広告入れたくない、完全公開はいやだなーといった人向けです。 またサーバー側で録画すれば撮影側で録画せずともハードコピーを残すことも可能です。 今回はAWSのEC2上に構築しABR（Adaptive Bitrate）の手順も記述します。 ABR（Adaptive Bitrate）とは 日本デジタル・プロセシング・システムズ株式会社のサイトより ABR（アダプティブ・ビットレート）は、動画コンテンツを視聴環境（デバイスや回線速度など）に合わせて、可能な限り品質高くスムースに再生できるようにするための動画配信技術です。具体的には視聴端末の処理能力や解像度、回
以前「新しい「らじる☆らじる」 録音方法の提案 」でも紹介したように、らじる☆らじるから配信される音声ファイルは1644.tsのように整数値.tsといったファイル名からなっています。このファイル名と放送時刻を対応付けることができないものかと考えました。 ダウンロードをしばらく続けているうちに、このファイル名は下図のように0から始まって1999までインクリメントされると、再び0に戻るということが分かりました。一つのファイルが10.24秒の音声からなっていますので、約20000秒ごとに同じファイル名が繰り返されるということです。 まず11月4日12時の時報が1308.tsというファイルに含まれていたとします。これは放送局に依存するかも知れませんので、実際に時報と合わせて確認する必要があります。このような場合11月4日12時03分00秒に放送されたファイルは1326.tsだろうということは、なん
FRESH!で再生が止まってしまったときに、Chrome DevToolsのNetworkタブを見ていたところ、.m3u8というファイルの取得に失敗していることが分かりました。そこから、.m3u8ファイルと.tsファイルを用いて実現されるライブ動画配信の仕組みHTTP Live Streaming (HLS)の挙動について調べ、実際の通信内容と比較して、クライアント側の動作や、ファイルの内容などの仕組みが見えてきました。 その基本的なところについての理解を図解してみたので、ここにメモ＆紹介しておきます。 実際の挙動については、サイバーエージェントの動画配信サービス「FRESH!」および、「AbemaTV」の挙動を参考にしました。 目次 1. HTTP Live Streaming (HLS)2. ２種類のファイルを用意して動画配信する2.1. .tsファイル（動画）2.2. .m3u8（プ
参考：動画配信プラットフォーム on AWS 2014.05.22 Amazon Data Service Japan 上図の中の HLSがHTTP Live Streamingです。 HTTPストリーミングの配信技術で、全てのプラットフォームに対応していると言えます。 (注1) QuickTime Player 10以上や、るMicrosoft Edge（Windows10）で再生可能です。InternetExplorerでは再生できません。 3 構成 HTTP Live Streamingの構成は、次の図で表現できます。 iPhoneなどのクライアントは、Webサーバに配置された動画ファイルにHTTP(HTTPS)でアクセスします（①）。 Webサーバ上の動画ファイルは、メディアセグメントファイル（.ts MPEG-2トランスポートストリームファイル)と、インデックスファイル（
1. はじめに HLS (HTTP Live Streaming) 形式の動画は、Safari (on Mac) であれば、HTML5 の videoタグですんなり再生することができるのですが、それ以外のブラウザ、例えば Chrome (on Mac) や Chrome (on Windows) でも再生できるようにしたい場合にどうすればよいか？というのが悩みの一つです。 そこでいろいろ調べたところ、Video.js がよいのではないかという結論に至りました（あくまで個人的な意見です）。 http://www.videojs.com/ こちらのブログが大変参考になりました。ありがとうございます！ あと、こちらの公式ドキュメントも参照しました。 2. HTMLコード Video.js を使って HLS形式の動画を再生するための HTMLコードは、以下のようになります。 index.html
3. HLSとは • HTTP Live Streaming の略 • ざっくり言うと、HTTPを使って一般的なインターネットラジオと同じ要 領で動画を配信する技術 • 2009年にAppleがiOS3に初めて搭載した。 • IETF Internet Draft • Androidなどでのサポートもあり、モバイルデバイスではデファクトの ストリーミング方式となっている 4. おっさんのためのHLSの歴史 • 1997年 Winamp登場 • プレイリストとしての .m3u 形式の誕生 • 1998年9月 Winamp2 登場 • プレイリストとしての .pls 形式が登場 • 1998年 SHOUTcast 誕生 • 動的年末なプレイリスト生成による簡易ストリーミング 5. おっさんのためのHLSの歴史 • 1999年 SoundJam MP • MacOS9用の mp3 プレイヤー •
サッポロクリエイティブキャンプ 2016 #3で使った資料を増補改訂したものです。HTML5 VideoとかHLSとかDASHとかのことについてです。Read less
ここ最近のAppleイベント中継と同様に、ライブストリーミングを視聴できる環境には制限があります。 Apple製品ならば、iOSデバイスやMacのSafariブラウザか、Apple TVで視聴できます。そしてWindows環境で唯一視聴できるのが、Windows 10の新しい標準Webブラウザ「Microsoft Edge」です。なかなかIE（Internet Explorer）からの移行が進まないと言われるEdgeですが、思わぬメリットがありました。ちなみに、Windows 7／8.1では見られません。 Appleは別に、Windowsユーザーに意地悪をするため視聴環境を制限しているわけではありません。上の画像の説明にもあるように、Appleが開発した「HTTP Live Streaming（HLS）」という技術を使って配信するので、このHLSをサポートする環境でしか視聴できないのです。
ActionScript (10) Starling Framework (9) CG (2) Linux (2) TinCan/ExperienceAPI (1) Uncategorized (2) アウトドア (172) イベント (11) お店 (9) ギア (46) キャンプ (39) サーフィン (6) その他 (8) トレラン (20) ラン (22) 海水浴・磯遊び (15) 登山 (44) 自転車 (6) イベント・展示会 (22) お仕事 (107) After Effect (43) eラーニング (1) お知らせ (10) スマホアプリ開発 (1) ブルーバックスタジオ (12) 会社行事 (11) 撮影 (20) 機材 (13) 編集 (15) グルメ (36) タピオカ (11) ラーメン (3) デジタル一眼ムービー (3) プライベート (195) 旅行 (8
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く