Skip to content

Commit

Permalink
CS-125: add the ability to select a ring audio device (#84)
Browse files Browse the repository at this point in the history
  • Loading branch information
@alexn29
alexn29 authored Aug 3, 2023
1 parent 69def53 commit 8187823
Show file tree
Hide file tree
Showing 5 changed files with 8,209 additions and 273 deletions.
19 changes: 15 additions & 4 deletions docs/lwpMediaDevices.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ Get the HTML media element linked to the provided device kind.

| Name | Type | Default | Description |
| ---------- | ------ | ------- | -------------------------------------------------------------------------------------- |
| deviceKind | string | | The device kind linked to the HTML media element (audiooutput, audioinput, videoinput) |
| deviceKind | string | | The device kind linked to the HTML media element (ringoutput, audiooutput, audioinput, videoinput) |

Returns:

Expand All @@ -99,7 +99,7 @@ Get the prefered device for the given device kind.

| Name | Type | Default | Description |
| ---------- | ------ | ------- | ------------------------------------------------------------- |
| deviceKind | string | | The device kind to get (audiooutput, audioinput, videoinput) |
| deviceKind | string | | The device kind to get (ringoutput, audiooutput, audioinput, videoinput) |

Returns:

Expand All @@ -113,7 +113,7 @@ For the provided device kind attmpet to switch to the provided device id, updati

| Name | Type | Default | Description |
| ---------- | ------ | ------- | --------------------------------------------------------------- |
| deviceKind | string | | The device kind to switch (audiooutput, audioinput, videoinput) |
| deviceKind | string | | The device kind to switch (ringoutput, audiooutput, audioinput, videoinput) |
| deviceId | string | | The device id to switch to |

#### refreshAvailableDevices()
Expand All @@ -129,6 +129,7 @@ Re-paint / update all render targets.
| Key | Default (en) | Description |
| ----------- | ------------------------ | ------------------------------------------------------------------------------------ |
| none | None | Used as the text for a 'null' selection that can be used to disable that device kind |
| ringoutput | Speaker | Used to label the selector for the ring audio output device |
| audiooutput | Speaker | Used to label the selector for the audio output device |
| audioinput | Microphone | Used to label the selector for the audio input device |
| videoinput | Camera | Used to lable the selector for the video input device |
Expand All @@ -138,6 +139,13 @@ Re-paint / update all render targets.

| Name | Type | Default | Description |
| --------------------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ringoutput.enabled | boolean | true if sinkId in HtmlMediaElement | Enables ringing output device selection |
| ringoutput.show | boolean | true | Should the default template show the ringing output device selection |
| ringoutput.preferedDeviceIds | array of strings | [] | The prefered device ids in order of precedence |
| ringoutput.mediaElement.create | boolean | true | Should a HTMLMediaElement be created |
| ringoutput.mediaElement.elementId | string | | The HTML id of an existing HTMLMediaElement to use |
| ringoutput.mediaElement.element | HTMLMediaElement | | The HTMLMediaElement linked to the output device selection |
| ringoutput.mediaElement.initParameters | object | { muted: false } | Key - value pairs to apply to the HTMLMediaElement |
| audiooutput.enabled | boolean | true if sinkId in HtmlMediaElement | Enables audio output device selection |
| audiooutput.show | boolean | true | Should the default template show the output device selection |
| audiooutput.preferedDeviceIds | array of strings | [] | The prefered device ids in order of precedence |
Expand Down Expand Up @@ -174,10 +182,12 @@ Re-paint / update all render targets.
| mediaDevices.created | | Emitted when the class is instantiated |
| mediaDevices.streams.started | [mediaStream](https://developer.mozilla.org/en-US/docs/Web/API/MediaStream) | Emitted when streams are started for a call |
| mediaDevices.streams.stopped | | Emitted when streams are stopped for a call |
| mediaDevices.ring.output.element | [HTML Audio Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) | Emitted when the HTML audio element is created |
| mediaDevices.audio.output.element | [HTML Audio Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) | Emitted when the HTML audio element is created |
| mediaDevices.audio.input.element | [HTML Audio Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio) | Emitted when the HTML audio element is created |
| mediaDevices.video.output.element | [HTML Video Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video) | Emitted when the HTML audio element is created |
| mediaDevices.getUserMedia.error | error (exception) | Emitted if getUserMedia() throws |
| mediaDevices.ring.output.changed | preferedDevice | Emitted when the ring output audio device is changed |
| mediaDevices.audio.output.changed | preferedDevice | Emitted when the output audio device is changed |
| mediaDevices.audio.input.muted | trackParameters (lwpUtil.trackParameters) | Emitted when the input audio is muted |
| mediaDevices.video.input.muted | trackParameters (lwpUtil.trackParameters) | Emitted when the input audio is muted |
Expand All @@ -191,7 +201,7 @@ Re-paint / update all render targets.
| mediaDevices.video.input.stopped | trackParameters (lwpUtil.trackParameters) | Emitted when the video input is stopped |
| mediaDevices.loaded | availableDevices | Emitted when the devices are initialized |
| mediaDevices.refreshed | availableDevices | Emitted when the devices are changed |
> NOTE! All standard HTML media events for the audio output, audio input and video input elements are emitted as mediaDevices.{kind}.{direction}.{eventName} with the additional parameters: element (HTML element), event (HTML media event). For example, mediaDevices.audio.input.playing.
> NOTE! All standard HTML media events for the audio ringing, audio output, audio input and video input elements are emitted as mediaDevices.{kind}.{direction}.{eventName} with the additional parameters: element (HTML element), event (HTML media event). For example, mediaDevices.audio.input.playing.
### Consumed

Expand All @@ -203,6 +213,7 @@ Re-paint / update all render targets.
| audioContext.started | Invokes \_startMediaElements() |
| mediaDevices.streams.started | Invokes updateRenders() |
| mediaDevices.streams.stop | Invokes updateRenders() |
| mediaDevices.ring.output.changed | Invokes updateRenders() |
| mediaDevices.audio.output.changed | Invokes updateRenders() |
| mediaDevices.audio.input.changed | Invokes updateRenders() |
| mediaDevices.video.input.changed | Invokes updateRenders() |
Expand Down
32 changes: 29 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -379,6 +379,7 @@
elementId: "media_device_tweaked",
},
data: {
ringoutput: { show: false },
audiooutput: { show: false },
audioinput: { show: false },
},
Expand Down Expand Up @@ -531,6 +532,21 @@
<legend>{{i18n.legend}}</legend>
{{#data.loaded}}
<div>
<label for="ringoutput">
{{i18n.ringoutput}}
</label>
<fieldset id="ringoutput">
{{#data.ringoutput.devices}}
{{#connected}}
<div><input type="radio" value="{{id}}" name="{{by_name.ringoutputselector.elementName}}" {{#selected}}checked{{/selected}}>{{name}}</input></div>
{{/connected}}
{{/data.ringoutput.devices}}
</fieldset>
</div>
<br>
<div>
<label for="audiooutput">
{{i18n.audiooutput}}
Expand Down Expand Up @@ -588,10 +604,20 @@
elementId: "media_device_custom",
},
by_name: {
ringoutputselector: {
events: {
onchange: (event) => {
const element = event.srcElement;
webphone
.getMediaDevices()
.changeDevice("ringoutput", element.value);
},
},
},
audiooutputselector: {
events: {
onchange: (event) => {
let element = event.srcElement;
const element = event.srcElement;
webphone
.getMediaDevices()
.changeDevice("audiooutput", element.value);
Expand All @@ -601,7 +627,7 @@
audiooinputselector: {
events: {
onchange: (event) => {
let element = event.srcElement;
const element = event.srcElement;
webphone
.getMediaDevices()
.changeDevice("audioinput", element.value);
Expand All @@ -611,7 +637,7 @@
videoinputselector: {
events: {
onchange: (event) => {
let element = event.srcElement;
const element = event.srcElement;
webphone
.getMediaDevices()
.changeDevice("videoinput", element.value);
Expand Down
Loading

0 comments on commit 8187823

Please sign in to comment.