diff --git a/src/content/peerconnection/states/index.html b/src/content/peerconnection/states/index.html index a47f2b6358..ebb550538d 100644 --- a/src/content/peerconnection/states/index.html +++ b/src/content/peerconnection/states/index.html @@ -47,8 +47,8 @@

WebRTC
-
PC1 state:
-
+
PC1 signaling state:
+
PC1 ICE state:
@@ -59,8 +59,8 @@

WebRTC

-
PC2 state:
-
+
PC2 signaling state:
+
PC2 ICE state:
@@ -73,8 +73,7 @@

WebRTC

View the console to see logging. The MediaStream object localStream, and the RTCPeerConnection - objects localPeerConnection and remotePeerConnection are in global scope, so you can - inspect them in the console as well.

+ objects pc1 and pc2 are in global scope, so you can inspect them in the console as well.

For more information about RTCPeerConnection, see Getting diff --git a/src/content/peerconnection/states/js/main.js b/src/content/peerconnection/states/js/main.js index fbd3b73285..53aba22fb1 100644 --- a/src/content/peerconnection/states/js/main.js +++ b/src/content/peerconnection/states/js/main.js @@ -21,14 +21,14 @@ startButton.onclick = start; callButton.onclick = call; hangupButton.onclick = hangup; -const pc1StateDiv = document.querySelector('div#pc1State'); +const pc1SignalStateDiv = document.querySelector('div#pc1SignalState'); const pc1IceStateDiv = document.querySelector('div#pc1IceState'); const pc1ConnStateDiv = document.querySelector('div#pc1ConnState'); -const pc2StateDiv = document.querySelector('div#pc2State'); +const pc2SignalStateDiv = document.querySelector('div#pc2SignalState'); const pc2IceStateDiv = document.querySelector('div#pc2IceState'); const pc2ConnStateDiv = document.querySelector('div#pc2ConnState'); -let localstream; +let localStream; let pc1; let pc2; @@ -40,7 +40,7 @@ const offerOptions = { function gotStream(stream) { console.log('Received local stream'); video1.srcObject = stream; - localstream = stream; + localStream = stream; callButton.disabled = false; } @@ -60,8 +60,8 @@ function call() { callButton.disabled = true; hangupButton.disabled = false; console.log('Starting call'); - const videoTracks = localstream.getVideoTracks(); - const audioTracks = localstream.getAudioTracks(); + const videoTracks = localStream.getVideoTracks(); + const audioTracks = localStream.getAudioTracks(); if (videoTracks.length > 0) { console.log(`Using Video device: ${videoTracks[0].label}`); } @@ -72,7 +72,7 @@ function call() { pc1 = new RTCPeerConnection(servers); console.log('Created local peer connection object pc1'); - pc1StateDiv.textContent = pc1.signalingState || pc1.readyState; + pc1SignalStateDiv.textContent = pc1.signalingState; pc1.onsignalingstatechange = stateCallback1; pc1IceStateDiv.textContent = pc1.iceConnectionState; @@ -82,7 +82,7 @@ function call() { pc2 = new RTCPeerConnection(servers); console.log('Created remote peer connection object pc2'); - pc2StateDiv.textContent = pc2.signalingState || pc2.readyState; + pc2SignalStateDiv.textContent = pc2.signalingState; pc2.onsignalingstatechange = stateCallback2; pc2IceStateDiv.textContent = pc2.iceConnectionState; @@ -90,7 +90,7 @@ function call() { pc2.onconnectionstatechange = connStateCallback2; pc2.onicecandidate = e => onIceCandidate(pc2, e); pc2.ontrack = gotRemoteStream; - localstream.getTracks().forEach(track => pc1.addTrack(track, localstream)); + localStream.getTracks().forEach(track => pc1.addTrack(track, localStream)); console.log('Adding Local Stream to peer connection'); pc1.createOffer(offerOptions).then(gotDescription1, onCreateSessionDescriptionError); } @@ -116,10 +116,12 @@ function hangup() { console.log('Ending call'); pc1.close(); pc2.close(); - pc1StateDiv.textContent += ` => ${pc1.signalingState}` || pc1.readyState; - pc2StateDiv.textContent += ` => ${pc2.signalingState}` || pc2.readyState; + pc1SignalStateDiv.textContent += ` => ${pc1.signalingState}`; + pc2SignalStateDiv.textContent += ` => ${pc2.signalingState}`; pc1IceStateDiv.textContent += ` => ${pc1.iceConnectionState}`; pc2IceStateDiv.textContent += ` => ${pc2.iceConnectionState}`; + pc1ConnStateDiv.textContent += ` => ${pc1.connectionState}`; + pc2ConnStateDiv.textContent += ` => ${pc2.connectionState}`; pc1 = null; pc2 = null; hangupButton.disabled = true; @@ -136,18 +138,18 @@ function gotRemoteStream(e) { function stateCallback1() { let state; if (pc1) { - state = pc1.signalingState || pc1.readyState; + state = pc1.signalingState; console.log(`pc1 state change callback, state: ${state}`); - pc1StateDiv.textContent += ` => ${state}`; + pc1SignalStateDiv.textContent += ` => ${state}`; } } function stateCallback2() { let state; if (pc2) { - state = pc2.signalingState || pc2.readyState; + state = pc2.signalingState; console.log(`pc2 state change callback, state: ${state}`); - pc2StateDiv.textContent += ` => ${state}`; + pc2SignalStateDiv.textContent += ` => ${state}`; } } diff --git a/src/content/peerconnection/states/js/test.js b/src/content/peerconnection/states/js/test.js new file mode 100644 index 0000000000..660c4ed832 --- /dev/null +++ b/src/content/peerconnection/states/js/test.js @@ -0,0 +1,79 @@ +/* + * Copyright (c) 2015 The WebRTC project authors. All Rights Reserved. + * + * Use of this source code is governed by a BSD-style license + * that can be found in the LICENSE file in the root of the source + * tree. + */ +/* eslint-env node, mocha */ + +'use strict'; +const webdriver = require('selenium-webdriver'); +const seleniumHelpers = require('../../../../../test/webdriver'); +const {expect} = require('chai'); + +let driver; +const path = '/src/content/peerconnection/states/index.html'; +const url = `${process.env.BASEURL ? process.env.BASEURL : ('file://' + process.cwd())}${path}`; + +describe('peerconnection states', () => { + before(() => { + driver = seleniumHelpers.buildDriver(); + }); + after(() => { + return driver.quit(); + }); + + beforeEach(() => { + return driver.get(url); + }); + + it('establishes a connection and hangs up', async () => { + await driver.findElement(webdriver.By.id('startButton')).click(); + + await driver.wait(() => driver.executeScript(() => { + return localStream !== null; // eslint-disable-line no-undef + })); + + await driver.wait(() => driver.findElement(webdriver.By.id('callButton')).isEnabled()); + await driver.findElement(webdriver.By.id('callButton')).click(); + + await Promise.all([ + await driver.wait(() => driver.executeScript(() => { + return pc1 && pc1.connectionState === 'connected'; // eslint-disable-line no-undef + })), + await driver.wait(() => driver.executeScript(() => { + return pc2 && pc2.connectionState === 'connected'; // eslint-disable-line no-undef + })), + ]); + + await driver.wait(() => driver.executeScript(() => { + return document.getElementById('video2').readyState === HTMLMediaElement.HAVE_ENOUGH_DATA; + })); + + const pc1States = { + signaling: await driver.findElement(webdriver.By.id('pc1SignalState')).getAttribute('innerText'), + ice: await driver.findElement(webdriver.By.id('pc1IceState')).getAttribute('innerText'), + connection: await driver.findElement(webdriver.By.id('pc1ConnState')).getAttribute('innerText'), + }; + expect(pc1States.signaling).to.equal('stable => have-local-offer => stable'); + expect(pc1States.ice).to.equal('new => checking => connected'); + expect(pc1States.connection).to.equal('=> connecting => connected'); + + const pc2States = { + signaling: await driver.findElement(webdriver.By.id('pc2SignalState')).getAttribute('innerText'), + ice: await driver.findElement(webdriver.By.id('pc2IceState')).getAttribute('innerText'), + connection: await driver.findElement(webdriver.By.id('pc2ConnState')).getAttribute('innerText'), + }; + expect(pc2States.signaling).to.equal('stable => have-remote-offer => stable'); + expect(pc2States.ice).to.equal('new => checking => connected'); + expect(pc2States.connection).to.equal('=> connecting => connected'); + + await driver.findElement(webdriver.By.id('hangupButton')).click(); + + await driver.wait(() => driver.executeScript(() => { + return pc1 === null; // eslint-disable-line no-undef + })); + }); +}); +