ffserverを使ってさくっと動画配信サーバーを構築してみよう - Qiita
はじめに この記事はNTTテクノクロス Advent Calendar 2019の11日目の記事です。 NTTテクノクロスの中西(@9800se)です。 普段の業務ではOSSクラウド基盤トータルサービスのメンバーとして、いろいろな機能を持ったサーバーやコンテナを構築・運用しています。今回はこれまで作った環境の中から動画配信サーバーの構築方法を紹介します。 動画配信サーバーの構築 今回はCentOS上でffserverを使って、動画配信サーバーを構築する方法を紹介します。ffserverは映像などのマルチメディアデータを配信をできるストリーミングサーバーで、ffmpegをインストールすると利用できるようになります。 ffmpegのインストール さくっとインストールするのであれば、次の4コマンドを投入するだけです。 $ yum -y install epel-release $ rpm --i
Dockerイメージの理解を目指すチュートリアル - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 - 自分でオレオレ hello-world イメージをビルド このチュートリアルは、hello-world イメージを自分でビルドする例を取り上げます。手を動かしながら、Docker イメージの仕組みや性質の理解を深めます。また、効率的な Docker イメージの作成や Dockerfile の活用を目指すための基礎のほか、（主に開発者向けには）マルチステージ・ビルドも学びます。 ポイントは、Docker イメージ（image）とは、Docker コンテナの実行に必要な概念としてのパッケージ（ファイルやメタ情報の集合体）であること
Gitでファイルの特定行の変更履歴を追う - Qiita
> git log -L 1,10:Gemfile commit d9acf7548943f4c60be50ee43b54ce638d4d0d3a Author: kmagai Date: Sun Apr 24 18:01:22 2016 +0900 hoge -- a/Gemfile ++ b/Gemfile ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────── @@ -1,6 +1,5 @@ source 'https://rubyge
[MPEG-DASH] videoJSでアダプティブストリーミングを再生する - Qiita
はじめに VideoJSでアダプティブストリーミングを行う方法を紹介します。（2020年5月現在） VideoJSについては下記のページで紹介しています。 https://qiita.com/yun_bow/items/fe94d95c4eb4dc3a0803 OS: Windows 10 Pro Google Chrome: 81.0.4044.129 Mozilla Firefox: 75.0 Microsoft Edge: 81.0.416.64（Chromium版） videoJS: 7.7.5 dashJS: 3.1.0 videoJS MPEG-DASH Source Handler: 2.11.0
![[MPEG-DASH] videoJSでアダプティブストリーミングを再生する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/b88dc7a72eb16a28580380a32eefb313e5e4fc61/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTVBFRy1EQVNIJTVEJTIwdmlkZW9KUyVFMyU4MSVBNyVFMyU4MiVBMiVFMyU4MyU4MCVFMyU4MyU5NyVFMyU4MyU4NiVFMyU4MiVBMyVFMyU4MyU5NiVFMyU4MiVCOSVFMyU4MyU4OCVFMyU4MyVBQSVFMyU4MyVCQyVFMyU4MyU5RiVFMyU4MyVCMyVFMyU4MiVCMCVFMyU4MiU5MiVFNSU4NiU4RCVFNyU5NCU5RiVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZDFlZTEyYTdlMWZlOTYwM2FiZGY3OWM3NTc0YTJkOTY%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5dW5fYm93JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yM2ZiYTYyYzJkNWU3NjA5ZmI3YmQxN2VmOGQwMGY3Yw%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44OR44O844Kv%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3Dd09650384f186dac185d57bc2319a12f)
[MPEG-DASH] 初心者のためのWEBストリーミング入門 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに WEBのストリーミングについて初心者向けに紹介します。 ストリーミング TCPまたはUDPのプロトコルを使用する 専用のメディアサーバーとクライアントが通信しながら再生する ブラウザとは別に専用プレイヤー必要がある Real Time Streaming Protocol（RTSP） Real Player, Windows Media Player Real Time Messaging Protocol（RTMP） Flash Video ストリーミングとは、メディアデータを時間分割して順次転送・再生する規格です。TCPま
![[MPEG-DASH] 初心者のためのWEBストリーミング入門 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/66fd3846359f187c184a3abf9b01bb16887d4aad/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTVBFRy1EQVNIJTVEJTIwJUU1JTg4JTlEJUU1JUJGJTgzJUU4JTgwJTg1JUUzJTgxJUFFJUUzJTgxJTlGJUUzJTgyJTgxJUUzJTgxJUFFV0VCJUUzJTgyJUI5JUUzJTgzJTg4JUUzJTgzJUFBJUUzJTgzJUJDJUUzJTgzJTlGJUUzJTgzJUIzJUUzJTgyJUIwJUU1JTg1JUE1JUU5JTk2JTgwJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz05YjZlYjQ2N2QyNzhkZWU5OWVmMzBmOWVlOTU1YjhiZA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDB5dW5fYm93JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0yM2ZiYTYyYzJkNWU3NjA5ZmI3YmQxN2VmOGQwMGY3Yw%26blend-x%3D142%26blend-y%3D436%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-44OR44O844Kv%26txt-width%3D770%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25231E2121%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D156%26txt-y%3D536%26s%3D66509d446e51ff6eab82e741b4a6d406)
MPEG DASHを知る - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 正式名称はMPEG-DASHだが、DASHと呼ばれる。呼んじゃう DASHはDynamic Adaptive Streaming over HTTPの略 2012年4月にISO国際標準規格(ISO/IEC 23001-6)としてリリース 背景 HTTPプロトコルを使用した動画配信プロトコルはあるが、互換性がないためHTTPプロトコルを使った動画配信プロトコルの国際標準規格として策定された HLS（HTTP Live Streaming） Apple SS（Smooth Streaming） Microsoft HDS（HTTP
VideoJS Components解釈・作成 - Qiita
はじめに 前回、「Web Video Player, VideoJSの紹介」を投稿しました。 今回はVideoJS内部Componentという解釈と簡単の作成チュートリアルを記事したいと思います。 VideoJS Componentとは VideoJSにある、全部のコントロールやUIなどはComponentというからクラス継承されています。 デフォルトの設計でComponentを継承して、さまさまのComponentを作成しました。 Player ├── MediaLoader (has no DOM element) ├── PosterImage ├── TextTrackDisplay ├── LoadingSpinner ├── BigPlayButton ├── LiveTracker (has no DOM element) ├─┬ ControlBar │ ├── PlayT
HTTP Live Streaming (HLS)の基本とngx_http_hls_moduleについて調べて試してみた - Qiita
この記事の対象 ngx_http_hls_moduleを試してみたい方 HLSに興味があるのでとりあえず試して見たい方 自分なりに調べたまとめという内容ですので、ただシンプルにHLSの動作を確認してみたいという方は以下のページを参考にし、本内容は読まなくて良いです。 HLS（HTTP Live Streaming）で動画を配信・再生してみよう | YAZ技術ブログ 動画をストリーミング配信する方法 | IT SKILL MAP ffmpeg を使い、HTTP Live Streaming(HLS)をファイルに保存し、保存したファイルからストリーミングを行う方法について - Qiita HTTP Live Streamingを試してみた - UUUM攻殻機動隊(エンジニアブログ) HTTP Live Streaming 動画配信のやり方 （実践） | ビズバレーブログ ffmpeg で mp
styled-components の変数名の命名を縛る ESLint Plugin を作った - Qiita
メリークリスマス。 この記事は、第二のドワンゴ Advent Calendar 2019 の25日目の記事です。 内定者アルバイトのまっきーです。 ドワンゴ第一アドベントで ポエム を書いたので今度は技術的な話をしようと思います。 ずばり styled-components の変数名の命名を縛る ESLint Plugin を作ったので紹介します。 (仕事関係ありません) 概要 その名も eslint-plugin-styled-components-varname 。 簡単に言うと、デフォルトの設定でこんな感じです。 良いとされるコード const _TitleDiv = styled.div` height: 32px; ` const $FooComponent = styled(FooComponent)` display: flex; `
【図解】【3分解説】UnicodeとUTF-8の違い！【今さら聞けない】 - Qiita
UTF-16のことをUnicodeと記しているソフトウェア(Windowsのメモ帳など)もありますのでUnicodeとあったらそれはUTF-16を使って変換したものなのだな、というふうに理解してください。 そうなってしまっている理由はこちらで解説されていました。 これでUnicodeとUTF-8の違いはバッチリですね！おわり。 読んで分かりやすかったり少しでも何か学べたと思えたら いいね や コメント をもらえるとこれからの励みになります！ もう少し時間がある方へ 手計算で文字をUTF-8での符号まで計算してみましょう。 理解が一気に深まります。手順は以下。 文字のコードポイントをUnicodeから見つけてくる。 コードポイントをUTF-8の方式で変換してみる。 **Omiitaの「お」**をUTF-8による符号まで変換してみます。 文字「お」のコードポイントをUnicodeから見つけてく
Service Workerによるキャッシュ戦略の種類 - Qiita
この記事は、現在開催中のイベント「フロントエンド強化月間 - 開発する上で知っておくべき知見を共有しよう」の記事です。 はじめに QiitaではService Workerを使い、リソースをクライアントにキャッシュさせることにより、パフォーマンスの向上、リクエスト数の軽減をしている。 Service Workerでキャッシュを扱うにあたって、いくつかのキャッシュ戦略があるため、それを紹介する。 Service Workerについて Workbox Qiitaでは、Service Workerファイルの生成にWorkboxを使っている。 Workboxは、gatsby-plugin-offline、next-offlineとかにも使われているライブラリで、Googleが開発している。 Service Workerを簡単に書くことができるのがウリ。 プリキャッシュ（事前キャッシュ） Servi
静的サイト向けWorkBoxレシピ - Qiita
はじめに WorkboxはGoogle製のJavaScriptライブラリです。PWAに必要となるService Workerの各種機能を簡単な記述で利用できるようにします。このライブラリを使用して、静的サイトのキャッシュとオフライン表示に対応してみました。 結果 Chromeのシークレットモードを利用し、アドオンの影響を受けない状態で転送量を計測しました。 サンプルは自分のポートフォリオサイトを利用しています。 初回ロード スマホサイズの画面でサイトをネットワーク側から取得した状態です。総転送量は319KBです。 2回目ロード データはすべてService WorkerのCacheから読み込まれるため、総転送量は662Bでした。 また、オフライン状態でもキャッシュされた範囲のデータは表示が可能です。 読み込み速度はかなり低下しますが、Service Worker非対応のIE11でも表示が可
Reactのレンダリングに関する完全ガイド - Qiita
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
useRef は何をやっているのか - Qiita
useRef は元々あった createRef の hooks 版です。その名の通り、DOMに対する参照を持つために使われるのが主な目的です。 ですがそれ以外の用途にも利用することができます。 最初に私が知ったのはこちらのReact本体のドキュメントにも記されている「以前のstateの値を参照する方法」です https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state function usePrevious(value: any) { const ref = useRef(null); useEffect(() => { ref.current = value; }); return ref.current; } なにやら useRef で前回の値を保持しているようですね。それまで ref と
React hooksを基礎から理解する (useRef編) - Qiita
React hooksとは React 16.8 で追加された新機能です。 クラスを書かなくても、 stateなどのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。 React hooksを基礎から理解する (useState編) React hooksを基礎から理解する (useEffect編) React hooksを基礎から理解する (useContext編) React hooksを基礎から理解する (useReducer編) React hooksを基礎から理解する (useCallback編) React hooksを基礎から理解する (useMemo編) React hooksを基礎から理解する (useRef編) 今ここ useRefとは 関数コンポーネントでは、Classコンポーネント時のref属性の代わりに、useRefを使って要素への参照を行
React hooksを基礎から理解する (useContext編) - Qiita
React hooksとは React 16.8 で追加された新機能です。 クラスを書かなくても、stateなどのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。 React hooksを基礎から理解する (useState編) React hooksを基礎から理解する (useEffect編) React hooksを基礎から理解する (useContext編) 今ここ React hooksを基礎から理解する (useReducer編) React hooksを基礎から理解する (useCallback編) React hooksを基礎から理解する (useMemo編) React hooksを基礎から理解する (useRef編) useContextとは Contextとは? Reactコンポーネントのツリーに対して「グローバル」とみなすデータについて利用す
JSの新機能、Async Iterationの使いどころ - Qiita
非同期反復(async iteration)が年初にStage 4入りし、ES2018に追加されそうな見込みです。「先にもっと他のを!」という人もいそうですが、何が美味しいのか、少し書いてみたいと思います。 Async Iteration プロポーザル (参考: 審議中 / Stage 4) どんなやつ? 実際に使うには、非同期ジェネレータを定義して、for await (...)構文で呼び出します。(他の書き方もありますが、使用頻度が低そうなので省略) // 指定のミリ秒待つ非同期関数 sleep(msec) が定義済みとして... async function* wakeUp () { // 「*」を付けて、ジェネレータであることを示す yield 'Zzzz...' // ジェネレータなので、yieldが使える await sleep(2000) // asyncなので、awaitが
react-window で巨大なリストを低コストに表示する - Qiita
この記事ではReactで巨大なリストを効率よく表示するためのライブラリ react-window をご紹介します。 似たようなライブラリに react-virtualized というものがありますが、react-window は同じ作者による新しいライブラリです。 はじめに ナイーブな方法では、長大なリストを表示するにはその長さに比例するだけのレンダリングコストがかかります。ナイーブな方法とは下記のようにコンポーネントのリストを作って表示するだけの方法です。 import React from "react"; import styled from "styled-components"; const Container = styled.section` display: flex; flex-direction: column; `; const RowContainer = styl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HLSライブストリーミング配信環境を最速で立ち上げる - Qiita
Macでnginxを使って生中継システムを構築する - Qiita
