- Download OBS
- Run obs with the
--use-fake-ui-for-media-stream
option (Reference 1, Reference 2)- on Windows,
- Move to the directory where OBS is installed, e.g.
cd "C:\Program Files\obs-studio\bin\64bit\"
- Run OBS with the specified option, i.e.
.\obs64.exe --use-fake-ui-for-media-stream
- Move to the directory where OBS is installed, e.g.
- on Mac,
/Applications/OBS.app/Contents/MacOS/OBS --use-fake-ui-for-media-stream
- on Windows,
Tools
>Auto-Configuration Wizard
>I will only be using the virtual camera
- Copy the link to connect to the Display
- Click
+
underSources
>Browser
>Create New
- Paste the URL & Enter 1280 as Width and 720 as Height, then press OK
- (OPTIONAL) tick
Use custom frame rate
and setFPS
to 60 for smoother animation - NOTE: you might need to login to access your display on OBS
- NOTE: if you want to change to another account, you also need to log out from your current account on OBS since OBS has its own browser
- Create a new Browser source
- Go to
/user
- Click
Log Out
- (OPTIONAL) tick
- In
Sources
tab, right click on the Browser Source that you have just created & SelectTransform
>Stretch to screen
- In
Controls
tab, clickStart Virtual Camera
- In your streaming software, e.g. Zoom, select 'OBS Virtual Camera'
- Create a new project on Firebase console
Authentication
>Sign-in method
> EnableEmail/Password
. (OPTIONAL) For production environment, removelocalhost
from Authorised domains- Go to
Project Overview
> Add a web app > Register your app - Create
.env.local
and copyfirebaseConfig
to the file as follows
REACT_APP_FIREBASE_API_KEY=...
REACT_APP_AUTH_DOMAIN=...
REACT_APP_PROJECT_ID=...
REACT_APP_STORAGE_BUCKET=...
REACT_APP_MESSAGING_SENDER_ID=...
REACT_APP_APP_ID=...
npm install firebase
- Create
firebase.js
insrc/
to setup firebase
Firestore Database
>Create database
>Start in test mode
> SelectCloud Firestore location
>Enable
Firestore Database
>Rules
& edit the rules as follows
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
function authed() {
return request.auth != null
}
function matchesUser(data) {
return request.auth.uid == data.userId
}
function notUpdating(field) {
return !(field in request.resource.data) || resource.data[field] == request.resource.data[field]
}
// only allow read if user is logged in/authenticated and the data is owned by the authenticated user
allow read: if authed() && matchesUser(resource.data)
// only allow write if user is logged in/authenticated and the created data is owned by the authenticated user
// prevent user from creating a new data on other users account
allow create: if authed() && matchesUser(request.resource.data)
// only allow delete if user is logged in/authenticated and the data is owned by the authenticated user
allow delete: if authed() && matchesUser(resource.data)
// don't allow update on userId of a resource, otherwise, user can take other users resource by changing the userId of that resource
allow update: if authed() && matchesUser(resource.data) && notUpdating("userId")
}
}
}
Firestore Storage
>Rules
& edit the rules as follow
rules_version = '2';
service firebase.storage {
match /b/{bucket}/o {
// Only the owner can upload and read the file
match /files/{userId}/{fileName} {
allow read, write: if request.auth.uid == userId;
}
}
}
- Open the GCP console
- Start a cloud terminal session by clicking the
>_
icon button (Activate Cloud Shell
) in the top right corner of the navigation bar. - Click on the
Open editor
button File
>New File
& name the new filecors.json
- Write the following configuration on the file
[
{
"origin": ["*"],
"method": ["GET"],
"maxAgeSeconds": 3600
}
]
- Click
Open terminal
and rungsutil cors set cors.json gs://hansroslinger-development.appspot.com
- http://vialab.science.uoit.ca/portfolio/dimpvis
- https://codepen.io/klattman/pen/BOJWyX
- http://bl.ocks.org/arthurwelle/01506d8136f6898b2123cd897b8ba59e
- https://stackoverflow.com/questions/60476155/is-it-safe-to-use-ref-current-as-useeffects-dependency-when-ref-points-to-a-dom
- https://medium.com/welldone-software/usecallback-might-be-what-you-meant-by-useref-useeffect-773bc0278ae
- https://swizec.com/blog/the-two-ways-to-build-a-zoomable-dataviz-component-with-d3zoom-and-react/