Rendering Messages via Data Channel

How To Create a Data Transmitting Page

You’ve covered how to transmit data between peers using RTCDataChannel . Now let’s create a data transmitting page that allows you to transmit a plain text by clicking a button.

First, create an index.html HTML file that contains three buttons, start, send, and close with two text areas:

Next, you should import an additional script, adapter-latest.js. The adapter.js is a shim to insulate apps from spec changes and prefix differences. Also, you can add the css file for decorating your components:

Complete a peer connection

You’ve implemented a data transmitting page, and now it’s time to combine the page and and RTCDataChannel . First, add the elements that you’ve added on the index.html file.

Now, let’s go back to your main.js file’s createConnection function and combine the data transmitting and elements:

Lastly, add some elements cleaning codes inside the closeDataChannels() method like the one below:

Running the WebRTC demo application

Now it’s time to run the demo application. If you execute the index.html file, you will see the demo below:

If you click the Connect button, Send and Disconnect buttons will be enabled like the image below:

Type some text messages and if you click the Send button, you’ll be able to see the Receive text area gets the message you just sent like the image below:

This tutorial concludes how to connect peer connections, transmitting messages via the data channel on the same computer and the browser.

Note: You can demonstrate and test the sample application about Transmit Text Data on your web browser without building the project.