技術ソフト自然言語処理GiNZA自動でキーワードの分類ができます。----はいみなさんこんにちは。blomagaへようこそ。この記事は次の動画のテキストバージョンになります。動画を見れる環境の方は動画をオススメします。今日のソースコードはGitHubにて公開しています。3がリリースされました。8つの分類しかなかったのですが,バージョン3ではこんなに(参照:関根の拡張固有表現階層)分類が増えたそうです。いうことで,今日はGiNZAのバージョン3の固有表現抽出機能をレビューしていきたいと思います。ちなみに,GiNZAはリリースされてからまだ1年も経ってないんですが,MITライセンスで商用利用も可能ですし,開発も活発なので,今後日本語の自然言語処理を応用したサービスも盛り上がっていくのではないかと期待しています。----試してみたはいということで,文字を入力するとGiNZAを使って固有表現を抽出してくれるWebアプリを作ってみました。GiNZAはフロントに欧米で有名な「spaCy」という自然言語処理ライブラリーを使っているので,「displaCy」という,特に複雑なコードを書かなくてもいい感じに表示してくれる機能もあります。例文として1月18日,19日にラブライブ!フェスがさいたまスーパーアリーナで行われた。snow,虹ヶ咲学園スクールアイドル同好会の4グループ,計29人が出演し,ラブライブ!9周年を祝った。halationを披露した後,Aqoursの伊波杏樹さんがあまりの感動に言葉を詰まらせ「ラブライブ!が大好きです」と言ったところは特に感動した。1度μ'sが見れてとても嬉しかった。いうのを入れてみましょう(ラブライブ!フェスに関する個人的な感想です)。こんな感じに出ました。分類が怪しいところですが,まあいい感じにキーワードが拾えているのではないでしょうか。CaboChaからの移行ちなみに今までCaboCha使っててGiNZAに切り替えるのが面倒くさそうと思うかもしれませんが,ginzaというコマンドが付いていてCaboCha互換形式にもできるので,わりと簡単です。試しにCaboCha向けに作った固有表現をハイライト表示するアプリをGiNZAに差し替えて動かしてみましょう。はい,呼び出しコマンドをcabochaからginzaに変えただけですが動きました。さっきと同じく細かい分類なのでGiNZAが使われているのが分かると思います。3の拡張固有表現抽出を試してみました。例文1つでしか試してないので,どのくらいの精度なのか分かりませんが,ひとまず細かい分類で固有表現を抽出できることを確認しました。固有表現抽出はチャットボットやプライバシー保護,文書要約などに使われる要素技術ですが,細かい分類になったことで,それらがより精度や効率が上がると思います。ちなみに,この分類は見て分かる通り(参照:関根の拡張固有表現階層)階層構造になっているので,後処理は必要になりますが,従来バージョンの荒い分類として扱うことも可能です。いうことで今日の動画(ブロマガ)は以上です。良かったらコメント等してみてください。遅くなりましたが,2020年初動画でした。昨年末の動画やTwitterで言っていたとおり,今年はICT・AI・映像技術・ガジェットをテーマに動画制作やっていくのでよろしくお願いします。今日はその第1歩ということで,AI系のソフトの紹介をしてみました。自分の今までもそうですし,YouTube・ブロマガ全体としてもハードの紹介動画の方が多いなってことで,ソフトの紹介をしてみました。今後もAI関連や映像関連のソフトの紹介もたまにやっていきたいと思いますので,よろしくお願いします。----はいみなさんこんにちは。blomagaへようこそ。前回からえらく時間が空いてしまって申し訳ありません。当初予定していたnginx-rtmp-moduleを使った生配信では配信終了できない問題(XSplitで配信終了してもRTMPが閉じない問題)が起きたため,試行錯誤していたら時間が経ってしまいました(←だとしても1か月前には投稿できていた)。ことで今日はですね,「お盆休みの自由研究」と題した自宅鯖&Webアプリ開発日記の続きです。10をインストールしてNginxとFFmpegで動画・生配信サーバーをセットアップしよう前編」(次回は前回作ったプレイヤーで再生してみよう)って感じで,Linuxをセットアップしていきます。本当は最後までを1つの記事にする予定でしたが,目的は同じでもやることはかなり違うので分けました(前編の分は8月中に作業終わってました。投稿すればよかったですね)。ビルドしますFFmpeg(マルチメディアフレームワーク)をビルドしますRed5(RTMPサーバー)をインストールしますNginxのセットアップをします(次回)Red5のセットアップをします(次回)試験放送してみます(次回)前回の最後に書いたとおり,今回は詳しいやり方まで書きません。やったという流れと,詰みポイントをメインに書いていきます。対象はやや上級者向けになりますが,ご了承ください。いっても,Linux系一切触ったことない人だと↑が異世界語にしか見えないかもしれないのでほんとに軽く説明しておきます。Debian:いわゆるLinux系と呼ばれるフリーのOS(ディストリビューション)です。Nginx:フリーでオープンソースなWebサーバーアプリです。ビルド:ソース(プログラミング言語)から機械語に翻訳し,コンピューターで実行できるようにすることです。FFmpeg:コマンドラインで使える万能なマルチメディアの編集・変換ソフトです。Red5:RTMP(Flashを使ってリアルタイムに映像やテキストをやりとりするプロトコル)のサーバーです。ちなみに,配信方式としては当サーバーはRed5がRTMPを待ち受ける。StudioからRTMPで当サーバーに配信する。Red5は動画を受信したらFFmpegを呼び出す。Streaming)方式に分割・変換し,Nginxの領域に配置する。NginxはHTTPを待ち受ける。視聴者はブラウザーから当サーバーに動画を要求する。Nginxは動画を返す。それでは作業していきます。普段使わないPCにインストールする前提で進めます。デュアルブート(普段使ってるWindowsやmacを残したままLinuxもインストール)にする場合,機種や操作によっては元のOSが消える可能性がありますので,ご注意ください。普段使うPCにインストールしたい場合,VirtualBoxやVMware等の仮想環境をオススメします。Linuxでは今回やることができませんので別の方法でお願いします(今後変わる可能性はあります)。10でサーバーを構築していきます。Ubuntuでも全く問題ありませんが,Ubuntuは標準のままある程度使えるようになっている代わりに,逆に標準で付いてくるソフトがカスタマイズされてて分かりづらいので,私はUbuntuのもとになっているDebianの方が好きです。あと,私はGUI信者なのでデスクトップ環境GNOMEを入れますが,コマンドラインの方が好きな方はコマンドラインでどうぞ。Debianのサイトのダウンロードページ(https://www.debian.org/distrib/netinst)からインストールディスクをダウンロードします。インストール先のCPUに合わせてamd64,arm64,......などを選んでください。PCで一般的なIntel系のCPUならamd64です。次に,ダウンロードしたインストールディスクをUSBメモリーやDVDに書き込みます。ISOイメージなのでDVDの場合特に問題ないと思います。USBメモリーに書き込む場合,Windowsの場合Win32DiskImagerがオススメです。macの人はWeb検索すれば出ると思うので頑張ってください。その次に,USBメモリーなりDVDなりからDebianインストーラーを起動(ブート)します。そこに関してはPCの機種によって違うので自分で調べてください。miniに入れました。Macの場合は起動時にcommand+optionを押します。Debianインストーラーが起動できれば後は画面の指示に従っていけば,迷うことなくインストールできると思います。インストール先のディスクに関する部分はある程度知識がないと理解できないと思いますが,そこは申し訳ありませんが,他サイトで勉強してきてください(もちろん,自動でいい感じにやってくれるオプションもあります)。最後の方で,デスクトップ環境が選べます。3にしましたが,お好みのデスクトップ環境を選んでください(もちろんデスクトップなしでコマンドラインオンリーでも構いません)。3が一番見やすいかなと思います(macに近いところも多いし)。いう感じで,インストールできましたよね?Debianのセットアップ先程も言いましたが,Ubuntuは初期装備でもある程度使えますが,Debianはわりと初期装備少なめです。必要なものや,趣味のものを入れてしまいましょう。最初にDebianインストール時に作成したアカウントをsudoers(管理者権限コマンド実行可能アカウント)にします。-」と入力し,root(管理者アカウント)でログインします。「visudo」コマンドで作成したアカウントをsudo可能にしてください。エンジニアの入り口」とかを参考にすると良いです。それではいろいろとセットアップ・インストールしていきます。ほげほげ」と入力することでインストールできます。ほげほげ」とsudoコマンドに-Eと引数を付けてください(-Eは環境変数を読み込んでくれるオプションです)。最近のDebianではapt-getではなくapt推奨なので,ググる・ヤフるときは適宜置き換えてください。Packages」を使うと便利です。私は以下のような感じで設定しました。)内の名前を入れてください。Qiitaとかを参考にいろいろやってみてください。(vim)コマンドラインで使うテキストエディターです。(ufw)ファイアウォール(パケットフィルタリング)です。enable」で有効化してください。80,443,1935番ポートは開く設定にしてください。いつかufwの使い方記事も書きます。(ibus-mozc)Google発オープンソースの日本語入力(漢字変換)です。クロの思考ノート」を参考に設定してください。(fonts-motoya-l-cedar)あたりから好きなフォントをインストールすればいいと思います。1Pを標準にしました。Tweaks」で変更できます(日本語使う人は変更推奨)。CJKはGoogleとAdobeが作ったフリーとは思えないクオリティーのフォントで現在の純正Androidの標準フォント。お世話になる某独立行政法人とタイプバンクさんのフォント。4で採用されています。「永遠に伝えたい、美しく格調高いモトヤ書体。あ,すみません,箇条書きの中なのにフォントについて熱く語ってしまいました。extensions(拡張機能)です。背景画像以外何もないデスクトップにドックを追加します。integrationを入れ,そこからインストールします。プロキシー環境の方は詰みます。(htop)システムモニタリングツールです。(fancontrol)PCのファン制御をします。機種によってはファン制御をOSに任せるので,Linuxを入れてから負荷によらずファン速度が一定になる場合は自己責任で入れてみてください(失敗すると最悪オーバーヒートします)。kledgeb)とかどうでしょうか(他人任せ)。(ntp)時刻サーバーと同期します。ntp」で有効化させましょう。ネットワーク管理の厳しい環境の方は設定ファイル「/etc/ntp.conf」を書き換えて適宜NTPサーバーの指定とかしましょう。(filezilla)GUIでSFTPが使えます。普通にサーバー専用機にする場合は入れなくていいです。(curl)何かで必要になったはずですが忘れました。まあ今後いろいろと必要な場面が出てくるので入れておいて損はないです。(rsync)ファイルを同期します。ユーザーのディレクトリーで編集したWebページをサーバーに配置する際に使います。リモートデスクトップする場合,好きなVNCサーバーを入れてください(執筆時点でWayland対応のVNCサーバーが見つからなかったので難しいかもしれません)。ここらの問題についてはまたいつか記事にしたいと思います。ここで一旦Q憩(好きなもの入れてね)。--color=auto」のエイリアスを~/.bash_rcに書いて,Audacity,GIMPといった定番ソフト,Blender,Shotcutも趣味で入れました(最後2つは絶対使わないと思う)。GIMPで背景画像用に画像加工して,好きな背景画像をセットしました。必要なものをインストールしていきます。ほげほげ」というコマンドで入れていきます。そのまま入れてください。ダウンロードし,ビルドしていきます。他人任せですが,「nginxでストリーミングサーバを立ててライブ配信する。Qiita」の「インストール・設定」の項目を参考に作業していくとNginxがインストールできます。NGINX」を参考に,テキストエディターで「/lib/systemd/system/nginx.service」というファイルを作り,リンク先に書いてある内容をコピーして保存してください。/lib/systemd/system/nginx.service」というコマンドを打てばいいと思います。自分もはまってしまいましたが,「systemd」の中にさらに「system」があるので間違えないようにしましょう。FFmpegをビルドします基本的に公式Wikiの通りにコマンドを打てば今回の用途としては問題ありません。さきほど書いたように「apt-get」は「apt」に置き換えてください。←分からなければ数値なしでもおk)。~/」で始まる複数行のコマンドはどちらか片方を選択して実行してください。見れば分かると思いますが,1行の方はaptからインストールし,複数行の方はそれぞれのモジュールも自分でビルドします。Wikiのとおりに作業すると,ユーザー領域にビルドしたFFmpegが置かれるので,他のユーザーからも使えるようにシンボリックリンク(ショートカットのようなもの)を作ります。次のような感じでコマンドを打ちます。入力コマンド」の形式で記載しています。/usr/local/bin/ffprobeRed5をインストールしますRed5はJavaで書かれているので,まずはJDKが必要となります。次にRed5をダウンロードします。ターミナル(端末アプリ)を起動し,次のような感じで行いました。./red5.shRed5のバージョン(red5-server-の後など)はx.x.xに置き換えています。適宜最新版のバージョンに置き換えてからコマンド実行してください。いうか,GitHubのReleasesを見て,wgetの後のURIはコピペすればいいと思います。その後のファイル名もTabキー押してシェルの補完機能使えばいいと思います。(ryに置き換えています。所有者をrootに変えていますが,私もLinuxやサーバー周りの経験は浅いので,賛否等あればコメントくれるとありがたいです。動作確認まだ設定等はしていませんが,インストールが完了したということで,とりあえず動作確認してみましょう。1.Nginx次のようにコマンドを打って,Nginxを開始し,状態を確認します。(running)と出れば問題ありません。nginx」でNginxを止めてください。2.FFmpegffmpegとコマンドを打って,次のような感じのメッセージが出れば問題ありません(↓は違うビルドの物なので細かいところは変わってくると思います)。Liveでよくない?A1:大抵の人はニコニコやつべでいいと思います。今回はあくまで趣味なのでダメです。あとはネットワークが厳しくて,RTMPがブロックされてる環境だったり,ネット上に公開できないコンテンツを特定少数に見せたいとか,そういうときにも使えると思います。あとはニコ厨だったりして,どうやって映像が流れてくるんだろうかって知りたくなった人とかも,実際に自分で配信サービスを立ててみるっていうのは理解の助けになると思います。--------はいということで,前回のクライアント側とは逆にサーバー側をセットアップしていこう(前編)ということでしたが,どうだったでしょうか。次回はNginxの設定ファイルを書いたり,FFmpegを使ってコマンドラインで動画の変換をしてみたり,Javaでプログラミングしたりします。動画・生配信視聴プレイヤー作ってみた」:ar1798847SKAのニコニコ動画SKAのTwitter宣伝:最近の動画です。各種参考文献は本文中にあります。み自由研究ネットワークHLSWebこの記事はわりと細かいことまで書いていて長いです。時間のない方や,もうすでに知ってるわって人は飛ばし飛ばし読んでください。対象レベルはWebや動画に関して最低限の知識はあるけど,実際に作ったことはあまりない人程度にしたつもりです。低遅延な動画・生配信視聴プレイヤーです。----はいみなさんこんにちは。blomagaへようこそ。ことで今日はですね,「お盆休みの自由研究」と題した自宅鯖&Webアプリ開発日記の1つ目です。今回のテーマ(概要)は「hls.jsを用いて(実用レベルまでは行かないけど)簡単お手軽に低遅延で安定したHLS形式の映像配信視聴プレイヤーを作ってみた」って感じです。Flashを用いたHTTPプログレッシブダウンロード(先頭からダウンロードし,ダウンロード終わったところのみ再生可能)が主流でした。Flashを用いてRTMP方式(専用サーバー必要)で行っていました。今みたいにブラウザー単体で動画を扱えませんでした。Streaming)形式(ニコ動・AbemaTV等で採用)や,それをより一般化・標準化したMPEG-DASH形式(YouTube等で採用)が使われるようになりました。一般的名称ではありませんが,「プログレッシブダウンロード」を「順次ダウンロード」と記載します。わかりやすさ重視で「クライアント」を「客」,「サーバー」を「窓口」に見立てている部分があります。ダウンロードはPCやスマホの動画再生アプリでPCやスマホ本体の動画を再生するのと同じように動画を先頭から順番にダウンロードしていきます。1本の動画では1ファイルです。HLSでは図のように10秒程度(Apple推奨値)に動画ファイルを分割します。その動画の順番と時間をプレイリストファイル(拡張子:m3u8)に書いておき,そのプレイリストの通りにファイルを順番にダウンロードしていくことにより再生します。あ,ちなみにニコ動は6秒ごとに分割してますね(2019年8月現在)。この方式の利点はたくさんあります。先読み時間の制御がしやすく,ムダな通信を避けることができる点。10分の動画を1分で見飽きたとします。ダウンロードではどんどんダウンロードしていくので,8分ぶんダウンロードしてしまうかもしれません。HLSでは次の3ファイルまでしか読み込まないというようにしておけば,1分30秒ぶんしかダウンロードしていないわけです。これによりサーバー負荷もモバイルの通信量も抑えることができます。(逆に動画をダウンロードして保存したいときは時間もかかるし結合が面倒)次に,アクセスログにより簡単にユーザーの視聴時間が分かる点。先程の例だと9ファイル読み込まれて3ファイルは先読みなので実際に再生したのは6ファイル分で,時間にすると60秒という具合です。YouTubeはこの仕組みで視聴時間を算出し,広告料の配分をしていると考えられます。通信速度により最適な画質に調整できる点。先程の図のように,プレイリストのプレイリストを作ることができます。そこには「このプレイリストを使うとこのくらいの画質」ということが書いてあります。先読み一瞬で終わるんだが。たっのしー!」と判断すれば高画質の動画ファイルを要求するって感じです。客側が判断するだけで,無能お役人(一般的なWebサーバー)でも,自動画質調整ができてしまいます。動画(オンデマンド)だけではなく,生配信(ライブ)すら無能な役人(一般的なWebサーバー)で対応可能です(10秒ごとに新しい動画ファイルが追加されて,プレイリストが更新されて,そのあとすぐにが来るので役人目線だと「普段より忙しいな」って感じでしょうか)。動画・生配信ともに約10秒ごとに動画ファイルを分割する他サーバーやアプリの協力は必要です。いう感じに,HLS(あるいはMPEG-DASH)は現代の動画配信においてかなりメリットがあると思います。Edge(2019年現在,Chromium系になる前)とSafariは優しさ設計でvideoタグでHLSのプレイリストを指定してやれば,そのまま再生できてしまいます。Chromeは未対応です。ことで,やっと本題です。OSがWIndowsでもmacでもAndroidでもiOSでも,ブラウザーがChromeでもFirefoxでも問題なくHLS形式で再生できるプレイヤーを作りましょう。やり方と言っても,やり方はいくらでもあります。自分で1からJavaScriptで実装しても良いですし,jQueryとかで頑張っても良いですし,video.jsというHLSに対応したJavaScriptの動画プレイヤーのライブラリーもすでにあります。今回はHTML5のvideoタグで色々なブラウザーでHLSを扱うことができるようになるライブラリー「hls.js」を使います。実は私は以前video.jsを使っていたのですが,パフォーマンスに問題がありました。まれにコマ落ちが発生したり,生配信の遅延が大きかったりなどです。それで,WebVTTによる章分け(チャプター)機能や,字幕機能にも対応していて,UIまで用意されていて圧倒的手軽さで実用的なvideo.jsですが,使うのはやめて,別のライブラリーを探してました。見つけたのがhls.jsです。hls.jsはvideo.jsみたいにUIを持たず,本当にvideoタグでHLS形式の動画を読み込ませるだけです(自動画質調整はしてくれますが)。HTML5に対応している一般的なブラウザーはブラウザー自体が動画用のUIを持っているので,それを使えばシークや一時停止などは可能になります。自分のUIを使いたいのであれば,それこそ1から書いたり,jQueryでも使えばいいだけなので,hls.jsで全く問題ないと判断しました。実装していきましょう。前準備まず,今回作るお試しサイトのディレクトリー(フォルダー)構造を作っていきます。今回は以下のような構造にしましたが,まあお好みで。ダウンロードするなりクローンするなりして,上のとおりjsディレクトリーにでも入れてください。icon.icoとstyle.cssはテキトーに用意してください。アイコンはGIMPとかで作成できます。別に作らなくてもいいです。index.htmlはvideo1へのリンクが貼ってあるページという想定ですが,なんでもいいです。テキトーに用意してください。これ以外のファイルについてはこれから順番に用意していきます。ちなみに,自動画質調整に対応させるならvideosの下のhls以下を次のようにします(ここもお好みで)。上の方で解説したとおり,HLS形式の動画は10秒程度に分割したファイルを用います。分割に使うソフトは何を使っても良いですが,私はFFmpegを用いています。FFmpeg自体はフリーですが,商用利用でエンコードされる場合MPEG-LAとのライセンス契約が必要かと思われますのでご注意ください。配布版で全く問題ないので,そこもおまかせします。次に,シェルでFFmpegが入っているディレクトリーに移動します。Linuxの人は自力で頑張ってください(シェルやデスクトップ環境によって違うので)。緑丸と同じy座標)のフォルダーマークをターミナルにドラッグアンドドロップして,文字が入ったらreturnキーを押します。WindowsではエクスプローラーでFFmpegが入っているフォルダーを開き,Shiftキーを押しながら右クリックすると「PowerShellでここを開く」的なメニューがあるので(日本語版Windows使ってないので正しい名称は分かりません),それを押します。元の動画が,映像コーデックが「H.264」,音声コーデックが「AAC」であるという前提で進めます。"(test-video-siteまでのパス)/test-video-site/videos/hls/video1.m3u8"と入力しreturn(Enter)キーを押します。Windowsの場合,「ffmpeg」を「ffmpeg.exe」に置き換え,「/」(スラッシュ)を「\」(バックスラッシュ)に置き換えてください。場合によってはバックスラッシュが円記号(¥)に見えることがありますが,それはWindowsのクソ仕様なので無視してください。このコマンドの意味はこのディレクトリーの「ffmpeg」を次の引数をとって実行します。TSで,分割時間は9.0秒ごとで,「キーフレーム(Iフレーム)で分割しない」をオフ(0)にして,プレイリストの最大数は99999で,分割後のファイルは「(test-video-siteまでのパス)/test-video-site/videos/hls/video1-%05d.ts」として保存して,プレイリストは「(test-video-siteまでのパス)/test-video-site/videos/hls/video1.m3u8」として保存します。分割時間は再エンコードなしで,「break_non_keyfreames」を0にすると,記載した時間よりも多少長めで分割されるので10.0ではなく,9.0を指定しています。分割後ファイル名には「%○○d」といった感じに数字のフォーマットを指定できます。%05dは0埋めあり(001みたいに先頭に0を付ける)の5桁の整数となります。分からない方はこのままお使いください。詳しい方は自分好みにカスタマイズしてご利用ください。自動画質調整する場合は映像をリサイズして再エンコードして,別ファイルに保存すればおkです。メモしてたファイルをコピーし忘れてて今手元にないので,数日後更新して記載しておきます。set-video.jsという名前じゃなくても大丈夫です。hls.jsの機能を利用して,videoタグでHLSを読み込ませるset-video.jsと名付けたJavaScriptプログラムを書いていきます。CodeでもJetBrainsさんのでも何でも良いですが,テキストエディターを起動して,test-video-siteのディレクトリーを開いて,「js」ディレクトリーに「set-video.js」というファイルを作成します。参考に(本家とは少し違います)次のように書けばおkです。);hls.loadSource(path);hls.attachMedia(video);}return;}説明するまでもないと思いますが,軽く説明しておくと,次のような「path」を引数にとる関数setVideoを定義します。videoという変数にHTMLで「video」というIDが付与された要素を格納して,もしブラウザーが直接HLSを再生できれば,videoのsrc属性をpathにします。ブラウザーがMSEに対応していれば(hls.jsの動作条件),hlsという変数に(hls.jsで定義されている)Hlsクラスのインスタンスを格納し,pathを読み込み,videoに結びつけます。何もしません)video1.htmlの作成では次に,実際に動画を表示するHTMLを書いていきます。テキストエディターで「video1.html」を作成します。中身はこんな感じです。「(○○)」「(ほげほげ)」は好きな文字に置き換えてください。height="480"><p>ご利用のブラウザーは当サイトの動画に対応していません。申し訳ありませんが,別のブラウザーソフトをお試しください。</p></video><script>setVideo("./hls/video1.m3u8");</script></body></html>って感じで,簡易的な動画サイトみたいな感じになります。videoタグの中身については,setVideo関数内でvideoというIDのついた要素を取得するようにしていたため,id="video",hls.jsは動画制御用UIを持たないので,ブラウザー内蔵のUIを用いるためcontrols,私は自動再生絶対許さないマンなのでpreload="metadata"(メタデータのみ先読みする),width(幅)とheight(高さ)はお好みの値で(動画の解像度に合わせる必要ありません)って感じですね。したら(もしかしなくても),widthとheightはvideoタグ内よりもCSSで指定した方がいいかもしれませんね。ちなみに,viewportの設定で,スマホを縦画面にしても表示が小さくならないようにしています。Webサーバーへの配置では最後に,Webサーバーへ配置しましょう。ファイルをブラウザーで直接開く場合,hls.jsが正しく動作しないことがあります。HTTPかHTTPSのサービスをしているサーバーのところへ配置しましょう。サーバーのセットアップは次回の予定なので,今回は省略します。基本的にWebサーバーのドキュメントルートのディレクトリーにtest-video-siteディレクトリーの中身をコピーして,権限を変更すればおkです。だいたいこんな感じで終わりです。流した方はここで止めてください。動作確認ブラウザーを起動して,アドレスバーにWebサーバー上の「index.html」か「video1.html」のURIを入力してみましょう。ちなみに私はこのプレイヤーでGOP&分割時間0.5秒の生配信を視聴したら遅延時間が2〜4秒程度でした(LAN内でFirefoxの場合。Chromeはもう1秒程度遅れる感じでした)。コマ落ちも今のところ確認できていません。インターネット(WAN)上ではまだ試していませんが,パフォーマンスは良さそうです。--------はい,というわけで,今回はhls.jsを用いてお手軽なHLS形式の動画・生配信視聴プレイヤーを作ってみたってことで,いろいろと説明しました。詳しく書きすぎて,これ書くのに丸1日かけてしまって,進捗0なので,次回からは簡潔に書いていきます。対象がやや上級者向けになるかもしれませんが,ご了承ください。そもそも内容も難しくなるので,そこは割り切ってしまおうと思います。今回の記事は私がやったことをベースに書いていますが,実際に私がやったこととは多少変えて書いています。そのため,間違っている部分があるかもしれません。何か間違いに気づいたり,この通りにやったのに動かないとかあればコメントお願いします。次回は「LinuxとNginxとFFmpegで動画配信サーバーを作ってみた」です。3次へ>投稿した動画に関することや,コンピューター用語の解説,ただの日記,推しに関すること,などの記事を書いていきます。投稿した動画に関することや,コンピューター用語の解説,ただの日記,推しに関すること,などの記事を書いていきます。