Raspberry PiのデスクトップにWebブラウザからアクセス noVNC

このような感じで、PCのWebブラウザからRaspberry Piのデスクトップにアクセスしてみました。

図ではデスクトップの解像度は1280×720ですが、お好みの解像度の設定が可能です。

Webブラウザのみ使用しますので、VNCビューア等のソフトウェアのインストールは不要です。PCでもスマートフォンでも、ブラウザがあれば、いつでもどこでもデスクトップへアクセスできるようです。

設定手順を記録しておこうと思います。


Raspberry PiのnoVNC設定手順

使用するOS

OSはRaspbianを使用しました。初期設定は、宜しければこちらの記事を御覧ください。

VNCサーバ有効化

最初にVNCを有効化して、デスクトップの解像度を指定しておきます。

  1. raspi-configを起動します。
    sudo raspi-config
  2. 5番、Interfacing OptionsのVNC Serverを有効にします。
  3. 次に3番、Boot OptionsのDesktop/CLIを選択、Desktop Autologinを有効にしました。試していませんが、Desktopでも大丈夫なのでしょうか?

ディスプレイを接続しない(ヘッドレスの)場合

Raspberry Piにディスプレイを接続しない場合、config.txtで解像度を指定しておきます。

  1. /boot/config.txtを編集します。
    sudo vi /boot/config.txt
  2. 21行目付近、framebuffer_widthとframebuffer_heightをアンコメントして有効にします。既定値は1280×720ですが、値を変更してお好きな解像度を指定できます。
  3. 再起動して設定を反映します。
    sudo reboot

 noVNC設定

Webブラウザからアクセスできるように、noVNCを使用しました。Raspberry Piの中で、VNCクライアントをWebサーバとして動かす設定になりますが、先程有効にしたVNCサーバ側の設定を変えて、noVNCのクライアントに合わせておく必要がありました。

  1. デスクトップの画面右上、VNCアイコンを右クリック、「Options」を選択します。
  2. Authenticationを「VNC password」に変更します。
  3. VNC認証用のパスワードを新しく聞かれますので入力します。
  4. 左側の「Expert」をクリック、Parameterの中から「ProtocolVersion」を探して、値を「4.1」に変更します。既定値の「5.0」ではnoVNCが動きませんが、「4.1」なら問題無いようです。
  5. 「RemapKeys」の値に「ja-jp」をセットしました。これで日本語キーボードで正しく入力できるかと思います。
  6. noVNCをインストールします。
    sudo apt-get update
    sudo apt-get install -y novnc
  7. /usr/share/novnc/utilsにインストールされた、launch.shを実行します。
    cd /usr/share/novnc/utils
    ./launch.sh

  8. Webブラウザから、表示されたURLにアクセスします。ホスト名が埋め込まれていますが、ネットワークが別のセグメントからアクセスしたい場合、IPアドレスに置き換えます。
    http://<Raspberry PiのIPアドレス>:6080/vnc.html?host=<Raspberry PiのIPアドレス>&port=6080
  9. パスワードを入力して「Connect」ボタンをクリックします。
  10. パスワードを入力して、「Connect」ボタンをクリックします。デスクトップが表示されましたでしょうか?

全角文字の入力も問題無いようです

画面右上のキーボードアイコンをクリックすると、アイコンが「あ」に変わるかと思います。その状態で文字を入力すると、変換候補が表示されるようです。アイコンクリックの代わりに、CTRL+スペースで半角入力←→全角入力の切替が可能のようです。


launch.shの自動起動設定

自動でlaunch.shを起動したい場合、systemdの設定を変更します。

  1. novnc.serviceファイルを作成します。
    sudo vi /etc/systemd/system/novnc.service

    次の内容になります

    [Unit]
    Description=noVNC service
    After=vncserver-x11-serviced.service
    
    [Service]
    ExecStart=/usr/share/novnc/utils/launch.sh
    Restart=always
    Type=simple
    User=pi
    Group=pi
    
    [Install]
    WantedBy=multi-user.target

    ポート番号等を変更したい場合、launch.shにオプションを追加してみて下さい。

  2. systemdに設定変更を反映します。
    sudo systemctl daemon-reload
    sudo systemctl enable novnc.service --now


/boot/config.txtにて解像度を指定しておきましたので、Raspberry Piにディスプレイを接続しなくても、問題なくデスクトップにアクセスできるようです。

お部屋の温度記録用のRaspberry Piは、ディスプレイを接続しておりませんが。

PCのWebブラウザからデスクトップにアクセス、温度を確認することができました。

外出先からVPN接続した場合も、問題なくアクセスできました。

Raspberry Piを持ち歩く場合も、スマートフォンから簡単にデスクトップにアクセスできれば、応用範囲が広がりそうですね。

Raspberry PiをWi-Fi親機にする設定は、宜しければこちらを御覧ください。

スポンサーリンク

フォローする

スポンサーリンク

コメント

  1. jazzwalker より:

    ウェブ接続可能にした場合、通常のVNC接続はどうなりますか? 併用出来るのでしょうか?

    • hide より:

      jazzwalkerさん はじめまして。
      コメント頂きまして、誠にありがとうございます。

      そういえば、併用は試したことはありませんでした。ふむふむ。

      早速、手元のRaspberry Pi Zeroで試してみました。
      ウェブ接続(NoVNCにChromeから接続)と、TCP ポート5900番のVNCクライアント(Windows版のVNC Viewerで接続)を同時にしてみました。

      結果は・・・・
      手元の環境では、同時に接続できています。
      どちらか一方の画面でマウスを動かすと、もう片側で反応して。
      逆もまた問題なく反応しております。

      もしかして、環境により変わるかもしれませんが。
      「まあ、併用できる場合もあるかも」というご参考情報でした。