WebRTC + WebXR Remote Desktop

Kosuke Kawahira

Last update: Dec 27, 2022

Related tags

Video/Audio webrtc-rdp

Overview

WebRTC + WebXR RDP

WebRTCとWebXRを使ったブラウザ上で動くリモートデスクトップです．WebXRではない通常表示も可能です．

最近の Chrome や Edge で動くはずです．VRモードは Oculus Quest 2 の Oculus Browser で動作確認しています．

Demo URL: https://binzume.github.io/webrtc-rdp/

Usage

https://binzume.github.io/webrtc-rdp/ にアクセスします
接続したいブラウザ間でペアリングします．片方のブラウザでPINを生成し，もう一方のブラウザでそのPINを入力してください
デスクトップを配信(Cast My Desktop) するかリモートデスクトップに接続 (Connect to Remote Desktop) するか選択してください
配信する場合はデスクトップのキャプチャを許可してください．キャスト画面でストリームを追加・削除できます
接続後に WebXR リンクから VR モードに入れます (Oculus Quest用)

最低限の動作確認のためのデモなので，本格利用する場合は色々いじってください．

Mouse/Keyboard

ブラウザ上からは，マウスやキーボードの制御はできないので，ワイヤレスキーボード・マウス等の手段を用意してください．

どうしてもブラウザ経由でマウスを動かしたい場合は，ホスト側のPCで https://github.com/binzume/inputproxy を起動してください．以下のような構成です．(キーボードは気が向けば対応します)

クライアントブラウザ → (WebRTC DataChannel) → ホストブラウザ → (WebSocket) → inputproxy → マウス/キーボード

WebRTC

WebRTC Signaling ServerはOpenAyame/ayameを使います
デモの実装ではAyame Laboに接続します．本格利用する場合は自分でAyameを動かしたほうが良いです

VR

https://binzume.github.io/vr-workspace/#app:app-webrtc-rdp から．
単体でも動きますが，binzume/vr-workspaceからアプリとして読み込む前提の作りになっています
A-Frameを使っています．

Security

P2Pなので，同じネットワーク内で使う場合は共有している映像や音声などはインターネットを経由しません．
デモの実装ではAyame Laboを使って接続します．セキュアな接続が必要な場合は自分の環境でAyameを起動して使ってください．
接続にAyame Laboを使っている場合，何らかの理由でRoomIdが漏れると他者が接続できる可能性があるので，接続を待機した状態で放置しないでください．
RoomIdはPINの交換時にランダムな文字列から生成して共有します．

TODO

ウインドウ単位のキャプチャでもマウス操作をサポートする
WebXR時にレンダリング面積に合わせて元のvideo解像度を変える
UIをまともにする
ファイル共有機能

License

MIT

Minimal setup for a WebXR project using Vite, Babylon.js, TypeScript, and Vue

WebXR-Vite-Babylon-Simple Minimal setup for WebXR development using: vite typescript vue 3 babylonjs 5 (ES6) Intentionally made minimal changes from t

Nov 13, 2022

Mixed Reality Capture module for WebXR and Three.js

Reality Mixer JS This is a small Mixed Reality Capture module for WebXR + Three.js. You can use this module to allow users to record your WebXR experi

Dec 28, 2022

Desktop App for mdSilo: Tiny Knowledge silo on your desktop.

mdSilo A mind silo for storing ideas, thought, knowledge with a powerful writing tool. built with React and Tauri. Demo Discord This is desktop app, a

Dec 27, 2022

This provides an extension integration with Docker Desktop to run k9s quickly and easily through the Docker Desktop interface.

k9s extension for Docker Desktop This provides an extension integration with Docker Desktop to allow k9s quickly and easily through the Docker Desktop

Dec 16, 2022

100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API)

beez 100% web real-time audio experiment using smartphones as effect controller. (tech: Android Chrome + WebRTC + Web Audio API) The concept An Hive i

Dec 16, 2022

Home Assistant custom component for viewing IP cameras RTSP stream in real time using WebRTC technology

Jan 4, 2023

Mad science p2p pipe across the web using webrtc that uses your Github private/public key for authentication and a signalhub for discovery

webcat Mad science p2p pipe across the web using webrtc that uses your Github private/public key for authentication and a signalhub for discovery We a

Dec 30, 2022

A Develop Tool to Test WebSocket, Socket.IO, Stomp, Bayeux, HTTP, TCP, UDP, WebRTC, DNS API.

Sep 6, 2022

Webrtc, & web socket based streaming live video streaming and chatting platform. Written in Node, Typescript, and Javascript!

Live Streaming!! Welcome to my implementation of live streaming along with real time chat. I'm going to make a live streaming platform that will supoo

Nov 23, 2022

XPeer is a WebRTC based package for building Muti-Peer-to-Peer Frontend Application.

Jun 22, 2022

SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

WordPress-Plugin-SrsPlayer SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc. Usage First, you should get your own video stream

Jul 27, 2022

High-quality WebRTC SDK

腾讯云实时音视频 TRTC SDK 产品介绍腾讯实时音视频（Tencent Real-Time Communication，TRTC），将腾讯多年来在网络与音视频技术上的深度积累，以多人音视频通话和低延时互动直播两大场景化方案，通过腾讯云服务向开发者开放，致力于帮助开发者快速搭建低成本、低延时、高

Dec 18, 2022

Learning WebRTC. Topic for FFTT.

ProgrammingWebrtc This project was generated using Nx. 🔎 Smart, Fast and Extensible Build System Adding capabilities to your workspace Nx supports ma

Mar 5, 2022

SRS Player is a video streaming player, supports HLS/HTTP-FLV/WebRTC etc.

Oct 15, 2022

WebRTC based peer to peer video calling and messaging web app build with MERN stack.

talkhouse WebRTC based peer to peer video calling and messaging web app build with MERN stack. Demo Libraries used React for frontend Socket.io as sig

Nov 26, 2022

I built a full-stack project using Node, Express, Mongo, webRTC, socket.io, and of course React JS. This project is inspired by the awesome Clubhouse 😊

codershouse-mern - This Project is Under Development. Below are some of the implemented interface and the remaining features will be updated in future

Nov 18, 2022

Releases(v0.0.3)

v0.0.3(May 21, 2022)
デスクトップやウインドウを簡単に共有できます．タスクトレイに常駐します．操作方法はWeb版とほぼ同じなので README.md を読んで下さい．

v0.0.3

ファイル共有機能など色々追加

まだAlpha版です

署名されていないのでインストール時に警告が表示されます．心配な方はご自身でビルドしてください

Windows(64bit)版以外のバイナリは用意していないのでお手数ですが自分でビルドしてください

Source code(tar.gz)
Source code(zip)
WebRTC.Remote.Desktop.Setup.0.0.3.exe(60.29 MB)
v0.0.2(May 5, 2022)
デスクトップやウインドウを簡単に共有できます．タスクトレイに常駐します．操作方法はWeb版とほぼ同じなので README.md を読んで下さい．

まだAlpha版です

Windows(64bit)版のインストーラーをダウンロードできます

署名されていないのでインストール時に警告が表示されます．心配な方はご自身でビルドしてください

Windows以外の環境のバイナリは用意していないのでお手数ですが自分でビルドしてください

Source code(tar.gz)
Source code(zip)
WebRTC.Remote.Desktop.Setup.0.0.2-win64.exe(63.70 MB)
v0.0.1(Apr 30, 2022)
デスクトップやウインドウを簡単に共有できます．タスクトレイに常駐します．操作方法はWeb版とほぼ同じなので README.md を読んで下さい．

まだAlpha版です

Windows(64bit)版のインストーラーをダウンロードできます

署名されていないのでインストール時に警告が表示されますが，心配な方は自分でビルドしてください

他の環境のバイナリは用意していないのでお手数ですが自分でビルドしてください

Source code(tar.gz)
Source code(zip)
WebRTC.Remote.Desktop.Setup.0.0.1-win64.exe(63.70 MB)