@live-change/peer-connection-frontend 0.8.45 → 0.8.47
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<Button v-if="!model.videoInput?.deviceId"
|
|
3
|
+
@click="emit('disabledAudioClick')" raised
|
|
4
|
+
icon="bx bx-camera-off" severity="secondary" rounded v-ripple />
|
|
5
|
+
<Button v-else-if="videoInputMuted" @click="videoInputMuted = false" raised
|
|
6
|
+
icon="bx bx-camera-off" severity="danger" rounded v-ripple />
|
|
7
|
+
<Button v-else @click="videoInputMuted = true" raised
|
|
8
|
+
icon="bx bx-camera" severity="success" rounded v-ripple />
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script setup>
|
|
12
|
+
import { defineModel, defineEmits, computed } from 'vue'
|
|
13
|
+
|
|
14
|
+
const model = defineModel({
|
|
15
|
+
required: true,
|
|
16
|
+
type: Object,
|
|
17
|
+
properties: {
|
|
18
|
+
audioInput: {
|
|
19
|
+
type: Object
|
|
20
|
+
},
|
|
21
|
+
audioOutput: {
|
|
22
|
+
type: Object
|
|
23
|
+
},
|
|
24
|
+
videoInput: {
|
|
25
|
+
type: Object
|
|
26
|
+
},
|
|
27
|
+
audioMuted: {
|
|
28
|
+
type: Boolean
|
|
29
|
+
},
|
|
30
|
+
videoMuted: {
|
|
31
|
+
type: Boolean
|
|
32
|
+
},
|
|
33
|
+
userMedia: {
|
|
34
|
+
type: Object
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
})
|
|
38
|
+
|
|
39
|
+
const emit = defineEmits(['disabledVideoClick'])
|
|
40
|
+
|
|
41
|
+
const videoInputMuted = computed({
|
|
42
|
+
get: () => model.value?.videoMuted,
|
|
43
|
+
set: (value) => model.value = {
|
|
44
|
+
...model.value,
|
|
45
|
+
videoMuted: value
|
|
46
|
+
}
|
|
47
|
+
})
|
|
48
|
+
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<style scoped>
|
|
52
|
+
|
|
53
|
+
</style>
|
|
@@ -20,23 +20,8 @@
|
|
|
20
20
|
</div>
|
|
21
21
|
<div class="absolute top-0 left-0 w-full h-full flex flex-column justify-content-end align-items-center">
|
|
22
22
|
<div class="flex flex-row justify-content-between align-items-center h-5rem w-7rem media-buttons">
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
@click="handleDisabledAudioClick" raised
|
|
26
|
-
icon="bx bx-microphone-off" severity="secondary" rounded v-ripple />
|
|
27
|
-
<Button v-else-if="audioInputMuted" @click="audioInputMuted = false" raised
|
|
28
|
-
icon="bx bx-microphone-off" severity="danger" rounded v-ripple />
|
|
29
|
-
<Button v-else @click="audioInputMuted = true" raised
|
|
30
|
-
icon="bx bx-microphone" severity="success" rounded v-ripple />
|
|
31
|
-
|
|
32
|
-
<Button v-if="!selectedConstraints?.video?.deviceId"
|
|
33
|
-
@click="handleDisabledVideoClick" raised
|
|
34
|
-
icon="bx bx-camera-off" severity="secondary" rounded v-ripple />
|
|
35
|
-
<Button v-else-if="videoInputMuted" @click="videoInputMuted = false" raised
|
|
36
|
-
icon="bx bx-camera-off" severity="danger" rounded v-ripple />
|
|
37
|
-
<Button v-else @click="videoInputMuted = true" raised
|
|
38
|
-
icon="bx bx-camera" severity="success" rounded v-ripple />
|
|
39
|
-
|
|
23
|
+
<MicrophoneButton v-model="model" @disabled-audio-click="handleDisabledAudioClick" />
|
|
24
|
+
<CameraButton v-model="model" @disabled-video-click="handleDisabledVideoClick" />
|
|
40
25
|
</div>
|
|
41
26
|
</div>
|
|
42
27
|
<div class="absolute top-0 right-0">
|
|
@@ -147,10 +132,12 @@
|
|
|
147
132
|
import PermissionsDialog from './PermissionsDialog.vue'
|
|
148
133
|
import VolumeIndicator from './VolumeIndicator.vue'
|
|
149
134
|
|
|
150
|
-
import { defineProps, defineModel, computed, ref, toRefs, onMounted, watch } from 'vue'
|
|
135
|
+
import { defineProps, defineModel, computed, ref, toRefs, onMounted, watch, watchEffect } from 'vue'
|
|
151
136
|
import { useInterval, useEventListener } from "@vueuse/core"
|
|
152
137
|
import { getUserMedia as getUserMediaNative, getDisplayMedia as getDisplayMediaNative, isUserMediaPermitted }
|
|
153
138
|
from "./userMedia.js"
|
|
139
|
+
import MicrophoneButton from './MicrophoneButton.vue'
|
|
140
|
+
import CameraButton from './CameraButton.vue'
|
|
154
141
|
|
|
155
142
|
|
|
156
143
|
const props = defineProps({
|
|
@@ -198,6 +185,8 @@
|
|
|
198
185
|
}
|
|
199
186
|
})
|
|
200
187
|
|
|
188
|
+
globalThis.deviceSelectModel = model
|
|
189
|
+
|
|
201
190
|
const devices = ref([])
|
|
202
191
|
async function updateDevices() {
|
|
203
192
|
console.log("UPDATE DEVICES")
|
|
@@ -213,22 +202,6 @@
|
|
|
213
202
|
const audioOutputs = computed(() => devices.value.filter(device => device.kind === 'audiooutput'))
|
|
214
203
|
const videoInputs = computed(() => devices.value.filter(device => device.kind === 'videoinput'))
|
|
215
204
|
|
|
216
|
-
const audioInputMuted = computed({
|
|
217
|
-
get: () => model.value?.audioMuted,
|
|
218
|
-
set: (value) => model.value = {
|
|
219
|
-
...model.value,
|
|
220
|
-
audioMuted: value
|
|
221
|
-
}
|
|
222
|
-
})
|
|
223
|
-
|
|
224
|
-
const videoInputMuted = computed({
|
|
225
|
-
get: () => model.value?.videoMuted,
|
|
226
|
-
set: (value) => model.value = {
|
|
227
|
-
...model.value,
|
|
228
|
-
videoMuted: value
|
|
229
|
-
}
|
|
230
|
-
})
|
|
231
|
-
|
|
232
205
|
watch(audioInputs, (value) => {
|
|
233
206
|
model.value = {
|
|
234
207
|
...model.value,
|
|
@@ -318,13 +291,13 @@
|
|
|
318
291
|
}
|
|
319
292
|
})
|
|
320
293
|
|
|
321
|
-
|
|
322
|
-
(
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
294
|
+
watchEffect(() => {
|
|
295
|
+
if(userMedia.value) {
|
|
296
|
+
console.log("STREAM", userMedia.value, model.value.audioMuted, model.value.videoMuted)
|
|
297
|
+
userMedia.value.getAudioTracks().forEach(track => track.enabled = !model.value.audioMuted)
|
|
298
|
+
userMedia.value.getVideoTracks().forEach(track => track.enabled = !model.value.videoMuted)
|
|
299
|
+
}
|
|
300
|
+
}, { immediate: true })
|
|
328
301
|
|
|
329
302
|
|
|
330
303
|
const permissionsDialog = ref({ })
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<Button v-if="!model.audioInput?.deviceId"
|
|
3
|
+
@click="emit('disabledAudioClick')" raised
|
|
4
|
+
icon="bx bx-microphone-off" severity="secondary" rounded v-ripple />
|
|
5
|
+
<Button v-else-if="audioInputMuted" @click="audioInputMuted = false" raised
|
|
6
|
+
icon="bx bx-microphone-off" severity="danger" rounded v-ripple />
|
|
7
|
+
<Button v-else @click="audioInputMuted = true" raised
|
|
8
|
+
icon="bx bx-microphone" severity="success" rounded v-ripple />
|
|
9
|
+
</template>
|
|
10
|
+
|
|
11
|
+
<script setup>
|
|
12
|
+
import { defineModel, defineEmits, computed } from 'vue'
|
|
13
|
+
|
|
14
|
+
const model = defineModel({
|
|
15
|
+
required: true,
|
|
16
|
+
type: Object,
|
|
17
|
+
properties: {
|
|
18
|
+
audioInput: {
|
|
19
|
+
type: Object
|
|
20
|
+
},
|
|
21
|
+
audioOutput: {
|
|
22
|
+
type: Object
|
|
23
|
+
},
|
|
24
|
+
videoInput: {
|
|
25
|
+
type: Object
|
|
26
|
+
},
|
|
27
|
+
audioMuted: {
|
|
28
|
+
type: Boolean
|
|
29
|
+
},
|
|
30
|
+
videoMuted: {
|
|
31
|
+
type: Boolean
|
|
32
|
+
},
|
|
33
|
+
userMedia: {
|
|
34
|
+
type: Object
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
})
|
|
38
|
+
|
|
39
|
+
const emit = defineEmits(['disabledAudioClick'])
|
|
40
|
+
|
|
41
|
+
const audioInputMuted = computed({
|
|
42
|
+
get: () => model.value?.audioMuted,
|
|
43
|
+
set: (value) => model.value = {
|
|
44
|
+
...model.value,
|
|
45
|
+
audioMuted: value
|
|
46
|
+
}
|
|
47
|
+
})
|
|
48
|
+
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<style scoped>
|
|
52
|
+
|
|
53
|
+
</style>
|
package/index.js
CHANGED
|
@@ -2,8 +2,10 @@ import Debugger from './front/src/components/Debugger.vue'
|
|
|
2
2
|
import DeviceSelect from './front/src/components/DeviceSelect.vue'
|
|
3
3
|
import PermissionsDialog from './front/src/components/PermissionsDialog.vue'
|
|
4
4
|
import VolumeIndicator from './front/src/components/VolumeIndicator.vue'
|
|
5
|
+
import CameraButton from './front/src/components/CameraButton.vue'
|
|
6
|
+
import MicrophoneButton from './front/src/components/MicrophoneButton.vue'
|
|
5
7
|
|
|
6
|
-
export { Debugger, DeviceSelect, PermissionsDialog, VolumeIndicator }
|
|
8
|
+
export { Debugger, DeviceSelect, PermissionsDialog, VolumeIndicator, CameraButton, MicrophoneButton }
|
|
7
9
|
|
|
8
10
|
import { createPeer } from './front/src/components/Peer.js'
|
|
9
11
|
import { createPeerConnection } from './front/src/components/PeerConnection.js'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@live-change/peer-connection-frontend",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.47",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"memDev": "dotenvx run -- node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
|
|
6
6
|
"localDevInit": "rm tmp.db; dotenvx run -- node server/start.js localDev --enableSessions --initScript ./init.js",
|
|
@@ -22,19 +22,19 @@
|
|
|
22
22
|
},
|
|
23
23
|
"type": "module",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@live-change/cli": "^0.8.
|
|
26
|
-
"@live-change/dao": "^0.8.
|
|
27
|
-
"@live-change/dao-vue3": "^0.8.
|
|
28
|
-
"@live-change/dao-websocket": "^0.8.
|
|
29
|
-
"@live-change/framework": "^0.8.
|
|
30
|
-
"@live-change/password-authentication-service": "^0.8.
|
|
31
|
-
"@live-change/secret-code-service": "^0.8.
|
|
32
|
-
"@live-change/secret-link-service": "^0.8.
|
|
33
|
-
"@live-change/session-service": "^0.8.
|
|
34
|
-
"@live-change/user-frontend": "^0.8.
|
|
35
|
-
"@live-change/user-service": "^0.8.
|
|
36
|
-
"@live-change/vue3-components": "^0.8.
|
|
37
|
-
"@live-change/vue3-ssr": "^0.8.
|
|
25
|
+
"@live-change/cli": "^0.8.47",
|
|
26
|
+
"@live-change/dao": "^0.8.47",
|
|
27
|
+
"@live-change/dao-vue3": "^0.8.47",
|
|
28
|
+
"@live-change/dao-websocket": "^0.8.47",
|
|
29
|
+
"@live-change/framework": "^0.8.47",
|
|
30
|
+
"@live-change/password-authentication-service": "^0.8.47",
|
|
31
|
+
"@live-change/secret-code-service": "^0.8.47",
|
|
32
|
+
"@live-change/secret-link-service": "^0.8.47",
|
|
33
|
+
"@live-change/session-service": "^0.8.47",
|
|
34
|
+
"@live-change/user-frontend": "^0.8.47",
|
|
35
|
+
"@live-change/user-service": "^0.8.47",
|
|
36
|
+
"@live-change/vue3-components": "^0.8.47",
|
|
37
|
+
"@live-change/vue3-ssr": "^0.8.47",
|
|
38
38
|
"@vueuse/core": "^10.11.0",
|
|
39
39
|
"boxicons": "^2.1.4",
|
|
40
40
|
"codeceptjs-assert": "^0.0.5",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"vue3-scroll-border": "0.1.6"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
|
-
"@live-change/codeceptjs-helper": "^0.8.
|
|
57
|
+
"@live-change/codeceptjs-helper": "^0.8.47",
|
|
58
58
|
"codeceptjs": "^3.5.12",
|
|
59
59
|
"generate-password": "1.7.1",
|
|
60
60
|
"playwright": "^1.41.2",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"author": "Michał Łaszczewski <michal@laszczewski.pl>",
|
|
66
66
|
"license": "BSD-3-Clause",
|
|
67
67
|
"description": "",
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "3c89e50f21b7bbf2f16d7f566045eeead7bb0a25"
|
|
69
69
|
}
|