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.
Declares that this document is written in HTML5.
Marks the beginning of the HTML document.
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.
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.
Marks the end of the head section.
Begins the body section, which contains the visual and audio elements seen and heard by the user.
<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.
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.
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.
End of the div that contains the three links.
End of the "container" div.
<video id="remoteVideo" autoplay="autoplay"></video>
<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.
Closes the body section.
Marks the end of the html document.