Resource icon

WebRTC-Telestrator 1.0

Go to download
Overview Reviews (1) History Discussion
B

BlankSourceCode

Member
BlankSourceCode submitted a new resource:

WebRTC-Telestrator - Draw on an OBS source from a remote device with a live preview

A remote telestrator app using WebRTC. Use a remote device (such as a phone or tablet) to draw on your screen while recording/streaming via OBS. Rather than just having a blank 'greenscreen' to draw on, this app streams a specified display so that you can see exactly where you are drawing on your device.

Remember the days when sport commentators would draw arrows on the screen to help explain the plays? Well the term for the program that let them do that is called a 'telestrator'. This tool...
Click to expand...

Read more about this resource...
 
chi11estpanda

chi11estpanda

New Member
I've yet to to try this out but just wanted to say thank you for sharing this, it sounds like it will be totally awesome! It's everything I could ever hope for without having to buy a real telestrator for my explainer live streams! Although, I do need to buy a more powerful tablet, but hey, still better than a telestrator or using my drawing tablet that doesn't have a screen on it xD

Thank you!
 
M

Martyats

New Member
This is just what I was looking for! If only I could get it to fully work for me. (Windows 10 22H2, OBS 30.0.0, Firefox 120.0.1)
I can join and markup the hosted image from a second (wired) PC on my network (Yeah!)
I cannot join from a tablet or phone via WiFi (Address Not Found). They are all on the same network and port 8888 is not blocked in the router.

However, my OBS PC has a Wacom drawing tablet on one of the four video outputs on the NVidia Quadro graphics card, which I would like to use. Once Joined using a different browser I can see the toolbar but not the hosted window and I can't draw on it.
Can you not join from the same PC?
Also, What are the two buttons on the left of the toolbar with numbers?
 
B

BlankSourceCode

Member
My guess is that your phone/tablet is not able to connect to your OBS machine because there is some sort of partitioning between your wifi and your wired networks. Can you access anything else from that PC via Wi-Fi (file share/other local server/etc)? Are the phone/tablet on the same subnet as the pc?Perhaps you need to configure your router to use a virtual network. You could make sure that port 8888 is allowed through your OBS machines Windows firewall. Also you could try using the IP address instead of the hostname when connecting from the phone/tablet.

You should be able to connect on the same machine (I'm doing that in the example demo gif - but I also tested with an iPad and my android phone). You could try opening the browser devtools on the client browser and see if there are any errors logged to the console. Though if you are wanting to just use the same machine there are easier solutions that don't require you to use a browser to stream. You could try searching the forum for whiteboard scripts. Most work by allowing you to draw on an obs projected window rather than the browser.

Those number inputs are the offset and inset values for where you can draw on the video background. Some browsers and/or some setups mean that size and position of the video displayed on the browser don't line up with where the browser canvas element renders. These numbers allow you to move it around so that you are able to draw on the correct place. You should see a border appear around the video if you change them, you need to get it to line up correctly to have the drawing match the position on your OBS browser source. The buttons next to those are clear and undo.

Thanks for trying it, sorry it's not working for you. All the moving pieces does make it fairly complicated to setup.
 
maxfaction

maxfaction

New Member
I can't seem to follow the steps that are laid out, especially the 1st step to "run". Can someone please make a walk-through video of how to set this up from step #1 (and any needed pre-requisites)? Thank you.
 
M

mblommer

New Member
This plugin has worked really well for me. I did discover that you need to follow the instructions pretty much in the order it is described to get everything to work. If I just tried refreshing HOST or CLIENT webpages, then it stopped working. i.e., it seems like the code looks for initial connections, but doesn't monitor for subsequent refreshes.

Here's the process that worked for me on Windows 11, OBS 30.2.3 for the HOST, and a Chromebook running Firefox app from the Playstore (Chrome on Chromebook didn't work) for the CLIENT/REMOTE

Preparation
  1. Download the WebRTC-Telestrator app to the OBS machine.
    1. For me, this is a Windows 11 laptop.
  2. In OBS, add a new Browser source and point it to http://localhost:8888/obs.html
  3. Set up a remote client for "joining" the HOST.
    1. For me, this is a Chromebook that runs the Firefox app through the PlayStore installer.
    2. Both my W11 laptop and Chromebook are on my home Eero WiFi network.
Run
  1. Launch/run the WebRTC-Telestrator app on the OBS machine
  2. On your OBS machine, open a new WebRTC-enabled web browser called http://localhost:8888.
    1. For me, this was using Chrome.
    2. In the browser, click "Host" and select the window/display you want to stream.
  3. On your remote device, open a new WebRTC-enabled web browser to http://yourhostmachine:8888
    1. For me, this was the Firefox app on my Chromebook.
    2. I used the actual IP address of the HOST (e.g., 192.168.xxx.yyy) for 'yourhostmachine'. i.e., HTTP://192.168.xxx.yyy:8888
  4. In the browser (on the remote device), click "Join" to begin telestrating.
    1. For me, this was the Firefox app on my Chromebook.
  5. (Added), For me, I went back to the web browser source in OBS and clicked on the "Refresh" button. I then see my Telestractor actions in OBS.

If something happens to cause a need to restart (Telestrator stops working), then I need to kill the node.js app and either restart or refresh everything in the same order as the Run procedure above.
  1. Kill/close the WebRTC-Telestrator app on the OBS machine
  2. Launch/run the WebRTC-Telestrator app on the OBS machine
  3. On the OBS machine, Restart or refresh the WebRTC-enabled web browser to http://localhost:8888
  4. On the Client/Remote machine, Restart or refresh the WebRTC-enabled web browser to http://yourhostmachine:8888
  5. On the OBS machine, in OBS, go to the web browser source in OBS and click on the "Refresh" button. I then see my Telestractor actions in OBS.
 
P

pstrinic

New Member
I seem to have very limited and intermittent success "joining" a session. About 1/2 of the time I'm able to join from the host machine, but I've had 0 success joining from a remote device (ipad, iphone, macbook). Some times I get the toolbar, but never the video. This is with the windows firewall off on the host. Any suggestions?

Thanks!
 
LordRouter

LordRouter

New Member
Very amazing plugin! Well Done! Is there a way you can add arrows, lens, bars and so on in the future releases? Thank You very much for your work!!!
 
L

Lexvd

New Member
Hi, would love to give this a spin. After the NPM install I get several warnings, and when I try NPM run in VS code, it doesn't do anything. am I missing something?
 
N

nulls

New Member
Nulls Brawl is an unofficial private server for the popular mobile game Brawl Stars, offering players a unique and unrestricted gaming experience. Designed for those who want to experiment with all the features of the game without grinding or spending money, this server is a paradise for casual gamers and enthusiasts alike.

Features and Advantages​

Nulls Brawl provides unlimited resources, including infinite gems, coins, and star points. This allows players to instantly unlock all brawlers, gadgets, star powers, and skins. You can test out newly released brawlers as soon as they are available, often before they’re fully integrated into the official game. The server also supports private and bot matches, giving you the flexibility to play solo or with friends without external competition.
Moreover, updates to the server are frequent, ensuring access to the latest maps, game modes, and balance changes. Players can enjoy the thrill of trying new content without the restrictions imposed by the official server.

Downsides and Risks​

Despite its appeal, nulls brawl has some notable drawbacks. Being an unofficial server, it is not endorsed or supported by Supercell, meaning it violates the terms of service. This could lead to bans or penalties if associated accounts are flagged. Additionally, the server may experience bugs, crashes, or lag, and there’s no assurance of data security, which could put your device or personal information at risk.

Final Thoughts​

Nulls Brawl is an exciting option for players looking to explore everything Brawl Stars has to offer without limitations. It’s perfect for casual play, testing strategies, and enjoying exclusive content. However, its unofficial nature and potential risks mean players should proceed with caution and understand the implications of using private servers. For those who prioritize fun over progress in the official game, Nulls Brawl is a fantastic choice.
 
H

HistoricalFencingNetwork

New Member
Ok, I was able to get this working:

Install node.js (https://nodejs.org/en)
Open node.js in terminal mode
Navigate to wherever you have the webrtc-telestrator downloaded and unzipped using the terminal. Inside of the src folder there is a file called server.js. Open then using the command "node /path-to-folder/server.js" in the terminal.
This will open the webrtc-telestrator app and you can follow the steps linked above https://obsproject.com/forum/threads/webrtc-telestrator.170767/post-657719
 
B

backhandpinball

New Member
HistoricalFencingNetwork said:
Ok, I was able to get this working:

Install node.js (https://nodejs.org/en)
Open node.js in terminal mode
Navigate to wherever you have the webrtc-telestrator downloaded and unzipped using the terminal. Inside of the src folder there is a file called server.js. Open then using the command "node /path-to-folder/server.js" in the terminal.
This will open the webrtc-telestrator app and you can follow the steps linked above https://obsproject.com/forum/threads/webrtc-telestrator.170767/post-657719
Click to expand...
Still having trouble getting this to launch via terminal and node.js

I can navigate to the location of server.js and input the command to open server.js- text turns Green but nothing launches.

Any idea what I am doing wrong in the process?

Thanks,
Marc
 
G

GameMasterX47

New Member
I followed all the steps mentioned in the article, but the installation process didn’t complete as expected. It feels like some important steps are missing. While looking for a solution, I came across Nulls Brawl APK, which provides a step-by-step download guide for Android, iOS, and PC. It might help others facing the same issue.
 
You must log in or register to reply here.
Top