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

Commit 3a4aa61

Browse files
starwarfanjianjunz
starwarfan
authored and
jianjunz
committed
Add simulcast parameter in sample page (#220)
1 parent 9f4fc39 commit 3a4aa61

File tree

1 file changed

+72
-72
lines changed
  • src/samples/conference/public/scripts

1 file changed

+72
-72
lines changed

‎src/samples/conference/public/scripts/index.js

Lines changed: 72 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -48,38 +48,59 @@ const runSocketIOSample = function() {
4848
var subscribeForward = getParameterByName('forward') === 'true'?true:false;
4949
var isSelf = getParameterByName('self') === 'false'?false:true;
5050
conference = new Owt.Conference.ConferenceClient();
51-
function renderVideo(stream){
52-
let subscirptionForward=null;
53-
function subscribeDifferentResolutionForward(forward, resolution){
54-
subscirptionForward && subscirptionForward.stop();
55-
subscirptionForward = null;
51+
function createResolutionButtons(stream, subscribeResolutionCallback) {
52+
let $p = $(`#${stream.id}resolutions`);
53+
if ($p.length === 0) {
54+
$p = $(`<div id=${stream.id}resolutions> </div>`);
55+
$p.appendTo($('body'));
56+
}
57+
// Resolutions from settings.
58+
for (const videoSetting of stream.settings.video) {
59+
const resolution = videoSetting.resolution;
60+
if (resolution) {
61+
const button = $('<button/>', {
62+
text: resolution.width + 'x' +
63+
resolution.height,
64+
click: () => {
65+
subscribeResolutionCallback(stream, resolution);
66+
}
67+
});
68+
button.prependTo($p);
69+
}
70+
}
71+
// Resolutions from extraCapabilities.
72+
for (const resolution of stream.extraCapabilities.video.resolutions) {
73+
const button = $('<button/>', {
74+
text: resolution.width + 'x' +
75+
resolution.height,
76+
click: () => {
77+
subscribeResolutionCallback(stream, resolution);
78+
}
79+
});
80+
button.prependTo($p);
81+
};
82+
return $p;
83+
}
84+
function subscribeAndRenderVideo(stream){
85+
let subscirptionLocal=null;
86+
function subscribeDifferentResolution(stream, resolution){
87+
subscirptionLocal && subscirptionLocal.stop();
88+
subscirptionLocal = null;
5689
const videoOptions = {};
5790
videoOptions.resolution = resolution;
5891
conference.subscribe(stream, {
5992
audio: true,
6093
video: videoOptions
6194
}).then((
6295
subscription) => {
63-
subscirptionForward = subscription;
96+
subscirptionLocal = subscription;
6497
$(`#${stream.id}`).get(0).srcObject = stream.mediaStream;
6598
});
6699
}
67-
let $p = $(`<div id=${stream.id}resolutions> </div>`)
68-
// TODO: Add resolutions from settings.
69-
for (const resolution of stream.extraCapabilities.video.resolutions) {
70-
const button = $('<button/>', {
71-
text: resolution.width + 'x' +
72-
resolution.height,
73-
click: () => {
74-
subscribeDifferentResolutionForward(stream, resolution);
75-
}
76-
});
77-
button.appendTo($p);
78-
};
79-
$p.appendTo($('body'));
100+
let $p = createResolutionButtons(stream, subscribeDifferentResolution);
80101
conference.subscribe(stream)
81102
.then((subscription)=>{
82-
subscirptionForward = subscription;
103+
subscirptionLocal = subscription;
83104
let $video = $(`<video controls autoplay id=${stream.id} style="display:block" >this browser does not supported video tag</video>`);
84105
$video.get(0).srcObject = stream.mediaStream;
85106
$p.append($video);
@@ -89,29 +110,20 @@ const runSocketIOSample = function() {
89110
removeUi(stream.id);
90111
$(`#${stream.id}resolutions`).remove();
91112
});
113+
stream.addEventListener('updated', () => {
114+
// Update resolution buttons
115+
$p.children('button').remove();
116+
createResolutionButtons(stream, subscribeDifferentResolution);
117+
});
92118
}
93119
function removeUi(id){
94120
$(`#${id}`).remove();
95121
}
96-
function subscribeDifferentResolution(stream, resolution) {
97-
subscriptionForMixedStream.stop();
98-
subscriptionForMixedStream = null;
99-
const videoOptions = {};
100-
videoOptions.resolution = resolution;
101-
conference.subscribe(stream, {
102-
audio: true,
103-
video: videoOptions
104-
}).then((
105-
subscription) => {
106-
subscriptionForMixedStream = subscription;
107-
$(`#${stream.id}`).get(0).srcObject = stream.mediaStream;
108-
});
109-
}
110122

111123
conference.addEventListener('streamadded', (event) => {
112124
console.log('A new stream is added ', event.stream.id);
113125
isSelf = isSelf?isSelf:event.stream.id != publicationGlobal.id;
114-
subscribeForward && isSelf && renderVideo(event.stream);
126+
subscribeForward && isSelf && subscribeAndRenderVideo(event.stream);
115127
mixStream(myRoom, event.stream.id, 'common');
116128
event.stream.addEventListener('ended', () => {
117129
console.log(event.stream.id + ' is ended.');
@@ -120,10 +132,7 @@ const runSocketIOSample = function() {
120132

121133

122134
window.onload = function() {
123-
var myResolution = getParameterByName('resolution') || {
124-
width: 1280,
125-
height: 720
126-
};
135+
var simulcast = getParameterByName('simulcast') || false;
127136
var shareScreen = getParameterByName('screen') || false;
128137
myRoom = getParameterByName('room');
129138
var isHttps = (location.protocol === 'https:');
@@ -138,21 +147,34 @@ const runSocketIOSample = function() {
138147
startStreamingIn(myRoom, mediaUrl);
139148
}
140149
if (isPublish !== 'false') {
141-
const audioConstraintsForMic = new Owt.Base.AudioTrackConstraints(Owt.Base.AudioSourceInfo.MIC);
142-
const videoConstraintsForCamera = new Owt.Base.VideoTrackConstraints(Owt.Base.VideoSourceInfo.CAMERA);
150+
// audioConstraintsForMic
151+
let audioConstraints = new Owt.Base.AudioTrackConstraints(Owt.Base.AudioSourceInfo.MIC);
152+
// videoConstraintsForCamera
153+
let videoConstraints = new Owt.Base.VideoTrackConstraints(Owt.Base.VideoSourceInfo.CAMERA);
154+
if (shareScreen) {
155+
// audioConstraintsForScreen
156+
audioConstraints = new Owt.Base.AudioTrackConstraints(Owt.Base.AudioSourceInfo.SCREENCAST);
157+
// videoConstraintsForScreen
158+
videoConstraints = new Owt.Base.VideoTrackConstraints(Owt.Base.VideoSourceInfo.SCREENCAST);
159+
}
160+
143161
let mediaStream;
144162
Owt.Base.MediaStreamFactory.createMediaStream(new Owt.Base.StreamConstraints(
145-
audioConstraintsForMic, videoConstraintsForCamera)).then(stream => {
163+
audioConstraints, videoConstraints)).then(stream => {
164+
let publishOption;
165+
if (simulcast) {
166+
publishOption = {video:[
167+
{rid: 'q', active: true/*, scaleResolutionDownBy: 4.0*/},
168+
{rid: 'h', active: true/*, scaleResolutionDownBy: 2.0*/},
169+
{rid: 'f', active: true}
170+
]};
171+
}
146172
mediaStream = stream;
147173
localStream = new Owt.Base.LocalStream(
148174
mediaStream, new Owt.Base.StreamSourceInfo(
149175
'mic', 'camera'));
150176
$('.local video').get(0).srcObject = stream;
151-
conference.publish(localStream, {video:[
152-
{rid: 'q', active: true, scaleResolutionDownBy: 4.0},
153-
{rid: 'h', active: true, scaleResolutionDownBy: 2.0},
154-
{rid: 'f', active: true}
155-
]}).then(publication => {
177+
conference.publish(localStream, publishOption).then(publication => {
156178
publicationGlobal = publication;
157179
mixStream(myRoom, publication.id, 'common')
158180
publication.addEventListener('error', (err) => {
@@ -169,32 +191,10 @@ const runSocketIOSample = function() {
169191
if(!subscribeForward){
170192
if (stream.source.audio === 'mixed' || stream.source.video ===
171193
'mixed') {
172-
conference.subscribe(stream, {
173-
audio: {codecs:[{name:'opus'}]},
174-
video: true
175-
}).then((subscription) => {
176-
subscriptionForMixedStream = subscription;
177-
let $video = $(`<video controls autoplay id=${stream.id} style='display:block'>this browser does not supported video tag</video>`);
178-
$video.get(0).srcObject = stream.mediaStream;
179-
$('body').append($video);
180-
subscription.addEventListener('error', (err) => {
181-
console.log('Subscription error: ' + err.error.message);
182-
})
183-
});
184-
// TODO: Add resolutions from settings.
185-
for (const resolution of stream.extraCapabilities.video.resolutions) {
186-
const button = $('<button/>', {
187-
text: resolution.width + 'x' +
188-
resolution.height,
189-
click: () => {
190-
subscribeDifferentResolution(stream, resolution);
191-
}
192-
});
193-
button.appendTo($('body'));
194-
};
194+
subscribeAndRenderVideo(stream);
195195
}
196-
}else if(stream.source.audio !== 'mixed'){
197-
subscribeForward && renderVideo(stream);
196+
} else if (stream.source.audio !== 'mixed') {
197+
subscribeAndRenderVideo(stream);
198198
}
199199
}
200200
console.log('Streams in conference:', streams.length);

0 commit comments

Comments
 (0)