![Google developers logo](images/google_developers_logo.png)
53% of adults media multi-task while watching TV
Video will be 80 to 90 percent of global internet consumer traffic by 2017
...
var constraints = {video: true}; function successCallback(stream) { var video = document.querySelector("video"); video.src = window.URL.createObjectURL(stream); } function errorCallback(error) { console.log("navigator.getUserMedia error: ", error); } navigator.getUserMedia(constraints, successCallback, errorCallback);
Be sure to enable screen capture support in getUserMedia!
var constraints = { video: { mandatory: { chromeMediaSource: 'screen' } } }; navigator.webkitGetUserMedia(constraints, gotStream);
getFrame()
creates an ImageData
object available in onframegrab
takePhoto()
creates a Blob available in onphoto
<audio src='chrome.mp3' />
// Success callback when requesting audio input stream function gotStream(stream) { var audioContext = new webkitAudioContext(); // Create an AudioNode from the stream var mediaStreamSource = audioContext.createMediaStreamSource(stream); // Connect it to the destination or any other node for processing! mediaStreamSource.connect(audioContext.destination); } navigator.webkitGetUserMedia( {audio:true}, gotStream);
Microphone ☞ processing ☞ stream!
navigator.getUserMedia('audio', gotAudio); function gotAudio(stream) { var microphone = context.createMediaStreamSource(stream); var filter = context.createBiquadFilter(); var peer = context.createMediaStreamDestination(); microphone.connect(filter); filter.connect(peer); peerConnection.addStream(peer.stream); }
<video poster="images/poster.jpg" autoplay preload="metadata"> <source src="chrome.webm" type="video/webm" /> <source src="chrome.mp4" type="video/mp4" /> <track src="track.vtt" /> <p>Video element not supported.</p> </video>