helpdelete

[勉強会発表のための勉強会]俺の画面共有を手伝ってくれ！ - カンペ

スピーカー

Kazuhito_m

当日の様子

開催理由

Ubuntuで画面共有して…ってでけへんやん！

ということで「パブリック(人数問わず、登録要らず)」で「自身のデスクトップの作業状況をさらせる」までの仕込みに付き合っていただきます。

これをするに至った経緯

  • ここで開催される勉強会の「作業状態の共有」は JoinMe  でされてるがWindowsオンリー
  • 自身はUbuntuなので、画面共有の手段がほしい
    • Macの人にも画面晒せるように
  • 自分もそうだが「気楽に勉強会を突発的にやる」という敷居をダダ下げしたい

目的

  • だれでも「勉強会を突如始められる」環境の整え共有
  • OSプラットフォームによらない「ネットリアルアイム画面共有」の方法の入手
    • Linux(著名なディストリ)、MacOS、Windows
  • 「自身のデスクトップを公開」する、いくつかの手段の入手
    • OBS + YoutubeLive
    • OBS + Mixer(mixer.com)
    • CrankWheel(Chromeブラウザ拡張)
    • screenx.tv

ここで扱わないこと

  • Windowsでの配信環境 
    • んなもんググれば死ぬほどEasyなのが出てくるし第一OBS使わんでもMixerが標準で扱えるようないわばズル！そんな卑怯なことをしているOSになんのケアが要るってんｄ(ry
    • それでも観たければ @yuki476  さんに「再演依頼」を出そう♪

結論(インフラ勉強会内、2018/07/15現在、俺調べ)

利用者順位共有方法画質動画性能遅延の無さ手軽さアーカイブ＆再公開備考
1CrankWheel○△○◎☓そもそも、動画じゃない(みたい)なので、「動き」に期待できない
2OBS + Mixer○○◎△△わけのわからない遅延の無さ！Discrodと相性良い
3OBS + YoutubeLive○○△△◎何と言っても「即、動画としてアーカイブ」が強い。

OBS + YoutubeLive

必要なもの

  • Googleアカウント
  • ブラウザ使用とネット接続とインストーラなどをダウンロード・インストールして良いPC環境
  • マイク(喋るなら)

やること

Ubuntuでの場合を説明しますが、他の環境でも「大まかな手順」は変わらないと思います。

  1. Youtubeアカウントの状態確認
  2. OBSのダウンロード・インストール
  3. OBSの設定
  4. 配信の開始・状態確認

具体的な方法を、以下に。

Youtubeアカウントの状態確認

  • Googleにログイン
  • http://google.co.jp  上で、右上「Googleアプリ」から Youtube 選択
  • 右上の「顔アイコン」をクリックし、「クリエイターツール」をクリック
  • 「ライブ ストリーミング」をクリック
    • 「YouTubeを利用するアカウント」画面が表示されたなら、「チャンネルを作成」する
    • 「始める」をクリックし、「アカウントの確認」をなんだかんだする
  • 「配信ができるか」と、下の「エンコーダの設定」を確認しておく

OBSのダウンロード・インストール

「画面キャプチャ->ストリームに流す」ようアプリ、 Open Broadcaster Software をインストールします。

https://obsproject.com/ja 

「各種プラットフォームにてのダウンロード・インストール方法」は こちら  に記載されています。

自身の環境は Ubuntu 17.10 ですので、 For Ubuntu 15.04 and following versions,   のやりかたでインストールします。

sudo apt-get install ffmpeg
sudo add-apt-repository ppa:obsproject/obs-studio
sudo apt-get update && sudo apt-get install obs-studio

OBSの設定

  • コンソール or ランチャーから obs と打つ
  • 立ち上がって来たら、ウィザードに従い設定
    • 使用許諾を「OK」
    • 自動構成ウィザードで「はい」
    • 「使用情報」では「配信のために最適化し、録画は２次的なもおとする(デフォルト)」を選択し「次へ」
    • 「基本（キャンバス）解像度）」で、「表示したいディスプレイの解像度」を選択し、「次へ」
    • 「配信情報」で、以下を入力し、「次へ」
      • 「配信種別」を「ストリーミングサービス」(デフォルト)
      • 「サービス」を「Youtube/YouTUbeGaming」
      • 「ストリームキー」に、「自身YouTubeの ストリーム名/キー 」をコピペ
        • 「クリエイターズツール」ページ、「今すぐ配信」の下の方、「エンコーダの設定」
    • 「最終結果」に「テスト完了」が表示されたら、「設定を適用」
  • OBSのアプリの画面が立ち上がった状態で以下を設定
    • 「ソース」で ＋ ボタンクリック、「画面キャプチャ」を選択
      • 「ソースを作成/選択」ダイアログでOK
      • 画面から「共有したいディスプレイ」を選び、OK(マルチディスプレイの場合)
    • 「マイク」で歯車アイコンクリック、「プロパティ」を選択
      • 「デバイス」から、音声入力がしたいデバイスを選び、OK
        • 自身の場合は「内部オーディオ アナログステレオ」だったのでそれを
    • 「デスクトップ音声」で歯車アイコンクリック、「プロパティ」を選択
      • 「デバイス」から、音声入力がしたいデバイスを選び、OK
        • 自身の場合は「内部オーディオ アナログステレオ」だったのでそれを
      • PCからの音声を配信に載せたくない場合は、ミュートしておく

配信の開始・状態確認

  • obsの「配信開始」を押す
  • YouTubeのライブダッシュボード  で「配信されているか」を確認
    • 上部のバーが「ライブ」で緑色になっているか確認
    • 真ん中の「プレビュー画面」で配信動画が流れているか確認
    • 右下の「共有」の下に在るURLをタブで開いて、配信動画が流れているか確認

既知の課題

  • せっかくの「Discordのボイスチャット」「双方向性」が活かせない
    • YouTubeLiveをメインで聞こうとすると、Discordで話すと「ラグで会話にならない」ことになる
    • YouTubeLiveを音声切って、Discordメインにすると「映像が遅れる」状態になりやってることがわかりにくい

トラブルシュート

  • ソースに 画面キャプチャ を追加しても、真っ黒な画面が共有されるだけ
  • 設定をクリアしたくなったら
    • 自身の環境なら ~/.config/obs-studio に設定ファイル 群があり、削除したら設定きえました
  • Ubnutuの「ディストリを更新後」そのまま使えなかった場合
    • 一度アンインストールし、aptのリモートリポジトリの設定を削除
    • 再度、上記手順でaptのリポジトリを足す
    • インストール前に apt-get remove libobs0 してから、apt-get install

OBS + Mixer(mixer.com)

https://mixer.com 

Microsoftに買収された、基本的には「ゲーム配信用」の「超☆低遅延」の動画配信サービスです。

Discordもゲーム系ですので、出自が一緒ですね。

必要なもの

  • Microsoftアカウント
  • ブラウザ使用とネット接続とインストーラなどをダウンロード・インストールして良いPC環境
  • マイク(喋るなら)

やること

Ubuntuでの場合を説明しますが、他の環境でも「大まかな手順」は変わらないと思います。

  1. MixerサイトにMicrosoftアカウントでサインイン
  2. OBSのダウンロード・インストール
  3. OBSの設定
  4. 配信の開始・状態確認
  5. 「動画をアーカイブとして残す」方法

具体的な方法を、以下に。

MixerサイトにMicrosoftアカウントでサインイン

Microsoftのアカウントはすでに持っていることとします。(作成自体は割愛します)

  • https://mixer.com へブラウザで移動
  • 右上 SIGN IN をクリック
  • Sign in with Microsoft クリック
  • メールアドレス入力で 次へ
  • パスワード入力して サインイン

※ちょっとちがうならごめんなさい

OBSのダウンロード・インストール

YouTubeLiveと一緒なのでそちらを参照。(割愛)

OBSの設定

mixer.com 側のキー取得

  • mixer.com のサイト中で、右上のアイコンクリック、 チャンネルの管理 をクリック
  • 今日の配信 を確認、必要ならば変更
  • ストリーミングのセットアップ の右側、 コピーのマークをクリック

OBSの起動・設定

先の YoutubeLive で設定を行ったのを前提とします。

  • コンソール or ランチャーから obs と打つ
  • 立ち上がって来たら、「設定」をクリック
    • 「配信」を選択
      • 「サービス」に 「Mixer.com - FTL」を選択
      • 「サーバー」に「Asia Tokyo」を選択
      • 「ストリームキー」に、前述の mixer.com でコピーしたキーを入力
    • 「出力」を選択
      • 「エンコーダ」で「x264」を選択
      • 「ビットレート」に 2000 から 3000 を指定
        • 高すぎた場合、PC自体が重くなったりするため、調整ください
  • 「OK」ボタンで保存

配信の開始・状態確認

  • obsの「配信開始」を押す
  • http://mixer.com/（アカウント名） を表示
  • 自身が配信したい映像が表示されていればOK

「動画をアーカイブとして残す」方法

  • mixer.com のサイト中で、右上のアイコンクリック、 チャンネルの管理 をクリック
  • 下のほうにある Keep reordings [VoOs] of my streams をONにする
  • 配信のち、上部の「VOD」をクリックし、「配信したものが動画として残っているか」を確認する
    • ただし14日しか保存されない

既知の課題

  • 備え付けのチャットで煽られることがある
    • 「勉強会の配信」は「ゲームを期待している人」には見たいものではないので…
  • 基本低遅延だが、ある時「数十秒単位で遅れる」ことがある
    • 原因やきっかけは不明

CrankWheel Screen Sharing

この記事で大体

※類似なものは色々在る模様だが、今回は割愛

screenx.tv

http://screenx.tv/ 

動画でなく「キャラクタ・コンソール」を、そのままWebサイトのHTMLとして、リアルタイム再現するサービス。

必要なもの

  • 以下が入ったLinux
    • Ruby
    • RubyGems
    • screen コマンド
  • 上記Linuxのコンソール

やること

  1. screenxtvクライアントのインストール
  2. screenxtvコマンドを実行

具体的な方法を、以下に。

screenxtvクライアントのインストール

Ruby/RubyGemsがインストール済みの「Linuxコンソール」がすでにあることが前提です

  • コンソールから以下のコマンドを実行
    • gem install screenxtv
    • 自身の端末では sudo が必要だった

screenxtvコマンドを実行

  • screenxtv 実行
    • Create a new URL. では「urlにつけたいIDぽいの」を入力
      • 未入力ならランダムで自動生成される
    • Terminal Color では「サイト表示時のテーマカラー」を入力
      • black/white/green/novelの4テーマ
      • デフォルトはblack(背景黒)
    • Title では「サイト上部に表示したいタイトル」を入力
      • 日本語OK
      • 未入力なら no title になる
  • 起動後、コンソール下に表示されている http:/... をブラウザで表示

Tips/その他

  • 文字サイズの調整は「コンソールのウィンドウサイズ調整」で
    • 全体から比率計算で文字サイズが決まるため
  • 設定の保管場所は ~/.screenxtv.yml
    • 一度接続に成功すると保存され、以降 screentv コマンド実行時に勝手に使われる
    • 表示やアカウントを変更したい場合は、ファイルを削除し実行し直す
  • 「すべてが文字として晒される」ので機密情報は気をつけて
  • サイトにアカウントを登録すると「決まったユーザネームのURLを予約」できる
    • 大体の場合は[アカウント登録しないで放送」で問題ないと思われる

既知の課題

  • 日本語が化けることがある
    • 全てではないため原因は確認できてない
  • 表示が「一画面に収まる」だけしかなく、スクロール等はできない
    • 見てる人はスクロールを戻す等はできない
    • クライアントのスクロールを動かしても反映されない
  • --private オプションで「プライベートモード」がおかしい
    • そこで発行されるURLを表示しても「OFF AIR」になる
    • 主旨的には「URLを知ってる人だけ見られる」はずなのだが…

結論的にはどうなの？

  • DiscordかつUbuntu/Macなら、 Chrome + ChrankWheel Screen Sharing が良さそう
    • 圧倒的な導入&開始の簡単さ
    • 音声チャットが活かせる遅延の少なさ
  • 動きが重要 & 世界に大公開！で良いなら OBS + Mixer
    • もう「わけのわからないレイテンシ性能」がDiscrodと相性良すぎる
    • 自分は「公開してはイケないことはやらない」のでコレでOK
  • インタラクティブでない講義で「残すこと」が重要なら OBS + YoutubeLibe もいい
    • 動画の再利用できるのが熱い！
  • 「コピペ前提」の「多拠点リンク作業」なら Screenx.tv もイイ！
    • ハンズオンなど「テキストで連携される」の値打ちは必ずあると思う
    • 個人的にはコレが好き
  • いっぱいありそう…なので「もっといいのあるよ！」は教えてください！
    • ただし当方UbuntuやLinux勢に忖度を

これが「インフラ屋さんに何が得になんの？」

  • 場合によっては「(遠隔)トラブルシュート」に使える
    • まあHangOutを使うでしょうけれど…
      • 「最大10人の壁」を超えられる
      • GitLabがやったように「公開トラブルシュー」みたいなんができそう
    • 「権限管理」で限定公開 あたりを使うと良いかも
  • 「サーバとコンソールしか無い」みたいな環境で「現地の人と遠隔地とのトラブルシュート」
    • 最も「SSHは許さないがWMは入ってて、かつネットは外へ出れる」サーバなんざ事実上無いでしょけど…
  • もちろん「インフラ勉強会で突発的なレクチャー」で使える

One more thing !(oneじゃねーけどな)

Growiを「プレゼンテーション・ツール」として使う方法

「作業中複数コンソールを維持する手段」について

  • byobu
    • screen/tmux を引き継ぐもの

「オンラインでの同時ドキュメント編集」の歴史について

画面共有(紹介頂いたの)

その他・ご紹介いただいたもの