もっと詳しく

みなさんこんにちは、FascodeNetworkのブログスケジュール管理どころかブログも書いているなおこです。

イラストを描いている際にタイムラプス映像の撮影をしようと思いOBSを起動しようと思ったのですが、以前ミスって録画ボタンと間違えて配信ボタン押しちゃうこともあったし、内容的にも映像だけ撮影できればOKなのでわざわざOBS立ち上げるのもめいどいな〜ってことで

資料を探すのにブラウザは常に起動しているためブラウザ単体で画面録画できる方法をGoogle検索をして探してみたところ、見つけました!それがscre.ioです。

ということで、今回はブラウザで動く神画面録画ツールのscre.ioをご紹介したいと思います。

scre.ioとは

scre.ioはWebRTCという大容量の通信をリアルタイムで行うことを可能とするAPIの中にある

mediaDevices.getDisplayMediaという関数を使用して海外の方が作られた画面録画ソフトです。

mediaDevices.getDisplayMediaは画面共有を気軽に扱えるAPIでDiscordなどのチャットサービスで使われてる印象が強いですね。

mediaDevicesに関して詳しくはmozilla.orgのサイトがわかりやすく解説されてるのでそちらをご覧いただけますと幸いです。

MediaDevices – Web API | MDN
MediaDevices インターフェイスは、カメラやマイク、さらに画面共有などの接続されたメディア入力デバイスへのアクセスを提供します。要するに、メディアデータのソースであるハードウェアにアクセスすることができるようになります。

scre.io自体の詳しい解説は公式サイトがわかりやすいと思われるのでぜひぜひそちらをご覧いただけますと幸いです。

scre.ioの公式サイト

Screen and camera recorder – Scre.io
Record videos from the camera or capture from the screen. Free screen and camera recorder. Capture unlimited videos. Available for Mac, Windows, Chrome and Edge…

今回使うPCスペックや実行環境

  • OS : Alter Linux(実質Arch Linux)
  • MB : B450M Steel Legend
  • CPU : AMD Ryzen 5 5600x
  • GPU : NVIDIA GTX 960
  • RAM : 32GB
  • HDD : 4TB

ブラウザは、AURのGoogle ChromeとMicrosoft Edge を使用します。

AUR (en) – google-chrome
The popular and trusted web browser by Google (Stable Channel)

AUR (en) – microsoft-edge-stable-bin
A browser that combines a minimal design with sophisticated technology to make the web faster, safer, and easier

scre.ioをインストールしてみる。

インストールと言ってもかんたんでブラウザの拡張機能やアドオンのストアに行き、いくつかのボタンをクリックする形です。

Google Chromeの場合

scre.ioのGoogle Chrome拡張機能(オフライン版)

屏幕录像机 – Screen Recorder
从摄像机录制视频或从屏幕(桌面,特定应用程序窗口或浏览器选项卡)捕获视频

上記の Chromeウェブストアのscre.ioページに行き右上の【Chrome に追加】をクリックします。

画面のコンテンツをキャプチャする権限を与えるかの確認がでるので【拡張機能を追加】をクリック

すぐにポップアップ通知が表示されてインストールが完了します。

Microsoft Edgeの場合

scre.ioのMicrosoft Edgeアドオン(オフライン版)

Microsoft Edge Addons
Make Microsoft Edge your own with extensions that help you personalize the browser and be more productive.

Microsoft EdgeもGoogle Chromeの拡張機能と同じようにかんたんにインストールすることができます。

画面の内容をキャプチャする権限を求められるので【拡張機能の追加】をクリックします。

Microsoft Edgeも同様にすぐポップアップ通知が表示されてインストールが完了します。

インストールをしない場合

scre.ioのオンライン版

App – Scre.io
Record videos from the camera or capture from the screen. Free screen and camera recorder. Capture unlimited videos.

インストールをしない場合は上記のリンクから飛ぶことでインターネットがつながる状態であれば使用することができます。

scre.ioを使ってみる。

scre.ioをインストールできたので早速scre.ioの録画機能を使っていきたいと思います。

拡張機能のアイコンからクリックして起動します。

アイコンではなくタブで開く場合は下記のURLから開くことができます。

Google ChromeのURL

chrome-extension://hniebljpgcogalllopnjokppmgbhaden/index.html#/

Microsoft EdgeのURL

chrome-extension://dpidllmdbfmclpenbdfjkbbipkbbadbg/index.html#/

scre.ioを開くと何の画面を録画するのか、と音も録画するか、などを質問されるので用途に合わせて選択します。

録画したいモニターやウィンドウ、タブなど任意の画面を選択し共有をクリックします。

共有をクリックするとすぐに録画が開始されます。

録画を止めたいと思ったタイミングで【□ Stop】をクリックします。

ちなみに【⏸Pause】をクリックすると録画を一時停止させて、再開したいタイミングで再開することができます。

録画を停止すると、ファイルが生成されるので保存するか、保存せずに新しい動画を撮るか選択できます。セーブするとファイルがダウンロードされます。

今回テストで録画した内容をYoutubeの限定公開URLで公開しましたのでどんな感じで録画されるかをご覧いただけますと幸いです。

mplayerコマンドで録画した動画ファイルの中身を確認してみた。

encoderがChromeになってるの初めて見たかもしれん、フレームレートは29.833fpsですが30fpsと言える基準ですね。

その他は標準的な内容でした。

MPlayer SVN-r38322 (C) 2000-2021 MPlayer Team
226 audio & 469 video codecs
do_connect: could not connect to socket
connect: No such file or directory
Failed to open LIRC support. You will not be able to use your remote control.

Playing /home/naoko/ダウンロード/screen-capture (3).webm.
libavformat version 58.76.100 (external)
libavformat file format detected.
ID_VIDEO_ID=0
[lavf] stream 0: video (h264), -vid 0
VIDEO:  [H264]  1920x1080  0bpp  29.833 fps    0.0 kbps ( 0.0 kbyte/s)
==========================================================================
Opening video decoder: [ffmpeg] FFmpeg's libavcodec codec family
libavcodec version 58.134.100 (external)
Selected video codec: [ffh264] vfm: ffmpeg (FFmpeg H.264)
==========================================================================
ID_VIDEO_CODEC=ffh264
Clip info:
 encoder: Chrome
ID_CLIP_INFO_NAME0=encoder
ID_CLIP_INFO_VALUE0=Chrome
ID_CLIP_INFO_N=1
Load subtitles in /home/naoko/ダウンロード/
ID_FILENAME=/home/naoko/ダウンロード/screen-capture (3).webm
ID_DEMUXER=lavfpref
ID_VIDEO_FORMAT=H264
ID_VIDEO_BITRATE=0
ID_VIDEO_WIDTH=1920
ID_VIDEO_HEIGHT=1080
ID_VIDEO_FPS=29.833
ID_VIDEO_ASPECT=0.0000
ID_START_TIME=0.00
ID_LENGTH=0.00
ID_SEEKABLE=1
ID_CHAPTERS=0
Audio: no sound
Starting playback...


Exiting... (End of file)
ID_EXIT=EOF

scre.ioのメリット、デメリット

かんたんにメリットやデメリットをまとめてみました。

2021/11/07時点の話なので今後改善されるかもしれません。

メリット

  • 録画のためにソフトを別途起動する必要がない
  • ブラウザ単体で動作する。
  • そこそこの画質で録画できる。
  • 比較的軽い。
  • スピーカー+マイクが使える。
  • Linuxでも使える。

デメリット

  • 動画ファイルの拡張子がwebmしか対応してない。
  • 音は微妙
  • 主要ブラウザじゃないブラウザで使えない。
  • 動きが多いと画質が荒くなることがある。

最後に

なかなか便利な録画ソフトscre.ioの紹介でした。

ほんとに驚いたのがブラウザで画面録画ができる点です。

録画した映像はすごくきれいというわけではないですが議事録やメモ程度の内容であれば十分の性能を発揮してくれます。

それではまた次のブログでお会いしましょう。

The post 【Scre.io】OBSを使わずにGoogle Chromeで画面録画する方法 first appeared on FascodeNetwork Blog.