MICROCONTROLLERELECTRONICS.COM WebRTC Video/Audio Sharing 	

This Web application uses the WebRTC API to allow two users to securely communicate via audio/video over a peer to peer connection in real time. Peer to peer features include audio, video and/or screen sharing, screen capture, video capture/replay/download, chat messages, file transfer and playing a local video to stream it to the remote peer.

The link to access this service is:  https://yourdomain.com:8080/webrtcvideo   Here is what the initial page  looks like (Note: the black area will be the video output from the local peer camera):

When this link is first accessed, the user will be asked to allow the page to access the default microphone and camera. If there are multiple video or audio devices, it is best to set up the default camera and microphone before accessing this link, however, these devices can be changed in the Web page.  To make sure that this service will work best, make sure to only use recent versions of the Firefox or Chrome Web browser. All of the function mentioned in this document have been tested and work on the latest Firefox.

Using that link without specifying peer names will connect the first two users to access it. To set up  a more exclusive private session, add the peers parameter.  For example, one peer (earl) will use the link: https://yourdomain.com:8080/webrtcvideo?peers=earl&denny and the other peer (denny) will use the link: https://yourdomain.com:8080/webrtcvideo?peers=denny&earl

The first peer name (after the peers=) is the local peer. The peer name after the & is the remote peer.
Notice that the peer names must be reversed for each peer. The peers names can be established by the peers beforehand and communicated to each other so they each know the correct link to use. 

Another more simple option for a private peer to peer session is to use the room= parameter.  Using a unique room name, the same link can be used by both peers for a private peer to peer session.

For example:  https://yourdomain.com:8080/webrtcvideo?room=supersecretsession

The room name after the room= can be any character sequence valid for a URL. 

The next section describes the Web page interface and its functionality.

		MICROCONTROLLERELECTRONICS.COM WebRTC Video/Audio Sharing

This is what the Web page looks like when two peers are connected and ‘Show Functions’ button is clicked: 	
 		MICROCONTROLLERELECTRONICS.COM WebRTC Video/Audio Sharing

There are two video screens at the top of the page. The one on the left is the local peer video stream. The one on the right is the remote peer video stream. (Both are blank/black in this sample graphic.) Until a remote peer connects, only the left video will show up.

Below the video screen images are text messages listing the video image dimensions. The area under the remote video also shows the IP address and bit rate of the remote connection.

Right clicking on either the local or remote video screen shows the available video ‘controls’.

Below the video screens are drop downs to select the audio input, audio output and video source. The drop downs are only available if there are multiple devices for each media type. When switching a media type (video, audio or screen) the connection will drop and re-establish automatically to use the new device.

Below the audio/video media selections, are a set of button selections as follows:

Mic 			Toggle the Microphone Off/On
Video			Toggle the Video Screen Off/On
Snap L			Take a snap shot of the Local Screen (appears on the bottom canvas)
Snap R			Take a snap shot of the Remote Screen (appears on the bottom canvas)	
Clear Snap		Clear the bottom canvas (blanks out a screen shot)
Screen Share		Share a window or screen (instead of video camera)  Create any new window
                                   area before selecting this. When this is selected permission to access it will need
                                   to be given. Screen sharing is useful to do presentations or guide someone
                                   through a problem remotely. To go back to video mode, re-load (refresh)
                                   the Web page.
Help			Display Help messages explaining these buttons
Stats			Toggle view on/off of the connection statistics and graph of packets sent
 			This statistics display area is not shown in the example above.
Bandwidth		This is a drop down to select maximum bandwidth used 

Below the buttons is a rectangular text area displaying any sent chat messages and an input field to type a chat message. Type in a text message and press the  ‘Send’ button to send the message.  It will be sent to the remote peer (which will show up in their chat message area) and also display in the local peer chat text area.  This area auto scrolls. To erase/clear the chat message area, use the Clear button.

Below the chat message area is the the file transfer section. To send a file to the remote peer, select the file via the File to send drop-down and the click the Send button. The Abort button can be used to abort the send if needed. As the file is transferring to the remote peer, the progress will be show in the send progress area. The remote host will show the progress in the receive progress area. Only one of the peers can send at a time. The transfer is peer to peer and buffered on the remote end. Once the transfer is completed, there will be a download link below the receive progress area with the file name.  This WebRTC transfer function is not robust in that only small files can be transferred.

		MICROCONTROLLERELECTRONICS.COM WebRTC Video/Audio Sharing

Below the file transfer section is the Snap Shot Canvas. This will display the snap shot of the local or remote video/screen capture. To save the image, right click anywhere on the canvas image and choose ‘Save Image as’.

Below the Snap Shot Canvas is the Record Video or Shared Screen section. This function allows capturing of the local video or shared screen (and audio)  or remote video (and audio) for playback or downloading for later playback and/or sharing. 

It looks like this:

The video playback area (with controls) will show the recorded video or shared screen once it is recorded and the Play button is clicked.  Otherwise, there will be nothing to play.

Below it there are four buttons:

Local – This is a toggle between Local and Remote. If Local is selected the recording will be the local video or shared screen. If Remote is selected the recording will be the remote video. It won’t toggle if the toggled to video is not available (specifically the Remote).

Start Recording – This will start recording of the local video or shared screen. It will toggle to ‘Stop Recording’  while recording.  Before recording, make sure the correct camera or shared screen and audio are selected. Click the ‘Stop Recording’ when finished recording and the next two buttons (Play and Download) will be functional. If multiple recordings need created, refresh the screen to start a new recording. 

Play –	This will play the recorded video or shared screen recording. (The recording must be stopped for it to play.)

Download – This will download the recorded video or shared screen recording. (The recording must be stopped for it to download.)

 	MICROCONTROLLERELECTRONICS.COM WebRTC Video/Audio Sharing

Below the Record Video or Shared Screen section is the Local Video File Player section which looks like this:

To play a local video, click the Browse button to select a playable media file (webm, mp4, etc.). That video will load into the video area ready to play. It will also replace the top streamed local video which will be streamed  to the remote peer.

Any questions about this WebRTC app, contact Earl via email  earl@microcontrollerelectronics.com