Streaming Ogg to a HTML 5 page
From Open Video Alliance
This tutorial shows how to stream using Ogg (Vorbis/Theora) and HTML5. It's divided in 5 parts:
- Introduction: Explains how online video streaming works.
- Encoder: Gives information about how to configure the computer that will encode the video from the camera and send it to the server, and about how to stream.
- Server: Explains how to configure the streaming server application.
- Web page: Explains how to build the HTML code to connect the clients to the streaming server.
- Going deeper: To simplify the understanding, this tutorial just teach one way of doing video streaming. There are many other ways, but the focus here is showing a simple one that works. This session list some places where you can find information to understand better how to make streaming in your own way.
Contents |
[edit] Introduction
Live video streaming is made by sending a video stream through a network (like the Internet).
The first step to do this is capture the images and sound with a camera and a microphone connected to a computer, or with a computer with internal camera and microphone, and encode this signal and then send it to a server. This first step happens in a computer we call encoder.
The second step is to receive this unique stream and retransmit it to every client that try to access the video. This step happens in the server.
The third step is to receive this stream, archive this data in a buffer and then show the video from the buffer. The buffer exists because in some cases the client connection don't have enough bandwidth to show the video in real time or it drops for some seconds, so having video stored locally can make that the viewer don't see gaps in the exhibition of the video. This step is made by a browser that is processing a web page and working as a video player for a video inside this page.
On most of the cases the stream is not archived by the client, being discarded after the exhibition, unless the user actively make the recording of the video by third part sofwares.
[edit] Encoder
Encoder is the computer that gets the video stream from a camera, encodes it and sends it to a server. The way it gets it from the camera and encodes it as Ogg is by using a software called ffmppeg2theora, that uses the Video4Linux2 driver. A second software, oggfwd, send this Ogg stream to a Icecast server.
Now you'll see how to configure the parameters in these two softwares that most impacts when streaming video, and an example command line to stream video.
ffmpeg2theora
The way to install software varies between Linux distributions. In a Debian-like distro, like Ubuntu, you can install with the following line:
$ sudo apt-get install ffmpeg2theora
While writing the ffmpeg2theora command line you need at least to specify some parameters of the input, like: the path to the video device you'll use, the format of this device, the width and height of the video, and where to output the video. Most of mandatory parameters must be set in a specific way in order to your stream works, the only two of then that depends of your choice are the width and height that can be set, for example, as 320 and 240:
$ ffmpeg2theora /dev/video0 -f video4linux2 -x 320 -y 240 -o -
ffmpeg2theora is the command that calls the application we want to run. /dev/video0 is the path to the video device. -f video4linux2 specify that the format of the video we're grabbing is Video4Linux. -x 320 -y 240 specify the width and height of the video frames.
There are other parameters that we can set, like: input framerate, video bitrate, audio bitrate and audio channels. Here is a line with these parameters:
$ ffmpeg2theora /dev/video0 -f video4linux2 -x 320 -y 240 --inputfps 10 --videobitrate 30 --audiobitrate 50 --channels 1 -o -
--inputfps sets the number of frames that will be shown per second. --videobitrate 30 specify the bitrate (in kbps) for video. --audiobitrate 50 specify the bitrate (in kbps) for audio. --channels 1 is the number of audio channels (the default is 2, stereo).
Other parameters can be found in the ffmpeg2theora manual.
oggfwd
You can install with the following line:
$ sudo apt-get install oggfwd
The oggfwd parameters are much simpler than ffmpeg2theora's. The mandatory parameters are: the URL and port of the server you want to send the stream, the mount point where you want to mount the stream, and password of the mount point. Here's one example line:
$ oggfwd server.org 8000 password /mountpoint
oggfwd is the command that calls the application we want ro run. server.org is the URL of the server. 8000 is the port on the server. password is the password to the mount point. /mountpoint is the mount point (observe the slash before the name, it's necessary to specify that the information after it refers to the address of the mount point).
Here you can have more parameters you might want to specify too. The most common is the name, but there are description and others (too see all, read the oggfwd manual).
$ oggfwd giss.tv 8000 0scwy /pixel.ogg -n “pixel” -d “Streaming test.”
-n sets the name of the stream and -d it's description.
Streaming
Below we have an complete example of command line:
$ ffmpeg2theora /dev/video0 -f video4linux2 -x 320 -y 240 --inputfps 10 --videobitrate 30 --audiobitrate 50 --channels 1 -o - | oggfwd giss.tv 8000 0scwy /pixel.ogg -n “pixel” -d “Streaming test.”
The vertical bar between the commands is called pipe, and is used to redirect the output from a software to another one.
This example works and you can test it if you have a camera and microphone now. Just copy and paste the line in a terminal (it's only one line, make sure you paste it in the same way). Then open a video player and open the following URL:
[edit] Server
Server is the computer who gets the streaming from the encoder and sends to everyone that's watching it. The software who handles the streaming is Icecast. It watches from a port waiting to the streaming and, when it's coming, send back to everyone that's looking for that stream (the people who try to connect to a specific address).
You can install Icecast with the following line:
$ sudo apt-get install icecast2
Configuring the Icecast server
After you install, edit the icecast.xml file (start looking for it in /etc/icecast/icecast.xml). It's important to edit at least two lines with passwords.
<source-password> is used by the source client (it's the password that will be put in oggfwd). <admin-password> is used the access admin features of Icecast.
Maybe you want to edit <mount-name> to reasonable name.
[edit] Web page
To insert the stream inside a page, you need it's link (like "http://giss.tv:8000/pixel.ogg") that you'll use in the src parameter of the video tag in the HTML code. Here's an example:
<video autobuffer="autobuffer" src="http://giss.tv:8000/pixel.ogg" controls="controls"></video>
autobuffer="autobuffer says the browser to start downloading and buffering the video imediately, src="http://giss.tv:8000/pixel.ogg" says that the video stream is coming from http://giss.tv:8000/pixel.ogg, controls="controls" says to display the controls.
Everything you put between the opening and closing tags (<video> and </video>) will be shown if the browser doesn't support HTML5, so you can put something like "this resource only works with HTML5 and Ogg capable browsers, we recomend using Firefox 3.5 or newer". To see the actual support to <video> and Ogg in browsers, go to the Playback page.
[edit] Going deeper
It's just a quick step-by-step how-to streaming video, focused in showing that it's simple to stream media (in fact, if you have a server to distribute the stream, like Giss, you just need to use a single command line and to write the video tag).
If you want to know more, you can start reading the following pages:
Linux Reviews > Manual Pages (man) > ffmpeg2theora: http://linuxreviews.org/man/ffmpeg2theora/
Icecast 2 Basic Setup: http://www.icecast.org/docs/icecast-2.2.0/icecast2_basicsetup.html
HTML 5 video Tag: http://www.w3schools.com/html5/tag_video.asp
[edit] Contact
If you have suggestions or found errors on this material you can edit it or contact me ( pixel [at] openvideoalliance.org ), or visit my site and leave a comment ( http://vjpixel.net ).
