Preflight
Google Chrome
At this stage, you will need to use Google Chrome 19+ to see all
of the functionality in this presentation. You will need to go to
chrome://flags and activate the
MediaStream experiments.
Mozilla
You are running a Mozilla browser. While such browsers generally have
excellent support for HTML5 features, this presentation has only
been tested using Google Chrome.
You should still be able to navigate the slides by using left/right
arrow keys, but will currently see display errors and none of the demos
will work.
Other browser
You are running a browser that has not been tested with this
presentation. This presentation has been developed for
Google Chrome.
You may not be able to run some or all of the samples
listed here.
MediaStream API: supported
MediaStream API: not supported
Your browser does not support the MediaStream API.
- Space or ← / → to move around
- Ctrl/Command / – or + to zoom in and out if slides don’t fit
- N to show/hide speaker notes
- H to highlight important elements in code snippets
Implementing Video Conferencing in HTML5 Web browsers
Slide Template by HTML5 WOW
- W3C and WHATWG video standards
- HTML5 Accessibility Task Force
- Google video accessibility contractor
- Mozilla video accessibility contractor
- Video research at CSIRO
- W3C HTML5 spec co-editor (new)
Developer warning!
But with demo for everyone :-)
WebRTC: Video Conferencing on the Web
- Wideband codecs (voice and video)
- Echo cancellation
- Noise reduction/suppression
- Automatic Gain Control
- Network Traversal
- P2P protocols
- Session setup
Take a deep breath and don't worry
- set up video on a Web page
- <video> element
- access local devices: camera, microphone
- display a/v from local or remote peer
- connect to remote peers
Plugin-free video conferencing in the browser!
<video id="sourcevid" autoplay></video> <script> var video = document.getElementById('sourcevid'); navigator.getUserMedia('video', success, error); function success(stream) { video.src = window.URL.createObjectURL(stream); } </script>
- Establish a local stream (DONE)
- Negotiate a connection: WebSockets, SIP, etc.
- Add the remote stream to the local display
<video id="remotevid" autoplay></video>
var remotevid = document.getElementById('remotevid'); peerConn = new webkitPeerConnection("TURN localhost:12345", onSignal); peerConn.onaddstream = onRemoteStreamAdded; peerConn.addstream = localStream; function onSignal(message) { sendSignalling(message); } function onRemoteStreamAdded(event) { remoteVideo.src = window.URL.createObjectURL(event.stream); }
Go out and play!
Silvia Pfeiffer blog.gingertech.net silviapfeiffer1@gmail.com @silviapfeiffer Slides: http://html5videoguide.net/presentations/WebDirCode2012/