-
PC1 state:
-
+
PC1 signaling state:
+
PC1 ICE state:
@@ -59,8 +59,8 @@
-
PC2 state:
-
+
PC2 signaling state:
+
PC2 ICE state:
@@ -73,8 +73,7 @@
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
+ }));
+ });
+});
+