Stream My PC, Social Streaming and Educational platform
Tags: twiliohackathon, twilio, node, javascript
Published: 2020-04-23 09:05:05

## What I Built
Stream My PC is a web application that streams content from a host user machine to one or more remote users over the internet. it can serve as a social interaction tool as well as an educational platform.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/eul1kcgm6qbffpt0ms6z.png)
<figcaption>App Logo</figcaption>


## App Features
The host PC can stream different type of content. A unique URL is created for each host which can be sent to remote users to join the stream. once connected, users can also send real-time messages via the live chat feature. The core app features include.

### Local Video File
The host user can select any video they want to stream from their local directory.

![playing local video on the internet](https://dev-to-uploads.s3.amazonaws.com/i/lp12jnulg7cg5dfur6hu.png)
<figcaption>Streaming Local video.</figcaption>

### Whiteboard
The host user is provided with a canvas, where diagrams can be created and streamed in real-time to remote users. The host user's voice is also captured. This feature can serve as an online classroom.

![whiteboard](https://dev-to-uploads.s3.amazonaws.com/i/u9sf1bbv5qclozhrrhde.gif)
<figcaption>streaming the whiteboard.</figcaption>

### WebCam
The webcam and mic can be streamed to remote users.

![web cam capture](https://dev-to-uploads.s3.amazonaws.com/i/twf0y00dtt56oehe1dww.png)
<figcaption>capturing webcam</figcaption>

### Screen Capture
The host user can also capture their screen and stream it over the internet.

![screen capture](https://dev-to-uploads.s3.amazonaws.com/i/u2x9v15o054s4hm05h8z.gif)
<figcaption>streaming the screen capture</figcaption>

### Live Chat
During a stream, Connected users can engage in conversations using the live chat feature.

![live chat](https://dev-to-uploads.s3.amazonaws.com/i/u34gqlmdcnpxtzagr3pr.png)
<figcaption>messages from live chat</figcaption>

#### Category Submission
COVID-19 Communications.

## How I Built it
The Frontend is built with HTML, CSS and vanilla JS. I'm Using [Boostrap](https://getbootstrap.com/docs/4.4/getting-started/introduction/) for my layout along with some custom CSS.
I’m using [browserify](http://browserify.org/) to bundle my frontend JS.
The Backend is a NodeJS server using Express.
Twilio-video API is been used to stream the video and audio data to connected participants. The Twilio docs is a helpful start if you want to make a similar application.
Uuid is the npm package I'm using to create the unique links for a host pc.
Each feature provided a different set of challenges on how to get their stream data. Using the [MDN docs](https://developer.mozilla.org/en-US/). I was able to get the syntax to capture stream data from a video element and canvas.
To capture the user's webcam and mic, I used [MediaDevices Web API](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia), this allows for access to the user’s camera and microphone provided the user granted the permission.
The screen capture feature, I used the [Screen Capture API.](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture)  it allows for getting the user’s screen as a stream. All streams either from canvas, video, camera or screen capture can be displayed on the video using the `srcObject` property. 
I’m using sketchpad for the canvas element.
The webcam and screen capture feature requires the user’s permission before getting the stream. 

## Screenshots
### Desktop
![whiteboard](https://dev-to-uploads.s3.amazonaws.com/i/rfy7f3mm9cbsa82dg55y.png)
### Mobile
![mobile view 1](https://dev-to-uploads.s3.amazonaws.com/i/odgquvl1xjuroiys57f5.png)
![mobile view 2](https://dev-to-uploads.s3.amazonaws.com/i/begmkklwdctne50w67kl.png)
![mobile view 3](https://dev-to-uploads.s3.amazonaws.com/i/kaia72bl0diui8svju1v.png)

## Link To Code 
Link here https://github.com/Godwin9911/stream-my-pc
If you like the repo, please do well to leave a star.

## Additional Learning Resources/Info
[Using the Screen Capture API - Web APIs](https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture)
[Screen Capture - Twilio](https://www.twilio.com/docs/video/javascript-v1-screen-capture-chrome)
[Getting Started - Twilio](https://www.twilio.com/docs/video/javascript-v2-getting-started#set-up-local-media)
[WebRTC samples](https://webrtc.github.io/samples/)
[Sketch Pad](http://sketchpad.pro/)


Feel free to contact me for more info.