[MPEG-DASH] 初心者のためのWEBストリーミング入門 - Qiita
TCPまたはUDPのプロトコルを使用する 専用のメディアサーバーとクライアントが通信しながら再生する ブラウザとは別に専用プレイヤー必要がある Real Time Streaming Protocol（RTSP） Real Player, Windows Media Player Real Time Messaging Protocol（RTMP） Flash Video ストリーミングとは、メディアデータを時間分割して順次転送・再生する規格です。TCPまたはUDPのプロトコルを使用して専用のメディアサーバーを用意する必要があります。クライアントも専用のプレイヤーが必要になり、サーバーとクライアントともに環境構築のコストが高いです。 1995～2005年頃のストリーミング黎明期では規格が乱立していました。その中で大きなシェアを獲得したのは、Real PlayerやWindows Media
![[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
HLSライブストリーミング配信環境を最速で立ち上げる - Qiita
TL;DR 先人がdocker imageを用意してくださっているので、それを利用させていただくだけです。 https://hub.docker.com/r/alfg/nginx-rtmp 以下の記述は上記のページのUsageに書いてあるものと全く同じです。 予め用意しておくもの docker環境 OBS ffmpeg 手順 dockerイメージをpullしてきてコンテナを立ち上げます。これでnginx-rtmp-moduleが組み込まれたnginxが起動します。 $ docker pull alfg/nginx-rtmp $ docker run -it -p 1935:1935 -p 8080:80 --rm alfg/nginx-rtmp 動作確認 OBSで配信を試してみます。 「ソース」欄から配信に利用する映像キャプチャデバイスを追加します。 「コントロール」欄で「設定」→「配信」
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での符号まで計算してみましょう。 理解が一気に深まります。手順は以下。 1. 文字のコードポイントをUnicodeから見つけてくる。 2. コードポイントを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
自動化ツールの SikuliX を使って話題の RPA を試してみる - Qiita
概要 Webアプリのテスト自動化で有名なものとして Selenium や TestCafe などがありますが、これらのツールはWebアプリ専用となっており、Windowsの画面の操作であったりExcelの操作などは自動化させることができません。 以前からあらゆる操作を自動化したいというニーズはあったかと思いますが、2016年ごろから RPA (Robotic Process Automation) という言葉が使われ始め、AI や IoT などのように話題になってきています。RPA は簡単に説明すると、認知技術(ルールエンジンや機械学習、AIなど)を活用した業務の効率化や自動化を行う仮想知的労働者という定義になっていますが、この RPA のツールを利用することで、Webアプリだけでなくあらゆる操作を自動化できるようになり、作業の効率化が図れるようになっています。 RPA ツールに関しては既
TSX内でジェネリクスの型引数を1つにする方法 - Qiita
困った事 tsファイルであれば上記のように書くだけですが、tsxファイル内だと下記のエラーが出ます。 TS17008: JSX element 'T' has no corresponding closing tag. これは<T>がコンポーネントとして認識されてしまっているためです。 回避方法 型引数の後にカンマをつける
1時間超のTypeScriptコンパイルを数十秒に抑えてみる - Qiita
この記事のソースコード: https://github.com/knjname/2020-09-03_growingtsd TypeScriptプロジェクトのコンパイルが終わらない！ こんにちは型に弱いマンです。 CIでTypeScriptプロジェクトのコンパイルが1時間たっても終わらなかったことはありませんか？ 私は何度かあります。 TypeScript的に行儀の良い(?)フレームワークを使っている方は、おそらくそういう現象に遭うことは少ないと思います。 行儀の悪い(?)フレームワークをハードに使っている方は、こういうことに遭う確率が高いと思います。 具体的にどういうフレームワークかというと、下記のようにコードで動的に型を紡ぎ出す系のフレームワークですね。 （mobx-state-tree なんかが該当します。） export type ItemDefinitions<D = {}> =
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Macでnginxを使って生中継システムを構築する - Qiita
【応用】Flexboxレイアウトまとめ - Qiita
