YouTubeLiveでMacのウェブカメラで撮影している映像をライブ配信し、その様子をウェブページに埋め込んだプレイヤーに表示する方法

ひょんなことからYouTubeLiveをウェブページに埋め込む方法を調べました。

必要なもの

1. Googleアカウント（ https://accounts.google.com/SignUp ）
2. Google Adsenseアカウント（ https://www.google.co.jp/adsense/start/ ）
3. Adsenseアカウントに紐付いたYouTubeチャンネル（ https://support.google.com/youtube/troubleshooter/7367438 ）を参考に紐付けましょう ）
4. OBS（ https://obsproject.com ）

---

配信手順

1. YouTubeの 「クリエイターツール」 > 「ライブストリーミング」 > 「今すぐ配信」 を選択

2. 「サーバー URL」と「ストリーミングキー」をメモ

3. 「動画再生ページを表示」をクリックし、動画再生ページを準備

4. OBSを起動してサーバー URL、ストリーミングキーを設定

• 「設定」 > 「配信」 を表示。
• 「配信種別」を「カスタムストリーミングサーバー」に設定。
• 「URL」に「サーバー URL」を入力。
• 「ストリームキー」に「ストリーミングキー」を入力。
• 「OK」をクリック

5. ソースを追加

• 「ソース」 > 「＋」 > 「映像キャプチャデバイス」をクリック

• 適当な名前をつけて「OK」をクリック

• 「デバイス」にウェブカメラを選択して「OK」をクリック

6. 配信開始

• 「トランジション」をクリック

• 「配信開始」をクリック

7. 埋め込み用のiframeを取得

• 動画再生ページにアクセス

• 「共有」 > 「埋め込む」 をクリック

• iframeの埋め込みタグをコピー

このように取得したiframeのコードをウェブページに貼り付けることによって、
無事にウェブページにMacのウェブカメラで撮影している映像のライブ中継を埋め込むことができました。

また、YouTubeのiframeAPIに動画再生ページのIDを渡せば、プレイヤーを生成することも可能で、
パラメータを渡すことによって、iOS10以降のiPhoneでインライン再生ができることも確認しました。

kimizuka.hatenablog.com

どこかで誰かの役に立てば幸いです。

シェルスクリプトで大量のwavファイルをmp3ファイルに変換する

ひょんなことから100本以上のwavファイルをmp3に変換しなければならなくなり、シェルスクリプトを書きました。

#!/bin/sh

for file in *.wav
do
    fileName=`echo ${file} | sed -e "s/\.wav$//"`
    ffmpeg -i ${fileName}.wav -ac 2 -codec:a libmp3lame -b:a 48k -ar 16000 ${fileName}.mp3
done

ffmpegを導入済みだったので変換にはffmpegをつかっています。

kimizuka.hatenablog.com
kimizuka.hatenablog.com

夏のできごと まとめ（台無しプロダクト、MakerFaire、北仲COOP、IoTLT、Orphe + IoTアプリコンテスト）

ブログを書こう書こうと思いながら、嵐のように夏が過ぎていき、
このままだとにっちもさっちもいかなくなりそうなので、
雑な文章になってしまいますが、8月のできごとをえいや！という感じでまとめて振り返りたいと思います。

台無しプロダクト

ふと、「よかれと思って機能を足した結果、元の機能を台無しにしてしまうこと」って多々あるようなぁ。と思い、
例を考えて「 #台無しプロダクト 」というハッシュタグを付けてTwitterに投稿するという活動を7月中旬からはじめました。

いくつか紹介すると、

『光るまきびし』
おそらく世界で一番光ってはいけないものを光らせてしまう台無しさ。#台無しプロダクト #よかれと思って機能を足して台無しにする pic.twitter.com/ZFn1JmZgtg

— 君塚史高 (@ki_230) 2017年7月12日

『音が出る水遁の術』
水中に忍んでいるときに暇そうだったんで、筒に演奏機能をつけてみました。#台無しプロダクト pic.twitter.com/8az77TF7jJ

— 君塚史高 (@ki_230) 2017年8月22日

『順路付き迷路』
お客様を迷わせないように順路を表示をしてみました。#台無しプロダクト pic.twitter.com/5NvCPSwQdI

— 君塚史高 (@ki_230) 2017年8月31日

みたいな感じです。

こちらの モーメント にまとまっています。
twitter.com

MakerFaire

台無しプロダクトの代表として、「光るまきびし」を制作して販売しました。

Maker Faire Tokyo 2017に出展中の『光るまきびし』ですが、「本当に使い道が無いですけど大丈夫ですか？」と確認しながら販売してます。
なんと、在庫が残り2つです！#台無しプロダクト#MakerFairTokyo2017 pic.twitter.com/VSeT6tzgvK

— 君塚史高 (@ki_230) 2017年8月6日

Make Tokyo Meeting の頃から何回か出展させていただいているのですが、
「物販ははじめて」 + 「使いみちがないものを販売する」 という2つが重なりとても緊張しました。
が。販売だと評判がダイレクトに売上につながるという緊張感が良いですね。
概ね好評だったので、とても嬉しかったです。

北仲COOP

横浜トリエンナーレ2017の関連展示として、「北仲COOP」というギャラリーがオープンしました。

yokohama-sozokaiwai.jp

会場の間に位置する馬車道駅そばの北仲エリアでは、これまで横浜のアートシーンに関わってきた人々による期間限定のギャラリーショップ「creative Shop & Gallery 北仲COOP」がお目見え。数百人の作家による数千点の作品を観て買うことができます。
http://yokohama-sozokaiwai.jp/eventreport/15948.html より引用

数百人の作家による数千点の作品を観て買うことができるんですね。＾ ＾

そして、ひょんなことから、こちらでも台無しプロダクトの代表として、「光るまきびし」を展示させて頂いております。

『光るまきびし』ですが、横浜トリエンナーレの会期中、北仲COOPにひっそりと出展させて頂いております。#台無しプロダクト#ヨコトリ pic.twitter.com/0iwUoc8JZs

— 君塚史高 (@ki_230) 2017年8月9日

11月5日（日）までです。

IoTLT vol.30

IoT縛りの勉強会! IoTLT vol.30 @ DMM - connpass に参加させていただきました。

「ウェバイス」「合コンさしすせそボタン」「台無しプロダクト」と事例を詰め込みすぎたことを反省しています。
しかも、「台無しプロダクト」は大体IoTじゃないという。

ウェバイスをつくろう（合コンさしすせそボタン編） from Fumitaka KIMIZUKA

www.slideshare.net

台無しプロダクトをつくろう from Fumitaka KIMIZUKA

www.slideshare.net

※ 当日は1つのスライドになっていたものを分割してアップロードしました。

Orphe + IoTアプリコンテスト

ひょんなことから、 光るセンサーシューズOrphe(オルフェ)＋IoTアプリコンテストmeet up！ - connpass にて事例紹介をさせていただきました。

「Orphe + IoTアプリコンテスト」先行応用事例紹介 from Fumitaka KIMIZUKA

www.slideshare.net

ひとついえることは、Orpheはすごいということですね。

以上です。
9月はもうちょっとこまめにブログにまとめていきたいですね。