From 5db9a3f32a3a66989cbaa55165066b53015b226c Mon Sep 17 00:00:00 2001 From: "juberti@webrtc.org" Date: Thu, 30 Jan 2014 23:38:44 +0000 Subject: [PATCH] Added new create-offer and ice-servers demos to test the exact output of createOffer and .onicecandidate. Updated a few demos to work on Firefox. R=dutton@google.com Review URL: https://webrtc-codereview.appspot.com/1581006 git-svn-id: http://webrtc.googlecode.com/svn/trunk@5464 4adac7df-926f-26a2-2b94-8c16560cd09d --- samples/js/base/adapter.js | 2 + .../js/demos/html/constraints-and-stats.html | 14 +- samples/js/demos/html/create-offer.html | 85 ++++++++++ samples/js/demos/html/face.html | 151 +++++++++--------- samples/js/demos/html/gum1.html | 6 +- samples/js/demos/html/gum2.html | 10 +- samples/js/demos/html/gum3.html | 10 +- samples/js/demos/html/ice-servers.html | 148 +++++++++++++++++ samples/js/demos/index.html | 35 ++-- 9 files changed, 358 insertions(+), 103 deletions(-) create mode 100644 samples/js/demos/html/create-offer.html create mode 100644 samples/js/demos/html/ice-servers.html diff --git a/samples/js/base/adapter.js b/samples/js/base/adapter.js index 9cf875bef1..6d6e039b73 100644 --- a/samples/js/base/adapter.js +++ b/samples/js/base/adapter.js @@ -33,6 +33,7 @@ if (navigator.mozGetUserMedia) { // Get UserMedia (only difference is the prefix). // Code from Adam Barth. getUserMedia = navigator.mozGetUserMedia.bind(navigator); + navigator.getUserMedia = getUserMedia; // Creates iceServer from the url for FF. createIceServer = function(url, username, password) { @@ -118,6 +119,7 @@ if (navigator.mozGetUserMedia) { // Get UserMedia (only difference is the prefix). // Code from Adam Barth. getUserMedia = navigator.webkitGetUserMedia.bind(navigator); + navigator.getUserMedia = getUserMedia; // Attach a media stream to an element. attachMediaStream = function(element, stream) { diff --git a/samples/js/demos/html/constraints-and-stats.html b/samples/js/demos/html/constraints-and-stats.html index 6134a3a3ea..f74bda943c 100644 --- a/samples/js/demos/html/constraints-and-stats.html +++ b/samples/js/demos/html/constraints-and-stats.html @@ -27,15 +27,15 @@ function openCamera() { if (mystream) { mystream.stop(); } - navigator.webkitGetUserMedia(cameraConstraints(), gotStream, function() { + navigator.getUserMedia(cameraConstraints(), gotStream, function() { log("GetUserMedia failed"); }); -} +} function gotStream(stream) { log("GetUserMedia succeeded"); mystream = stream; - $("local-video").src = webkitURL.createObjectURL(stream); + attachMediaStream($("local-video"), stream); } function cameraConstraints() { @@ -73,8 +73,8 @@ function streamConstraints() { } function connect() { - pc1 = new webkitRTCPeerConnection(null); - pc2 = new webkitRTCPeerConnection(null); + pc1 = new RTCPeerConnection(null); + pc2 = new RTCPeerConnection(null); pc1.addStream(mystream, streamConstraints()); log('PC1 creating offer'); pc1.onnegotiationeeded = function() { @@ -97,7 +97,7 @@ function connect() { } pc2.onaddstream = function(e) { log('PC2 got stream'); - $('remote-video').src = webkitURL.createObjectURL(e.stream); + attachMediaStream($('remote-video'), e.stream); log('Remote video is ' + $('remote-video').src); } pc1.createOffer(function(desc) { @@ -280,7 +280,7 @@ function dumpStats(obj) { } return statsString; } - + // Utility to show the value of a field in a span called name+Display function showValue(name, value) { diff --git a/samples/js/demos/html/create-offer.html b/samples/js/demos/html/create-offer.html new file mode 100644 index 0000000000..aa541bfa14 --- /dev/null +++ b/samples/js/demos/html/create-offer.html @@ -0,0 +1,85 @@ + + + + +Show createOffer Output Demo + + + + +

WebRTC createOffer Test Page

+

This page tests the createOffer method for a WebRTC implementation. It + creates a PeerConnection, and then prints out the SDP generated by + createOffer, with the number of desired audio MediaStreamTracks and the + checked createOffer constraints. Currently, only audio tracks can be added, + as there is no programmatic way to generate video tracks. (Web Audio is + used to generate the audio tracks.)

+

Tracks

+

Number of Audio Tracks

+

Constraints:

+Offer To Receive Audio
+Offer To Receive Video
+Voice Activity Detection
+Ice Restart
+
+
+ + + + + + diff --git a/samples/js/demos/html/face.html b/samples/js/demos/html/face.html index e004ce0a61..cded7dd3f1 100644 --- a/samples/js/demos/html/face.html +++ b/samples/js/demos/html/face.html @@ -3,7 +3,8 @@ - + + @@ -55,96 +56,92 @@ a:link { color: #ffffff; } a:visited {color: #ffffff; } - + - +
JS Face Detect by Liu Liu
 diff --git a/samples/js/demos/html/gum1.html b/samples/js/demos/html/gum1.html index d5e802080b..f431faab9a 100644 --- a/samples/js/demos/html/gum1.html +++ b/samples/js/demos/html/gum1.html @@ -2,6 +2,8 @@ getUserMedia Demo 1 + + + + +

WebRTC Trickle ICE Test Page

+

This page tests the trickle ICE functionality in a WebRTC implementation. It + creates a PeerConnection with the specified ICEServers, and then starts + candidate gathering for a session with a single audio stream. As candidates + are gathered, they are displayed in the text box below, along with an + indication when candidate gathering is complete.

+

Individual STUN and TURN servers can be added using the Add Server/Remove + Server controls below; in addition, the type of candidates released to the + application can be controlled via the IceTransports contraint.

+

ICE Servers

+ +
+STUN or TURN URI: + +
+TURN Username: + +TURN Password: + +
+ + +

ICE Constraints

+IceTransports value: + All + Relay + None +
+
+ +
+ + + + + diff --git a/samples/js/demos/index.html b/samples/js/demos/index.html index fd915703ab..cd56b7619b 100644 --- a/samples/js/demos/index.html +++ b/samples/js/demos/index.html @@ -61,6 +61,12 @@ WebRTC overview first. PeerConnection Samples + + + pc1-audio.html + + Shows how to set up a simple 1:1 audio only call. + pc1.html @@ -77,13 +83,8 @@ WebRTC overview first. 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. + Shows RTCPeerStates and RTCIceConnectionStates in a + simple 1:1 audio/video call. @@ -95,7 +96,8 @@ WebRTC overview first. constraints-and-stats.html - Shows how to pass constraints into the PeerConnection API, and query it for statistics. + Shows how to pass constraints into the PeerConnection API, + and query it for statistics. @@ -113,7 +115,22 @@ WebRTC overview first. webaudio-and-webrtc.html - Captures and filters microphone input using WebAudio and sends it to a remote peer with an option to add an audio effect. + Captures and filters microphone input using WebAudio and sends it to a + remote peer with an option to add an audio effect. + + + + create-offer.html + + Shows the output of createOffer when various constraints + are supplied. + + + + ice-servers.html + + Tests gathering candidates from arbitrary STUN and TURN servers. +