WebRTC Demo: HTML

HTML documents are the face of the web and the starting point of a web app. An HTML document comprises a number of HTML elements created using HTML tags. A tag is always enclosed in a less than (<) and more than (>) sign; for example, <html> for the html tag. Most elements have a closing tag, which is like the opening tag, but with a forward slash character (/) prefix. For example, a paragraph element opens with a <p> tag, closes with a </p> tag, with the text for the paragraph sandwiched between, so: <p>This text appears on screen</p>.

There are two main sections in an HTML document:

The following is a listing of the index.htm HTML file for the WebRTC app. Press any line you do not understand to get an explanation. Press again to hide the explanation. If you want to recreate the app for your own implementation, you can download all the necessary files and then upload them to your web host directory.

[toggle comments]

<!DOCTYPE html>

Declares that this document is written in HTML5.

<html>

Marks the beginning of the HTML document.

<head>

Starts the head section, which contains general info about the document.

<title>Demo of the WebRTC feature in HTML5</title>

The title, as shown in search results and at the top of most browsers.

<meta charset="UTF-8">

The meta tags contain metadata (data about data) about the document. The charset is the character set used by the document. Generally you can leave this as UTF-8, which, if you are interested, stands for Universal character set Transformational Format - 8 bit.

<meta name="description" content="Demonstration of the HTML5 Web Real Time Communication API for video conferencing with compatible browsers">

Concise description of what this web page is about.

<meta name="viewport" content="width=device-width, initial-scale=1">

Sets the width of the web page to the width of the device screen on which it's shown.

<link rel="stylesheet" href="webrtc.css">

Links to a Cascading Style Sheet (CSS) which changes how the elements of the page appear on screen.

</head>

Marks the end of the head section.

<body>

Begins the body section, which contains the visual and audio elements seen and heard by the user.

<div id="container">

The div element (short for division) is used to group elements together into a block. We use it here as a container for other elements that we wish to show or hide at various times. By hiding just this element, we hide all of its contents in one go. It is given an id (identifier) that allows us to refer to it in the accompanying css (stylesheet) file and javascript file.

<h1>Develop an app, learn to code</h1>

A level one heading, which is generally the largest, but we can tailor it as we wish in the css file.

<p>By looking at the inner workings of a video chat app, you will learn how to develop web applications in HTML, CSS, JavaScript, PHP and MySQL database.</p>

A paragraph element, which contains a paragraph of text. Like div and h1, it is a block-level element, which by default appear on new lines.

<div>

Another division element, which groups three link elements into one block.

<a title="Test the app on a single computer or device (opens the peer's video in a new tab)" id="test" target="_blank">Test</a>
<a title="Send an email inviting someone in your home/class/workplace to chat" id="email">Invite</a>
<a title="How the app works" href="http://www.silvawood.co.uk/tutorial/" id="learn" target="_blank">Learn</a>

This is a hypertext link or hyperlink, which opens another page when clicked. The text in the title attribute is displayed as a tooltip (next to the link) when the user's mouse pointer hovers over the link. The "_blank" value given to the target attribute causes the new page to be opened in a new tab.

</div>

End of the div that contains the three links.

</div>

End of the "container" div.

<video id="remoteVideo" autoplay="autoplay"></video>

Video element for the remoteVideo stream, captured by the webcam and microphone of the other participant in this video conversation. The id property is set to remoteVideo, so that the element can be referenced by the JavaScript program to put video in it. The autoplay property is set to autoplay so that the video starts playing as soon as the webcam starts recording.

<video id="localVideo" autoplay="autoplay" muted></video>

Video element in which the user's own image and sound is shown and played, as captured by the webcam and microphone. The element has several properties or attributes which are given values here. The presence of the muted property turns off the audio for the local video, to prevent the user's own sound from being played back through their speakers, which could be distracting and result in a positive feedback loop.

<script src="webrtc.js"></script>

Imports and runs the webrtc.js JavaScript program that gets WebRTC working.

</body>

Closes the body section.

</html>

Marks the end of the html document.