From 77ac84814d4c07ff7ff8810eca99e18f89fc5210 Mon Sep 17 00:00:00 2001 From: "vikasmarwaha@webrtc.org" Date: Thu, 25 Apr 2013 23:22:03 +0000 Subject: [PATCH] Added new demo states.html & updated existing demos to work on firefox. Review URL: https://webrtc-codereview.appspot.com/1327007 git-svn-id: http://webrtc.googlecode.com/svn/trunk@3905 4adac7df-926f-26a2-2b94-8c16560cd09d --- samples/js/base/adapter.js | 10 +- samples/js/demos/html/dtmf1.html | 3 +- samples/js/demos/html/multiple.html | 6 +- samples/js/demos/html/pc1-audio.html | 3 +- samples/js/demos/html/pc1.html | 3 +- samples/js/demos/html/pranswer.html | 3 +- samples/js/demos/html/states.html | 231 +++++++++++++++++++++++++++ samples/js/demos/index.html | 192 +++++++++++----------- 8 files changed, 353 insertions(+), 98 deletions(-) create mode 100644 samples/js/demos/html/states.html diff --git a/samples/js/base/adapter.js b/samples/js/base/adapter.js index a7eba0bfc9..77d92b1ad3 100644 --- a/samples/js/base/adapter.js +++ b/samples/js/base/adapter.js @@ -65,7 +65,15 @@ if (navigator.mozGetUserMedia) { // Attach a media stream to an element. attachMediaStream = function(element, stream) { - element.src = webkitURL.createObjectURL(stream); + if (typeof element.srcObject !== 'undefined') { + element.srcObject = stream; + } else if (typeof element.mozSrcObject !== 'undefined') { + element.mozSrcObject = stream; + } else if (typeof element.src !== 'undefined') { + element.src = URL.createObjectURL(stream); + } else { + console.log('Error attaching stream to element.'); + } }; reattachMediaStream = function(to, from) { diff --git a/samples/js/demos/html/dtmf1.html b/samples/js/demos/html/dtmf1.html index 3233cab6f4..12a7bbb1a2 100644 --- a/samples/js/demos/html/dtmf1.html +++ b/samples/js/demos/html/dtmf1.html @@ -122,7 +122,8 @@ function hangup() { } function gotRemoteStream(e){ - audio2.src = webkitURL.createObjectURL(e.stream); + // Call the polyfill wrapper to attach the media stream to this element. + attachMediaStream(audio2, e.stream); trace("Received remote stream"); enableDtmfSender(); } diff --git a/samples/js/demos/html/multiple.html b/samples/js/demos/html/multiple.html index 35db2ed97f..83d3817465 100644 --- a/samples/js/demos/html/multiple.html +++ b/samples/js/demos/html/multiple.html @@ -141,12 +141,14 @@ function hangup() { } function gotRemoteStream1(e) { - vid2.src = webkitURL.createObjectURL(e.stream); + // Call the polyfill wrapper to attach the media stream to this element. + attachMediaStream(vid2, e.stream); trace("PC1: Received remote stream"); } function gotRemoteStream2(e) { - vid3.src = webkitURL.createObjectURL(e.stream); + // Call the polyfill wrapper to attach the media stream to this element. + attachMediaStream(vid3, e.stream); trace("PC2: Received remote stream"); } diff --git a/samples/js/demos/html/pc1-audio.html b/samples/js/demos/html/pc1-audio.html index febf9d6616..0c51c6f00d 100644 --- a/samples/js/demos/html/pc1-audio.html +++ b/samples/js/demos/html/pc1-audio.html @@ -88,7 +88,8 @@ function hangup() { } function gotRemoteStream(e){ - audio2.src = webkitURL.createObjectURL(e.stream); + // Call the polyfill wrapper to attach the media stream to this element. + attachMediaStream(audio2, e.stream); trace("Received remote stream"); } diff --git a/samples/js/demos/html/pc1.html b/samples/js/demos/html/pc1.html index 416a1c680c..d1951dffa1 100644 --- a/samples/js/demos/html/pc1.html +++ b/samples/js/demos/html/pc1.html @@ -112,7 +112,8 @@ function hangup() { } function gotRemoteStream(e){ - vid2.src = webkitURL.createObjectURL(e.stream); + // Call the polyfill wrapper to attach the media stream to this element. + attachMediaStream(vid2, e.stream); trace("Received remote stream"); } diff --git a/samples/js/demos/html/pranswer.html b/samples/js/demos/html/pranswer.html index d4425d619b..ed389da72f 100644 --- a/samples/js/demos/html/pranswer.html +++ b/samples/js/demos/html/pranswer.html @@ -115,7 +115,8 @@ function stop() { } function gotRemoteStream(e) { - vid2.src = webkitURL.createObjectURL(e.stream); + // Call the polyfill wrapper to attach the media stream to this element. + attachMediaStream(vid2, e.stream); trace("Received remote stream"); } diff --git a/samples/js/demos/html/states.html b/samples/js/demos/html/states.html new file mode 100644 index 0000000000..f905c0d54e --- /dev/null +++ b/samples/js/demos/html/states.html @@ -0,0 +1,231 @@ + + + +RTCPeerState & RTCIceConnectionState Demo 1 + + + + + + + +
+ + + +
+
+
+ + +
+ + +
+ + +
+ + +
+ + + + diff --git a/samples/js/demos/index.html b/samples/js/demos/index.html index 5651ba7286..9e9850a9ee 100644 --- a/samples/js/demos/index.html +++ b/samples/js/demos/index.html @@ -1,94 +1,104 @@ - - WebRTC Samples - - -

- WebRTC Samples

-

- Here are some sample pages that demonstrate basic WebRTC concepts. If you are new to WebRTC, you may want to check out this WebRTC overview first.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- getUserMedia Samples
- gum1.html - Shows how to access the webcam and display the local video in a <video/> element.
- gum2.html - Shows how to capture the current frame of video to a <canvas/>.
- gum3.html - Shows how to apply CSS filters to a <video/> and <canvas/>
- face.html - Shows how to perform face tracking using webcam video.
   
- PeerConnection Samples
- pc1.html - Shows how to set up a simple 1:1 audio/video call.
- pc1-audio.html - Shows how to set up a simple 1:1 audio only call.
- multiple.html - Shows how to set up multiple PeerConnections.
- constraints-and-stats.html - Shows how to pass constraints into the PeerConnection API, and query it for statistics.
- dtmf1.html - Shows how to send DTMF tones using PeerConnection API.
- dc1.html - Shows how to send Data using PeerConnection API.
- local-audio-rendering.html - Shows usage of a local media stream connected to an HTML5 audio tag.
-

-  

+ +WebRTC Samples + + +

WebRTC Samples

+

+Here are some sample pages that demonstrate basic +WebRTC concepts. If you are new to WebRTC, +you may want to check out this + +WebRTC overview first. +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ getUserMedia Samples
+ gum1.html + Shows how to access the webcam and display the local video in a <video/> element.
+ gum2.html + Shows how to capture the current frame of video to a <canvas/>.
+ gum3.html + Shows how to apply CSS filters to a <video/> and <canvas/>
+ face.html + Shows how to perform face tracking using webcam video.
   
+ PeerConnection Samples
+ pc1.html + Shows how to set up a simple 1:1 audio/video call.
+ states.html + Shows RTCPeerStates and RTCIceConnectionStates in a simple 1:1 audio/video call.
+ pc1-audio.html + Shows how to set up a simple 1:1 audio only call.
+ multiple.html + Shows how to set up multiple PeerConnections.
+ constraints-and-stats.html + Shows how to pass constraints into the PeerConnection API, and query it for statistics.
+ dtmf1.html + Shows how to send DTMF tones using PeerConnection API.
+ dc1.html + Shows how to send Data using PeerConnection API.
+ local-audio-rendering.html + Shows usage of a local media stream connected to an HTML5 audio tag.
+

 

+