Encraft ライブ配信ハンドブック

ナレッジワークの技術勉強会Encraft（ https://knowledgework.connpass.com/ ）でのライブ配信手順をもとにしたドキュメントです。
イベントの目的や、機材・配信環境によって配信方法は異なりますので、ご参考までにお願いします。

Transcript

1. Encraft ライブ配信ハンドブック 株式会社ナレッジワーク Enablement Group
2. © Knowledge Work Inc. 本ハンドブックは、ナレッジワークの主催する技術勉強会、Encraft でのライブ配信手順をもとにしたドキュメントで す。 イベントの目的や、機材・配信環境によって方法は異なりますので、ご参考までにお願いします。 はじめに https://knowledgework.connpass.com/
3. © Knowledge Work Inc. • ライブ配信を行う理由 • はじめてのハイブリッド開催 • トラブルシューティング • YouTube Studioノウハウ • ATEMスイッチャーノウハウ • StreamYardノウハウ アジェンダ
4. ライブ配信を行う理由 ライブ配信ハンドブック
5. © Knowledge Work Inc. このハンドブックの目的 ୭΋͕഑৴Ͱ͖Δ Ұ෦ͷਓ͚͕ͩ഑৴Ͱ͖Δ ナレッジが属人的 全体感がつかめない 緊急時の対策ができない ノウハウが溜まらない ナレッジがまとめられている 全体感がつかめる 緊急時の対策ができる ノウハウが溜まっていく 組織として配信を円滑に行うためのノウハウの提供と再現性を実現する
6. © Knowledge Work Inc. ライブ配信の必要性 参加しやすさ 熱量 コスト オフライン （現地） オンライン （配信） ✕ ◎ △ ◎ △ ◯ ハイブリッド ◎ ◎ ✕ 参加人数 ◎ ◎ △ より効果的なイベントを行う手段として必要性が高い
7. © Knowledge Work Inc. オンラインのみとハイブリッド開催の違い 利用サービス トラブル 必要人数 オンライン のみ ハイブリッド YouTube Live X（配信） StreamYard 配信が止まる 登壇者の環境問題 1人 YouTube Live X（配信） StreamYard 配信が止まる 登壇者の環境問題 機材トラブル 準備に時間がかかる 2人 利用機材 PC（配信・登壇） カメラ スイッチャー 会場機材 PCのみ ハイブリッドの方が難易度が高い
8. はじめてのハイブリッド開催 ライブ配信ハンドブック
9. © Knowledge Work Inc. Encraftにおける役割 配信担当 （主） 役割 機材の準備から配信までを行う担当者 配信担当 （サポート） 主担当の指示に従って、準備や配信を手伝う SNS担当 XへのポストおよびXに投稿された質問を拾う YouTubeやXへの配信状況も確認する 個人の準備物 PC・イヤホン・スマホ PC・イヤホン・スマホ スマホ・イヤホン
10. © Knowledge Work Inc. 配信担当者の育成 Encraft #N Encraft #N+1 Encraft #N+2 ベテラン 担当者 新人 担当者 配信担当 （主） 配信担当 （サポート） 配信担当 （主） 配信担当 （サポート） 配信担当 （サポート） 配信担当 （主） サポートを2回こなして、3回目に主担当になるイメージで育成を行う
11. © Knowledge Work Inc. ハイブリッド開催における配信の流れ 構成図と 機材の確認 配信の 準備 機材の 準備 操作方法の 確認 本番配信 当日準備 事前準備 徐々に慣れていきましょう
12. © Knowledge Work Inc. 構成図と機材の確認 - ハイブリッド開催における配信の流れ 構成図と 機材の確認 配信の 準備 機材の 準備 操作方法の 確認 本番配信 当日準備 事前準備
13. © Knowledge Work Inc. StreamYardを中心に構成する オンライン配信で使用するサービス StreamYard 用途 オンライン上でYouTubeやXなどにライブ配信をするサービス 直接、ATEMスイッチャーやOBSを使った配信よりやれることは少ないが属人性が減る PCのトラブルにも強く、PCとの接続が切れてもサーバ上で配信が続く ZoomやMeetなどのオンライン会議と同じような雰囲気で使用できる YouTube Live YouTubeへライブ配信を行うサービス StreamYardにYouTubeチャンネルを登録しておけば、自動で配信が行える X X（旧Twitter）へライブ配信を行うサービス StreamYardにXアカウントを登録しておけば、自動で配信が行える
14. © Knowledge Work Inc. オンライン配信の基本構成 YouTube Live StreamYard X PC ① PC ② 参加者が視聴するメディア MCと登壇者 この構成をハイブリッド開催にも応用する
15. © Knowledge Work Inc. ハイブリッド開催 YouTube Live X（旧Twitter） StreamYard 配信PC ストリーミングサーバ ここからYouTubeとXに配信 RTMP ブラウザ 配信スタジオ 映像：カメラ 音声：マイク 会場機材から映像や 音声を入力する 会場機材・持ち込み機材 会場機材によって機材類の構成が変わる
16. © Knowledge Work Inc. 映像や音声を一度スイッチャーに集めて出力にまわす 持ち込み機材（主要なもの） スイッチャー 用途 登壇者PCの映像出力、会場マイク、カメラを入力とする 映像を会場のプロジェクタに出力する（HDMI） 映像と音声を配信PCに出力する（USB Type-C） カメラ 登壇者を撮影するためのカメラ HDMIでスイッチャーに接続する 三脚 カメラを乗せるための三脚 機種 ATEM mini Pro SONY α7C II SONY FE20-70mm F4 Velbon (ベルボン) ファミ リー三脚 EX-650 II AZ
17. © Knowledge Work Inc. ハイブリッド開催（AP虎ノ門）の構成図 YouTube Live X（旧Twitter） StreamYard カメラ スイッチャー 会場AV機器 配信PC 登壇PC HDMI Type-C 登壇者 音声 HDMI (Input 2) HDMI (micro) HDMI (Input 1) ブラウザ RTMP
18. © Knowledge Work Inc. 配信の準備 - ハイブリッド開催における配信の流れ 構成図と 機材の確認 配信の 準備 機材の 準備 操作方法の 確認 本番配信 当日準備 事前準備
19. © Knowledge Work Inc. スタジオ StreamYard上の概念 バックステージ ステージ 登壇者C 管理者D 配信されない 音声は登壇者・管理者へ届かない 画面共有と映像だけ管理者に見える 配信開始後であれば配信される 画面共有、映像、音声が登壇者・管理者に届く バックステージにいる人にも届く 登壇者C 画面共有 登壇者A 管理者B 登壇者A 画面共有 バックステージからステージの移動は管理者のみが行える
20. © Knowledge Work Inc. スタジオ（ライブ配信）の作成 ホーム > 予定 > +作成 - ライブ配信を選択 - 配信先を選択（初回は認証が必要） Xを選択 - プライバシー - テスト時：「限定公開」を選択 - 本番：「公開」を選択 配信作成時に YouTube Live のページも 作成されるので、この時点で URL を取 得できる
21. © Knowledge Work Inc. YouTubeの概要欄の設定 イベントページ：https://knowledgework.connpass.com/event/314168/ ▪ Encraft #13 QA Enablement - Insight by QA activity 第13回のEncraftはQA領域のトピックに焦点を当てます。テスト・QA業界の関係者が日々の業務を改善するための情報交換の場としてQA Enablementと 題し、今回は「Insight by QA activity」というタイトルで「品質保証活動からの情報提供」をテーマとして取り上げます。 ▪こんな人におすすめ 品質・QA・テストに関わるすべての方 品質保証活動から有用な情報を提供したい方、もしくは提供されたい方 品質保証活動からの情報提供に関する事例に興味のある方 ▪ Encraft について Encraft（エンクラフト）は株式会社ナレッジワークが提供する、 "Enablement"：「できるようになる」 "Craftsmanship"：「こだわりを持って」 をテーマにした勉強会です。 技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を提供します。 ▪ 株式会社ナレッジワークについて https://kwork.studio/ 「できる喜びが巡る日々を届ける」というミッションのもと、「仕事におけるイネーブルメント（能力向上や成果創出）」をテーマに、企業向けクラウ ドサービス「ナレッジワーク」の開発・提供をしています。 https://knowledgework.cloud/ また、2022年12月にはGoエンジニア向けのイネーブルメント事業を始動するなど、新たな事業創出にもチャレンジしています。 * X（旧Twitter）: https://x.com/kworkdev * Developers blog : https://note.com/knowledgework/ * Zenn : https://zenn.dev/p/knowledgework * エンジニア採用ページ : https://kwork.studio/recruit-engineer * connpass : https://knowledgework.connpass.com 説明のサンプル
22. © Knowledge Work Inc. Xへの配信 ナレッジワーク主催の開発者向け勉強会 Encraftは19 時より始まります。X回目のテーマは「XXXXXX」で す。 視聴はこちらから → https://youtu.be/XXXXXXXX #encraft タイトルのサンプル タイトルがそのまま投稿に使用される
23. © Knowledge Work Inc. ピクチャーインピクチャー（PinP）の方法 カメラ 登壇PC 発表スライド ◀PinPをON ◀PinPをOFF 表示箇所を変更 1 2 Input 2を押す Input 2 Input 1 ・A ・B ・C 発表スライド ・A ・B ・C 配信 会場 USB Type-C （Program 出力） HDMI （Input2のみ 出力）
24. © Knowledge Work Inc. ピクチャーインピクチャー（PinP）の設定 会場の投影（HDMI） 配信（USB Type-C） ◀ 登壇PCのみ出力 ◀ PinPを含む出力 ATEMスイッチャー9.5からHDMIとType-Cで 出力を分けることができるようになった Input 2を押す ▶ ATEM Software Controlの メニュー ATEM Software Controlの メニュー
25. © Knowledge Work Inc. ATEM Software Control Blackmagic DesignのページからDLしておく 重いので早めにDLしておくこと ATEM Software Control ATEMシリーズの設定・操作をする ・ノイズ除去 ・出力先の変更 ・スイッチャー直接配信 ・クロマキー／PinP ・収録
26. © Knowledge Work Inc. 配信中にうっかり押さないようにするために 無効化しておくこと FTBの無効化 ◀ FTBボタンが無効される
27. © Knowledge Work Inc. 会場によってことなるので音がおかしい場合は調整する マイク入力の設定 ◀ ラインを選択する
28. © Knowledge Work Inc. 配信の準備 - ハイブリッド開催における配信の流れ 構成図と 機材の確認 配信の 準備 機材の 準備 操作方法の 確認 本番配信 当日準備 事前準備
29. © Knowledge Work Inc. ONボタンで有効化 ボタンで場所切り替え スイッチャーの操作 Programに出力する 入力の切り替え マイク入力のON/OFF 常にONにしておく PGM（Program） を選択 マイク 入力 ミュートの制御は StreamYardで行うこと HDMI 入力 1 HDMI 入力 2 HDMI 出力 PC接続 細かな設定はATEM Software Controlを使用する
30. © Knowledge Work Inc. スタジオ画面 - StreamYardの操作 オーバーレイ： 開始前は前面に 表示しておく レイアウト： 複数画面の配置 （スイッチャー で制御する場合 は操作不要） カメラ＋スライ ドの映像がスイ ッチャーから入 力されるので 「ステージに追 加」しておく （開始前はミュ ートにすること に注意） バナー： 左に向かって流れる テロップ（開始時間 は毎回違うので注 意） 背景音楽： 配信前にかける（配 信開始時はオフにす るように注意） 配信開始ボタン： YouTubeやXに配信が 開催される
31. © Knowledge Work Inc. カメラ・オーディオ設定 - StreamYardの操作 Blackmagic Designを選択 Blackmagic Designを選択 現状この設定が ベストプラクティス！
32. © Knowledge Work Inc. 配信の準備 - ハイブリッド開催における配信の流れ 構成図と 機材の確認 配信の 準備 機材の 準備 操作方法の 確認 本番配信 当日準備 事前準備
33. © Knowledge Work Inc. ハイブリッド開催（AP虎ノ門）の構成図 YouTube Live X（旧Twitter） StreamYard カメラ スイッチャー 会場AV機器 配信PC 登壇PC HDMI Type-C 登壇者 音声 HDMI (Input 2) HDMI (micro) HDMI (Input 1) ブラウザ RTMP
34. © Knowledge Work Inc. 機材準備の流れ 会場機材の準備 電源タップ x 2、LANケーブル、HDMIケーブル（長め）、音声出力ケーブル、音声入力ケーブル スクリーンを下ろす、プロジェクターの電源を入れる 電源の準備 配信用と登壇者用に電源を準備する スイッチャー 電源を入れ、構成図の通り接続する カメラ 三脚を準備し、カメラを乗せ、構成図の通り接続する USBで給電するのを忘れないこと 映像のチェック Input 2を選び、登壇者PCの映像が会場のプロジェクタに出力されているかチェック Input 1を選び、カメラの映像が会場のプロジェクタに出力されているかチェック Input2を選び、PinPをON、配信PCのカメラ入力に合成された映像が出力されているかチェック 音声のチェック マイクの音声が会場に流れているかチェック 配信PCのマイク入力に会場マイクの音声が流れているかチェックする
35. © Knowledge Work Inc. 配信の準備 - ハイブリッド開催における配信の流れ 構成図と 機材の確認 配信の 準備 機材の 準備 操作方法の 確認 本番配信 当日準備 事前準備
36. © Knowledge Work Inc. 配信の流れ 事前準備 StreamYard 上でテスト配信用のスタジオを作成し、YouTube 上で映像・音声をチェックする オーバーレイ・バナー・BGMを適切に設定する イベント開始 5 分前くらい 「ライブ配信を開始」ボタンを押して YouTube 上で待ち画面を表示する イベント開始 直前 オーバーレイ・バナー・BGM を外し、会場のカメラ映像・音声を入れる 司会者に合図を送る イベント中 登壇者 PC からの映像（スライド）を表示（トークの場合はカメラメイン） 発表の合間はカメラからの映像を流しておく アンケート中 映像そのままで「アンケートにご協力ください」のバナーを流す 終了 配信を終了する YouTube Live を非公開にする（別途動画をアップロードする） Xの投稿（配信）を削除する
37. © Knowledge Work Inc. テスト配信 - ライブ配信を選択 - 配信先を選択 - プライバシー - テスト時：「限定公開」を選択 チェック項目 ☑ マイク音声がクリアに配信されてい る ☑ 登壇者PCの映像が配信されている ☑ カメラの画像が配信されている ※ 特に音声を中心にチェックする
38. トラブルシューティング ライブ配信ハンドブック
39. © Knowledge Work Inc. YouTube Liveでマイクの音が聞こえない • StreamYard で設定した BGM は聞こえますか？ ◦ Yes • StreamYard 上でインジケータが反応していますか？ ◦ Yes ▪ 配信 PC はステージに上がっていますか？ ▪ 配信 PC がミュートされていませんか？ ◦ No • StreamYard のマイク入力は正しく設定されていますか？ ◦ PC 内臓のマイクが選択されていませんか？ ◦ マイクの音量設定が０になっていませんか？ • スイッチャーの音声出力は ON になっていますか？ • 会場機材とスイッチャーは正しく接続されていますか？ • マイクの音量が小さすぎませんか？ ◦ No ▪ YouTube を再生しているデバイスの音量が 0 になっていませんか？ ▪ YouTube プレーヤーがミュートまたは音量が 0 になっていませんか？ ▪ 見ている YouTube Live は Stream Yard で配信中のものと同じですか？
40. © Knowledge Work Inc. うっかり配信終了ボタンを押してしまった StreamYardの配信終了ボタンを押すとYouTubeの配信も止まります 配信先をRTMPにしていない限り、同じURLでYouTubeに 再度配信することはできません。 RTMPを使って配信するとYouTubeコメントの機能が使えなくなります。
41. YouTube Studioノウハウ ライブ配信ハンドブック
42. © Knowledge Work Inc. アカウント（ブランド）の作成 1. YouTubeを開く 2. アカウント設定（右上の自分のアイコン） 3. アカウントを切り替えるメニュー 4. アカウントの追加 5. 必要な情報を埋める
43. © Knowledge Work Inc. 1. https://studio.youtube.com/を開く 2. 右上の＋のアイコンからライブ配信を開始を選ぶ 3. 有効化を行う（最大24hかかる） 4. 電話番号あたりの作成できるLiveチャンネル数が決まっている（年間） YouTube Liveの始め方
44. © Knowledge Work Inc. ストリームキーの作り方
45. © Knowledge Work Inc. RTMPを使った配信
46. ATEMスイッチャーノウハウ ライブ配信ハンドブック
47. © Knowledge Work Inc. 参考動画 ATEM Miniシリーズを使いこなす
48. StremYardノウハウ ライブ配信ハンドブック
49. © Knowledge Work Inc. 参考文献 https://techbookfest.org/product/6201115232174080?productVariantID=5134786387509248 StreamYard Perfect Guidebook - 基礎から応用まで徹底解説！（Sato Shoco）