TOPに戻る

このページで書かれている事


OBSを使ってPixivSketchLIVEで配信する動機

pixiv Sketch LIVE は、ソフトを使わずに配信できる手軽さが売りですが、
それゆえにシンプルな配信方法しか選べません。
ちょっと凝った画面レイアウトで配信したい!という方もいらっしゃるかと思います(自分がそうなので)
そんな方に向けて自分なりにまとめましたので、ぜひ活用して頂ければと思います
(最終更新日:2018/04/06)

1. OBS studio (いわゆる本体)を入手 & インストール

https://obsproject.com/ja (日本語版) から、自分の環境に合った物をダウンロード & インストール

2. OBS-VirtualCam を入手 & インストール

有志の方が作った、OBS用のPluginです
※このプラグインは、OBS本体を先にインストールしてから導入してください

https://github.com/CatxFish/obs-virtual-cam/releases

既にOBSを使っている方は、最新のOBSにUpdateしてください
自分の場合だと、バージョンの低いOBSに、新しいPluginをインストールしようとしてフリーズしました


この記事を書いた時点では、
[OBS studio. ver 21.0.1] + [OBS-VirtualCam. ver 1.2.1]
上記の組み合わせで、問題なく動作しています


3. 画面のレイアウトを調整

ここでの説明は省略します。
デスクトップのキャプチャ範囲や、表示したいアプリ、
画面上に乗せたい自分のイラストのスライドショーなど、好きにレイアウトしてください

▼📹webカメラを180度回転させたい方向けtips▼(ノートPCのカメラ等でアナログ配信したい等)
OBS画面下の[ソース]から[+]ボタン または 右クリック→追加 で [映像キャプチャデバイス]を選ぶ
そのまま流れに沿って、利用しているwebカメラを選択し、映像に載せる。
追加したwebカメラのソースを右クリック → [変換] → [180度回転]

4. VirtualCam をStartさせる


OBSのメニューから ツールVirtualCam を開く
表示されたウィンドウで、 start を押して、VirtualCamを有効にする

ちなみに、☑AutoStart にチェックを入れれば、OBSを起動するたび勝手にstart状態になります
(OBSを起動するたび start するのが面倒な人向け)
※VirtualCamがStart状態のままではOBSの映像設定を弄れないので注意



5. ブラウザからカメラデバイスを変更しておく

2018/04/06 追記:※現在はこの方法を取らなくても、配信開始時にカメラデバイスを選択できるようになっています
ただ、予めここで「デフォルトのデバイス」に指定しておけば、配信の度に選ぶ必要はなくなります


予め、ブラウザで利用するカメラデバイスが OBS-Camera になるよう選択してください

Chromeの場合、chrome://settings/content/camera のURLから、利用するカメラデバイスを選択できます
(※リンクとして開けないので、URLコピペしてブラウザに張り付けて開いてください)
Firefoxでも、たぶん似たような設定項目があると思います(割愛)


6. pixiv Sketch Lives の配信

カメラで配信 を選択し、
映像を入力するデバイス の項目を OBS-VirtualCam とします
(手順 5 で デフォルトのデバイスを、OBSの仮想webカメラに指定していれば、デフォルトのカメラのままでOKです)

手順2で導入した OBS-VirtualCam が、OBSでセットした画面を、
ウェブカメラを通して配信するかの如く、振る舞ってくれます。





配信側のPCを気持ち軽くする方法

OBSを介して配信している以上、素の状態で配信するよりも少し負荷がかかります

動作を軽くさせるために、 使わないアプリは終了させる..
といった事は既知の通りですが、助言的なものを。


・敢えて配信画面を自PCで確認表示させない

自分の配信をブラウザで視聴/確認するだけで、結構負荷がかかります
そこで、ブラウザのタブを切り替える/最小化をする..といった具合に配信画面を非表示にする事で、
それなりにPCへの負荷を下げる事が出来ます。

その際はチャット用のウィンドウをポップアウトさせておきましょう


視聴側で映像がバグった映像が送られている場合のメモ

著しく映像が乱れるケース

視聴中、視聴品質選択の 低・高 に関わらず、映像がブロックノイズ等 頻繁に乱れて、
非常に視聴しづらい配信枠をご覧になったことは無いでしょうか。
(個人的に 滝/滝現象 等と呼んでいます)
その現象に対する考察と、配信側で行う「本当に有効か分からないけど、とりあえず気休め」程度の対処方法を後述しておきます

配信者側と、視聴者側から見えている映像は異なる

まず前提条件として書いておくと、
「配信側で確認できる画質 = 視聴者に届く画質」 ではありません (勘違いしやすいです)

pixiv SKETCH - pixivSketchからのお知らせ
twitter - pixivSketchからのお知らせ

上記2つの記事でそれぞれ触れられている通り、視聴者側にはエンコードされた映像(HLS形式)が送信されますが、
自分自身が見ているブラウザでの映像(品質)と、視聴者が見ているものとは異なります

「自分でpixivに配信した映像を、自分でpixiv側から視聴している」という感覚に陥りやすいのですが、
この思い込みが勘違いの原因なのかな、と思います。

それゆえに、視聴側で映像が乱れていても配信者はそれに気づかないという事故が発生しがちです。

更に、一緒に参加している配信ユーザー同士でも同じような処理が行われるので、
一緒に配信している人同士でも映像の乱れに気づけないという二重の罠になっています。
(一緒の配信から退出し、再び視聴者の立場に戻る事で確認は可能)


実際にリスナー側として見られる映像・画質を正しく確認したい場合は、
配信映像の確認 ボタンを利用してください



(気休めかどうかわからない)解決方法

・配信側の回線不調の可能性
・スペックの可能性
・pixivSketch(サーバー)側の(負荷による)可能性

思いつくのは3つくらいなのですが、
「サーバーへ送る配信映像の容量を減らす」事で、
気休め程度の改善が見込める可能性が高くなるのかな?と思いました

↓とりあえず配信映像のデータ量を下げる方向で記述していきます


OBSの 設定 から 映像 を選び、出力(スケーリング)解像度 をより小さいものに置き換えます

1280*790 あたりになっていると思うので、960*540に変更したり、
高画質とは言えませんが、640*360あたりまで下げて、
いっそのこと「正しく見てもらえないよりマシ」と割り切って様子を見るのは如何でしょうか



また、2018年3月下旬から、負荷による配信の不具合軽減を目的とした、低画質モードが実装されました
乱れが発生する配信者さんは、こちらを利用すると いくらかマシになるかもしれません

映像が乱れる現象に関しての、聞き取り内容やメモ・考察など

Pixiv Sketch Live上でブロックノイズ等発生し、画面が常に または 高頻度で乱れてしまう配信者さんから、
配信環境に関するお話が聞けたものを個人的にまとめています。

ユーザーさんA:Windows 7(x64) / CPU C2Q 8200(2.33GHz) / RAM 7GB(7?) / ATI radeon HD 4600
PhotoShop , TVP Animation 10 Pro / WiFiで接続 / Chrome 64.0.3282.167 x64
セキュリティソフトは Kaspersky
※sketch live サービス開始当初は問題なく配信出来ていたとの事
(恐らく、HLS環境に移行する前の話なので、エンコードの影響を受けていない状態?)

ユーザーさんB:WiFiで接続

ユーザーさんC:有線で接続 / Sai / アプリケーション選択で配信

ユーザーさんD:有線(ADSL)で接続 / Win7 / Sai / Chrome / メモリ8G (配信時は消費30%程で、負荷は高くなさそうなイメージ) / GeForce GT730 / i5-760(2.80GHz)

ユーザーさんE:ClipStudio / Chrome / アプリケーション選択で配信 / グラボはAMD製ではないはず、との事

ユーザー6(Jさん):ADSL回線

ユーザー7(Yさん):CPU A10-7700K 3.4GHz , グラフィック:Radeon HD 8770 (ずっとではないが、それなりの頻度でキャンバス映像の乱れが発生)
(OEM 中身はHD7770との事?)

ユーザー8(Mさん):Softbank Air で接続が不安定 / iPhoneのインターネット共有 機能を使うと、接続は安定しやすい(が、映像は乱れる)
i5-6500 3.20Ghz / Mem 16G / Intel HD 530 / GeForce GTX 560 (グラフィックはこちらが利用されている模様)
3月下旬に実装された低画質モードでの配信でも乱れる模様
このスペックで映像が乱れるとは考えにくいので、回線の問題(特に上り?)説が濃厚
一旦の結論を、回線品質とすることに
WiMAX2+からソフトバンクエアーへの乗り換え。比較してやめた。

ユーザー9(Eさん):
↓同じく上り速度が2.3MBps前後なのにもかかわらず、接続が切れない別の配信者さん
YahooWifi ymobile pocket wifi 上り 2.39で、快適に配信出来ている
YmobileのポケットWifi502 HW
既に新規の申込受付を終了している、3000円ほどの使い放題のプラン → Y!Fi(ワイファイ)データプラン2(4G/LTE)だそうです

ユーザー10(Cさん):
win10 Home x64 / i7-6700K 4GHz / メモリ16G / GTX 660 1GB
Softbank Air 利用 / 最初は安定していたが、途中から常時映像の乱れが起こるように。
マイクをONにしていると、映像だけではなく音声チャンネルにも乱れが生じる
一度速度を測ったところ、上りは 1.68Mbps (210.58kB/sec) との事(午後8時ごろ)
http://horobi.com/Saiteika/にて検証を行って貰った所、最適化なしのOKであったとの事
(※ただし、下りのみ判定であれば、肝心の上りが最適化されているかは検証不可能)
(安定している方) WiMAX2+ギガ放題という一番高いプラン / wimax W03 との事
http://iphone-apple.net/archives/3328 (紹介されている一番上のプラン)


【公式のヘルプをいくつかピックアップ】
SKETCH - Photoshopで画面共有をしようとしたのですが、キャンバスや画像が表示されません
SKETCH - 不具合が起こった場合の対処方法
SKECT - ライブ機能について
SKETCH - ライブが配信できるブラウザは?


【その他のこと】
「配信のサムネイルは、およそ10分周期で生成される」というのが前提として、
映像がほぼ常に乱れている配信は、サムネイルがなかなか更新されない現象を観測している。
↑映像に乱れの招じていない配信でも、なかなか生成されないケースは普通にあった

サムネイルの生成+アップロードは handleHeartbeat からの createThumbnailFromVideo 経路で行われているならば、
サーバーの障害ではなく、配信PC(クライアント)側で問題が起きていると推測される?

上り回線 or ブラウザ(やPC環境) が原因なのかなあ、と思ってはいるのですが、はてさて..(素人並みの感想)

CPU i7-3960X と i7-3930kでChrome視聴→カクカク
FireFoxに切り替えると快適、という体験談アリ。

仮説・考察

▼CPUやGPU、メモリ等のスペックや負荷が原因?

全てのユーザーさんから、OSから内蔵のグラフィック機能まで情報を聞き取りはしていないのですが、
負荷だけが原因として説明はつきにくいと思っています

ノートPCで映像の乱れ無く配信している方もいれば、
負荷の少なそうな環境でこの現象が起きている方もいらっしゃいました

画面を取り込む過程で、特定の機構を利用しているソフトやハードでこの現象が発生する..
とかならまだ分かるのですが、未だに共通性を自分は見いだせていません;;


▼同時に起動している何かしらのソフトが原因?

負荷路線とは別に、常駐させているソフトが画面取り込み or データの送信過程で悪さをしている。
これも考えにくいですが、かろうじてありそうならセキュリティソフトでしょうか。

ユーザーさんの一人がセキュリティソフトで Kaspersky を利用していました。

また、セキュリティソフトが関係するにしても、ポート単位でブロックするでしょうし、
データの一部を送信前に加工・フィルタリングする
→その結果、アップロードされる映像が乱れる、というのもなさそうな話だと自分は思うのですが..


▼回線の遅さが原因

Wifiや回線の遅さが原因かな?とも思いましたが、
そうであれば接続が頻繁に止まるほうが自然なのかなと思いました。

PCをWifiで利用されている方もいれば、有線で繋いでいる方も居るようです
流石にWifiの規格や強度まで聞き取りは行っていないのですが。


▼運営側のサーバー負荷が原因

重い時間帯が存在しているので、そういった所も関係しているのかなと思ったのですが、
深夜帯(AM2:00とか)明け方・早朝レベルでも乱れる現象に遭遇していますし、
重い時間帯でも(遅延などはありますが)高画質で視聴できる配信者さんも沢山いらっしゃるので、
純粋にサーバーが重いから乱れる、という説明はつきにくいと考えています


▼運営側のサーバー負荷が原因 その2

大前提として【特定のユーザーがこの現象に陥りやすい】というものがあります。
それゆえに、ユーザーのID(何かしらの規則性)で処理を行うサーバーを割り振っており、
その一部のサーバーで、障害や高負荷による映像処理(入力or変換or出力)の乱れが生じている可能性
..というのも考えました。

ちなみに、この現象に陥っているユーザーさんが別アカウントで配信した所、
映像品質の改善は行われませんでした...


▼回線の品質(経路)が原因

詳しく回線の内容を聞き取っていないのですが、うち2件、ADSLであるとのお話を聞いています



まぁ長々と垂れ流しましたが、自分の中だと可能性高そうなのは
GPUやブラウザとの、ソフトウェーア・ハードウェア的な相性だと思っています


その他メモ

環境によって乱れが発生する = スペック,エンコード関連での相性の悪さ と考える
この場合、利用している技術(WebRTC)に関する物との関連性を調べた方が良いのかな?と思い、
まずは広い範囲から探りを入れて、徐々に焦点を絞っていく感じに

HLS (HTTP Live Streaming)という「配信技術」で配信されている。
m3u8 + .ts 形式

WebRTC以前の予備知識 : コーデック
H.264 , H.265

H.265(HEVC)へのハードウェアエンコード、デコードへの対応

コードを覗く限り、handleSoraInitializeメソッドで、配信用サーバに送っている情報に
videoCodecType: "H264"
が指定されているので、これに関しては H.264 のような気はする

コンテナフォーマットは .ts 形式で良いのかな?
H.264という動画コーデック(アリゴリズム形式/そういう名前の技術)でエンコード(変換)されている
用語解説辞典 - MPEG-4 AVCを見るに、H.264 = MPEG-4 AVC は同義らしい
音声コーデック:?

https://shiguredo.jp/
https://sora.shiguredo.jp/#demo-box / Sora 配信デモ

Twitter @pixivsketch / WebRTCからHLSへの仕様変更のお知らせツイート

デバッグ chrome://webrtc-internals/

.ts ファイル (高画質版)
解像度 1920*1090 表示解像度 1920*1080 FPS 24
コーデック H264 - MPEG-4 AVC (part10) (h264)
発行者:FFmpeg
オーディオ 48000 Hz 128kb

クライアント

・低画質配信の解像度を弄る
this.getMaxVideoSize メソッド書き換え
"low" 時の値が 960x540 なので、これを敢えて落とす

・パラメータ操作
handleSoraInitialize メソッド内でSoraサーバーへ投げるパラメータを弄る
https://github.com/shiguredo/sora-js-sdk
全てのパラメータが鯖で受け付けられているとは限らない

配信者側は n.publisher() の第三引数で与えられているオブジェクト
videoBitRate: を与えてみたけど、明確に何かが変わったような感じはしない

https://sora.shiguredo.jp/js-sdk-doc/devguide.html
https://sora.shiguredo.jp/doc/DEMO.html
https://testrtc.com/webrtc-internals-parameters/
chrome://webrtc-internals/

観測していると、Stats graphs for bweforvideo (VideoBwe)
googAvailableSendbandwidth などのラインは下がっているみたいだった