<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>ffmpeg | ばすにっきTips</title>
	<atom:link href="https://takabus.com/tips/tag/ffmpeg/feed/" rel="self" type="application/rss+xml" />
	<link>https://takabus.com/tips</link>
	<description>プログラミングやサーバー、日々のTipsをメモしています。</description>
	<lastBuildDate>Fri, 11 Mar 2022 01:00:42 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.4.3</generator>

<image>
	<url>https://takabus.com/tips/wp-content/uploads/2022/12/cropped-tips-1-32x32.png</url>
	<title>ffmpeg | ばすにっきTips</title>
	<link>https://takabus.com/tips</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【ffmpeg】解像度を選んで動画（HLS配信）を保存するには？（mapオプション）</title>
		<link>https://takabus.com/tips/1017/</link>
					<comments>https://takabus.com/tips/1017/#respond</comments>
		
		<dc:creator><![CDATA[ばすにっきTips]]></dc:creator>
		<pubDate>Wed, 16 Feb 2022 03:37:08 +0000</pubDate>
				<category><![CDATA[コマンド]]></category>
		<category><![CDATA[ffmpeg]]></category>
		<guid isPermaLink="false">https://takabus.com/tips/?p=1017</guid>

					<description><![CDATA[FFmpegでストリームを選択して動画を保存する方法をメモしておきます。]]></description>
										<content:encoded><![CDATA[
<p>最近のストリーミング（HLS配信）では、画質や解像度を選択できるようになっていることがほとんどですよね。</p>



<figure class="wp-block-image size-full is-resized"><img fetchpriority="high" decoding="async" src="https://takabus.com/tips/wp-content/uploads/2022/02/image-12.png" alt="YouTubeの画質オプション" class="wp-image-1018" width="434" height="434" srcset="https://takabus.com/tips/wp-content/uploads/2022/02/image-12.png 434w, https://takabus.com/tips/wp-content/uploads/2022/02/image-12-300x300.png 300w, https://takabus.com/tips/wp-content/uploads/2022/02/image-12-150x150.png 150w, https://takabus.com/tips/wp-content/uploads/2022/02/image-12-100x100.png 100w" sizes="(max-width: 434px) 100vw, 434px" /><figcaption>Youtubeも画質を選べるようになっています</figcaption></figure>



<p>ffmpegで<strong><span class="marker-under">ストリームを選択して動画</span><span class="marker-under">をダウンロードし保存する方法</span></strong>をまとめておきます。</p>



<h2 class="wp-block-heading" id="mapオプションを使うと-ストリームを選択できるプレイリスト-m3u8-の構造">そもそも解像度を選べるストリーミングの仕組みは？</h2>



<p>はじめに解像度を選択できる仕組みを軽く理解しておきましょう。</p>



<p>解像度を選択して再生できるようになっているストリーミング（HLS配信）では、各解像度の動画が<span class="bold-red">異なるストリーム</span>として用意されています。プレイリスト（m3u8）の内容を確認すると、解像度ごとに別個のストリームが用意されていることがわかります。</p>



<pre class="wp-block-code"><code>#EXTM3U
#EXT-X-VERSION:3
#EXT-X-STREAM-INF:BANDWIDTH=300000,NAME="1080p",RESOLUTION=1920x1080
xxxx=.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=150000,NAME="720p",RESOLUTION=1280x720
xxyy==.m3u8</code></pre>



<p>ユーザーが解像度を選択すると、該当するチャンクリストがダウンロードされ、指定された解像度の動画が再生される仕組みになっています。</p>


<div class="ad-area no-icon ad-shortcode ad-rectangle ad-label-visible cf" itemscope itemtype="https://schema.org/WPAdBlock">
  <div class="ad-label" itemprop="name" data-nosnippet>スポンサーリンク</div>
  <div class="ad-wrap">
    <div class="ad-responsive ad-usual"><!-- レスポンシブコード -->
<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-8516711297133974"
  data-ad-slot="1299250945"
  data-ad-format="rectangle"
  data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
          </div>

</div>




<h2 class="wp-block-heading" id="mapオプションを使うと-ストリームを選択できるプレイリスト-m3u8-の構造">mapオプションを使えば、ダウンロードする動画の解像度を選べる！</h2>



<p>このように解像度を選べる方式のHLS配信は、<span class="bold-red"><span class="marker-under">ffmpegのmapオプションを使うと任意の解像度の動画をダウンロードできます。</span></span></p>




<a rel="noopener" href="https://trac.ffmpeg.org/wiki/Map" title="
      Map     – FFmpeg

    " class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Ftrac.ffmpeg.org%2Fwiki%2FMap?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">
      Map     – FFmpeg

    </div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://trac.ffmpeg.org/wiki/Map" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">trac.ffmpeg.org</div></div></div></div></a>



<p>mapオプションはストリームを選択するためのオプションです。複数のストリームが用意されているソースから任意のストリームを抽出することができます。HLS配信についてもmapオプションを使うことにより、任意の解像度の動画を抽出することが可能です。</p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-1 sbs-stn sbp-l sbis-cb cf block-box"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://takabus.com/tips/wp-content/uploads/2021/09/man-150x150.png" alt="" class="speech-icon-image"/></figure><div class="speech-name"></div></div><div class="speech-balloon">
<p>ちなみにDVDの多重音声もストリームにより実現されているので、多重音声のソースから任意の言語の音声を取り出すのに使ったりすることもできます。ほかにも動画と音声データをくっつけたり、いろいろと活用できるオプションです。</p>
</div></div>



<h2 class="wp-block-heading" id="サンプル">サンプル</h2>



<p>実際にやってみます。まずはmapオプションをつけずにffmpegを実行し、ストリーム情報を確認してみましょう。</p>



<p>m3u8を-iオプションに指定してffｍpegを実行すると、以下のようにストリーム情報が出力されます。</p>



<pre class="wp-block-code"><code>$ ffmpeg -i "xxx.m3u8" -c -copy out.ts
<strong>Program 0</strong>
    Metadata:
      variant_bitrate : 3000000
    Stream #0:0: Data: timed_id3 (ID3  / 0x20334449)
    Metadata:
      variant_bitrate : 3000000
    Stream #0:1: Video: h264 (Constrained Baseline) (&#091;27]&#091;0]&#091;0]&#091;0] / 0x001B), yuv420p, 1920x1080 &#091;SAR 1:1 DAR 16:9], 29.97 fps, 29.97 tbr, 90k tbn, 59.94 tbc
    Metadata:
      variant_bitrate : 3000000
    Stream #0:2: Audio: aac (LC) (&#091;15]&#091;0]&#091;0]&#091;0] / 0x000F), 44100 Hz, stereo, fltp
    Metadata:
      variant_bitrate : 3000000
<strong>Program 1</strong>
    Metadata:
      variant_bitrate : 1500000
    Stream #0:3: Data: timed_id3 (ID3  / 0x20334449)
    Metadata:
      variant_bitrate : 1500000
    Stream #0:4: Video: h264 (Constrained Baseline) (&#091;27]&#091;0]&#091;0]&#091;0] / 0x001B), yuv420p, 1280x720 &#091;SAR 1:1 DAR 16:9], 29.97 fps, 29.97 tbr, 90k tbn, 59.94 tbc
    Metadata:
      variant_bitrate : 1500000
    Stream #0:5: Audio: aac (LC) (&#091;15]&#091;0]&#091;0]&#091;0] / 0x000F), 44100 Hz, stereo, fltp
    Metadata:
      variant_bitrate : 1500000</code></pre>



<p>もちろん情報の確認だけならffprobeでもOKです。ffprobeでストリーム情報を確認したいときは、次のコマンドとなります。</p>


<div class="ad-area no-icon ad-shortcode ad-rectangle ad-label-visible cf" itemscope itemtype="https://schema.org/WPAdBlock">
  <div class="ad-label" itemprop="name" data-nosnippet>スポンサーリンク</div>
  <div class="ad-wrap">
    <div class="ad-responsive ad-usual"><!-- レスポンシブコード -->
<ins class="adsbygoogle"
  style="display:block"
  data-ad-client="ca-pub-8516711297133974"
  data-ad-slot="1299250945"
  data-ad-format="rectangle"
  data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
          </div>

</div>




<pre class="wp-block-code"><code>$ ffprobe "xxx.m3u8" -hide_banner -show_streams</code></pre>



<p>出力されているProgramの番号をmapオプションに指定することで、任意のストリームを取り出すことができます。</p>



<p>例えば、上の例で1280&#215;720の動画を抽出し、ローカルに保存したい場合はProgram 1をmapすることになるので、以下のようなコマンドになります。</p>



<pre class="wp-block-code"><code>ffmpeg -i "https://....m3u8" -map 0:p:1 -c copy "output.ts"</code></pre>



<p>0:p:につづけて、Programの番号を指定します。すると、該当するProgramのストリームがファイルに保存されます。</p>



<h2 class="wp-block-heading" id="timed-id3-codec-not-currently-supported-と表示されるとき">”timed_id3 codec not currently supported”と表示されるとき</h2>



<p>timed_id3のストリームが含まれているとき-c copyと併用するとエラーとなることがあります。</p>



<p>この場合はmapオプションにストリーム番号を直接指定します。</p>



<pre class="wp-block-code"><code>ffmpeg -i "https://....m3u8" -map 0:4 -map 0:5 -c copy "output.t</code></pre>



<p>Program1のストリーム情報を見ると、映像が#0:4 音声が#0:5となっていることがわかるため、mapオプションに0:4と0:5を指定します。こうすることで正常に任意のストリームを保存することができます。</p>



<h2 class="wp-block-heading" id="まとめ">まとめ</h2>



<p>ストリームを選択して、HLS配信されている動画をダウンロードする方法をメモしておきました。</p>



<p>mapオプションについては、公式ドキュメントにさらに詳しい使い方が載っていますので、参考にしてみてください。</p>




<a rel="noopener" href="https://trac.ffmpeg.org/wiki/Map" title="
      Map     – FFmpeg

    " class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img decoding="async" src="https://s.wordpress.com/mshots/v1/https%3A%2F%2Ftrac.ffmpeg.org%2Fwiki%2FMap?w=160&#038;h=90" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">
      Map     – FFmpeg

    </div><div class="blogcard-snippet external-blogcard-snippet"></div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img decoding="async" src="https://www.google.com/s2/favicons?domain=https://trac.ffmpeg.org/wiki/Map" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">trac.ffmpeg.org</div></div></div></div></a>



<p></p>
]]></content:encoded>
					
					<wfw:commentRss>https://takabus.com/tips/1017/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>【PHP】USBカメラの画像をブラウザからチェックできるようにしてみた！</title>
		<link>https://takabus.com/tips/462/</link>
					<comments>https://takabus.com/tips/462/#respond</comments>
		
		<dc:creator><![CDATA[ばすにっきTips]]></dc:creator>
		<pubDate>Sun, 17 Oct 2021 06:32:42 +0000</pubDate>
				<category><![CDATA[PHP]]></category>
		<category><![CDATA[ffmpeg]]></category>
		<guid isPermaLink="false">https://takabus.com/tips/?p=462</guid>

					<description><![CDATA[PHPでラズベリーパイに接続してあるUSBカメラの映像をブラウザから確認できるようにしてみました。アクセスがあったときだけ画像を取得し、ブラウザで確認できるシステムを自作してみました。]]></description>
										<content:encoded><![CDATA[
<p>ラズベリーパイに接続してあるUSBカメラの映像をブラウザから確認できるようにしてみました。</p>



<p>ネット検索してみますと、mpeg-streamerを使ったものが多いです。しかし、常時カメラを起動しなくてはならないことや、メモリー消費が多いなどの問題がありました。そこで、アクセスがあったときだけ画像を取得し、ブラウザで確認できるシステムを自作してみました。</p>



<div class="wp-block-image"><figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="703" height="533" src="https://takabus.com/tips/wp-content/uploads/2021/10/image-62.png" alt="" class="wp-image-463" srcset="https://takabus.com/tips/wp-content/uploads/2021/10/image-62.png 703w, https://takabus.com/tips/wp-content/uploads/2021/10/image-62-300x227.png 300w" sizes="(max-width: 703px) 100vw, 703px" /><figcaption>ブラウザで[Capture]をタップすると、USBカメラの静止画を表示してくれます。</figcaption></figure></div>



<h2 class="wp-block-heading">ソースコード</h2>



<p>ソースはGitHubにアップしています。</p>




<a rel="noopener" href="https://github.com/takabus/live-usbcam" title="GitHub - takabus/live-usbcam: Linuxサーバーに接続されているUSBカメラの映像をブラウザから見れるようにします" class="blogcard-wrap external-blogcard-wrap a-wrap cf" target="_blank"><div class="blogcard external-blogcard eb-left cf"><div class="blogcard-label external-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail external-blogcard-thumbnail"><img loading="lazy" decoding="async" src="https://opengraph.githubassets.com/97e6a6234edfcc625172c507c95db072bb39f64a6a6d376df4cac32f2a07e259/takabus/live-usbcam" alt="" class="blogcard-thumb-image external-blogcard-thumb-image" width="160" height="90" /></figure><div class="blogcard-content external-blogcard-content"><div class="blogcard-title external-blogcard-title">GitHub - takabus/live-usbcam: Linuxサーバーに接続されているUSBカメラの映像をブラウザから見れるようにします</div><div class="blogcard-snippet external-blogcard-snippet">Linuxサーバーに接続されているUSBカメラの映像をブラウザから見れるようにします. Contribute to takabus/live-usbcam development by creating an account on GitH...</div></div><div class="blogcard-footer external-blogcard-footer cf"><div class="blogcard-site external-blogcard-site"><div class="blogcard-favicon external-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://github.com/takabus/live-usbcam" alt="" class="blogcard-favicon-image external-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain external-blogcard-domain">github.com</div></div></div></div></a>



<h2 class="wp-block-heading">USBカメラから静止画を取得するには？</h2>



<p>さまざまな方法がありますが、ffmpegから取得するのがおすすめです。</p>



<pre class="wp-block-code"><code>ffmpeg -ss 10 -f video4linux2 -s 1280x960 -i /dev/video0 -vframes 1 image.jpg</code></pre>



<p>このコマンドを実行すると、USBカメラの静止画を撮影してくれます。</p>



<p>-iにはUSBカメラのデバイスパスを指定します。</p>



<p>-ssは撮影開始までの待機時間を指定しています。USBカメラを起動してすぐ撮影してしまうと、露出があっていない画像が得られてしまうことがあるため、10秒ほどまってから撮影するようにしています。画像の取得に時間がかかりすぎるというときは、もう少し縮めてもよいかもしれませんね。</p>



<p>もちろんこれはサンプルですので、環境に合わせてパラメータを変更する必要があります。</p>



<h2 class="wp-block-heading">使い方としくみ</h2>



<p>[Capture]をクリックするごとに、USBカメラの映像が取得されます。</p>



<p>Captureボタンがクリックされると、axiosからapi.phpにアクセスが行われます。api.phpはphpのexecを使用し、上で紹介したffmpegの撮影コマンドを実行します。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="602" height="185" src="https://takabus.com/tips/wp-content/uploads/2021/10/image-65.png" alt="" class="wp-image-467" srcset="https://takabus.com/tips/wp-content/uploads/2021/10/image-65.png 602w, https://takabus.com/tips/wp-content/uploads/2021/10/image-65-300x92.png 300w" sizes="(max-width: 602px) 100vw, 602px" /></figure>



<p>撮影画像ファイルをbase64エンコードし、フロントエンドに返すことで、ブラウザで撮影した画像を閲覧できるようにしました。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="703" height="533" src="https://takabus.com/tips/wp-content/uploads/2021/10/image-64.png" alt="" class="wp-image-465" srcset="https://takabus.com/tips/wp-content/uploads/2021/10/image-64.png 703w, https://takabus.com/tips/wp-content/uploads/2021/10/image-64-300x227.png 300w" sizes="(max-width: 703px) 100vw, 703px" /></figure>



<p>かなりシンプルな仕組みとなっています。</p>



<p>もちろんですが、カメラデバイスにはWebサーバーの実行ユーザーから読み取りが許可されている必要があります。また、一時ファイルを生成するため、当プログラムを配置するディレクトリへの書き込み権も必要です。動作しない場合はアクセス権を確認してみてください。</p>
]]></content:encoded>
					
					<wfw:commentRss>https://takabus.com/tips/462/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
