Skip to content
This repository was archived by the owner on Oct 25, 2024. It is now read-only.

Commit 56d675a

Browse files
grgustafgrgustaf
authored
Refactor p2p sample (#383)
* Move JS out of peercall.html and run js-beautify on sample * Fix most ESLint issues on P2P sample Also, move user-editable data to top of peercall.js and update README. Add an .eslintrc to samples directory that knows we're developing code for the browser, etc. A few ESLint errors related to undefined variables and indenting that js-beautify does wrong are left. * Clarify steps in P2P sample README If someone digs down into the tree and looks at this sample, they may not know how to get owt.js. That's what happened to me the first time I used this.
1 parent 0d27745 commit 56d675a

File tree

5 files changed

+279
-200
lines changed

5 files changed

+279
-200
lines changed

‎src/samples/.eslintrc.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
// Copyright (C) <2020> Intel Corporation
2+
//
3+
// SPDX-License-Identifier: Apache-2.0
4+
{
5+
"globals": {
6+
// expect owt.js to be included
7+
"Owt": true,
8+
// expect jQuery to be included
9+
"$": true,
10+
// expect socket.io to be included
11+
"io": true
12+
},
13+
"env": {
14+
"browser": true,
15+
"es6": true
16+
},
17+
"rules": {
18+
"no-console": "off"
19+
}
20+
}

‎src/samples/p2p/README.md

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,20 @@
44
To run the server, you need to install node and npm, then change into the [owt-server-p2p](https://github.com/open-webrtc-toolkit/owt-server-p2p) source directory, and install all modules listed as dependencies in package.json by using command `npm install` .
55
After the dependencies are successfully installed, you can run the peer server by using the command `node peerserver.js`. It will listen on ports 8095/8096.
66

7-
## Step 2: Deploy p2p sample page and sdk on web server
8-
You need to edit the sample page `peercall.html`:
7+
## Step 2: Build OWT JS SDK
8+
If you haven't already, read the top-level README.md for how to use grunt to build the SDK into the dist/ subdirectory.
99

10-
- Set serverAddress on line 112: change `example.com` to your p2p server address.
10+
## Step 3: Deploy p2p sample page and SDK on web server
11+
Now you should be working with the files in dist/samples/p2p, not src/samples/p2p.
12+
13+
You need to edit the sample file `peercall.js`:
14+
15+
- Set serverAddress on line 8: change `example.com` to your p2p server address.
1116
- Set correct ICE server addresses below that.
1217

1318
Then choose a webserver such as Apache, and deploy the page and the sdk.
1419

15-
## Step 3: Visit the website
20+
## Step 4: Visit the website
1621
You can then visit the page from a web browser, with a URL such as https://server.domain.com:<PORT>/peercall.html
1722

1823
Open the web page from two clients with cameras connected, and choose two names. On one, type the first name and click **Login**, then type the second name and click **Set Remote Id**. On the other client, swap the names. Then click **Share Camera** on each to stream video.

‎src/samples/p2p/js/peercall.js

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
// Copyright (C) <2018> Intel Corporation
2+
//
3+
// SPDX-License-Identifier: Apache-2.0
4+
5+
'use strict';
6+
7+
// Please change example.com to signaling server's address.
8+
const serverAddress = 'https://example.com:8096';
9+
10+
// Please change this STUN and TURN server information.
11+
const rtcConfiguration = {
12+
iceServers: [{
13+
urls: 'stun:example.com:3478',
14+
}, {
15+
urls: [
16+
'turn:example.com:3478?transport=udp',
17+
'turn:example.com:3478?transport=tcp',
18+
],
19+
credential: 'password',
20+
username: 'username',
21+
}],
22+
};
23+
24+
const signaling = new SignalingChannel();
25+
let publicationForCamera;
26+
const p2p = new Owt.P2P.P2PClient({
27+
audioEncodings: true,
28+
videoEncodings: [{
29+
codec: {
30+
name: 'h264',
31+
},
32+
}, {
33+
codec: {
34+
name: 'vp9',
35+
},
36+
}, {
37+
codec: {
38+
name: 'vp8',
39+
},
40+
}],
41+
rtcConfiguration,
42+
}, signaling);
43+
44+
let localStream;
45+
let screenStream;
46+
47+
const getTargetId = function() {
48+
return $('#remote-uid').val();
49+
};
50+
51+
$(document).ready(function() {
52+
$('#set-remote-uid').click(function() {
53+
p2p.allowedRemoteIds = [getTargetId()];
54+
});
55+
56+
$('#target-screen').click(function() {
57+
const config = {
58+
audio: {
59+
source: 'screen-cast',
60+
},
61+
video: {
62+
source: 'screen-cast',
63+
},
64+
};
65+
let mediaStream;
66+
Owt.Base.MediaStreamFactory.createMediaStream(config).then(
67+
(stream) => {
68+
mediaStream = stream;
69+
screenStream = new Owt.Base.LocalStream(mediaStream, new Owt
70+
.Base.StreamSourceInfo('screen-cast', 'screen-cast'));
71+
$('#local').children('video').get(0).srcObject = screenStream
72+
.mediaStream;
73+
p2p.publish(getTargetId(), screenStream).then(
74+
(publication) => {}), (error) => {
75+
console.log('Failed to share screen.');
76+
};
77+
}, (err) => {
78+
console.error('Failed to create MediaStream, ' + err);
79+
});
80+
});
81+
82+
$('#target-video-unpublish').click(function() {
83+
$('#target-video-publish').prop('disabled', false);
84+
$('#target-video-unpublish').prop('disabled', true);
85+
publicationForCamera.stop();
86+
for (const track of localStream.mediaStream.getTracks()) {
87+
track.stop();
88+
}
89+
localStream = undefined;
90+
});
91+
92+
$('#target-video-publish').click(function() {
93+
$('#target-video-unpublish').prop('disabled', false);
94+
$('#target-video-publish').prop('disabled', true);
95+
if (localStream) {
96+
p2p.publish(getTargetId(), localStream).then((publication) => {
97+
publicationForCamera = publication;
98+
}, (error) => {
99+
console.log('Failed to share video.');
100+
}); // Publish local stream to remote client
101+
} else {
102+
const audioConstraintsForMic = new Owt.Base.AudioTrackConstraints(
103+
Owt.Base.AudioSourceInfo.MIC);
104+
const videoConstraintsForCamera = new Owt.Base
105+
.VideoTrackConstraints(Owt.Base.VideoSourceInfo.CAMERA);
106+
let mediaStream;
107+
Owt.Base.MediaStreamFactory.createMediaStream(new Owt.Base
108+
.StreamConstraints(audioConstraintsForMic,
109+
videoConstraintsForCamera)).then((stream) => {
110+
mediaStream = stream;
111+
localStream = new Owt.Base.LocalStream(mediaStream, new Owt
112+
.Base.StreamSourceInfo('mic', 'camera'));
113+
$('#local').children('video').get(0).srcObject = localStream
114+
.mediaStream;
115+
p2p.publish(getTargetId(), localStream).then(
116+
(publication) => {
117+
publicationForCamera = publication;
118+
}, (error) => {
119+
console.log('Failed to share video.');
120+
});
121+
}, (err) => {
122+
console.error('Failed to create MediaStream, ' + err);
123+
});
124+
}
125+
});
126+
127+
$('#target-peerconnection-stop').click(function() {
128+
p2p.stop($('#remote-uid').val()); // Stop conversation
129+
});
130+
131+
$('#login').click(function() {
132+
p2p.connect({
133+
host: serverAddress,
134+
token: $('#uid').val(),
135+
}).then(() => {
136+
$('#uid').prop('disabled', true);
137+
}, (error) => {
138+
console.log('Failed to connect to the signaling server.');
139+
}); // Connect to signaling server.
140+
});
141+
142+
$('#logoff').click(function() {
143+
p2p.disconnect();
144+
$('#uid').prop('disabled', false);
145+
});
146+
147+
$('#data-send').click(function() {
148+
p2p.send(getTargetId(), $('#dataSent')
149+
.val()); // Send data to remote endpoint.
150+
});
151+
});
152+
153+
p2p.addEventListener('streamadded',
154+
function(e) { // A remote stream is available.
155+
e.stream.addEventListener('ended', () => {
156+
console.log('Stream is removed.');
157+
});
158+
if (e.stream.source.video === 'screen-cast') {
159+
$('#screen video').show();
160+
$('#screen video').get(0).srcObject = e.stream.mediaStream;
161+
$('#screen video').get(0).play();
162+
} else if (e.stream.source.audio || e.stream.source.video) {
163+
$('#remote video').show();
164+
$('#remote video').get(0).srcObject = e.stream.mediaStream;
165+
$('#remote video').get(0).play();
166+
}
167+
});
168+
169+
p2p.addEventListener('messagereceived',
170+
function(e) { // Received data from datachannel.
171+
$('#dataReceived').val(e.origin + ': ' + e.message);
172+
});
173+
174+
window.onbeforeunload = function() {
175+
p2p.stop($('#remote-uid').val());
176+
};

0 commit comments

Comments
 (0)