@live-change/peer-connection-frontend 0.8.44 → 0.8.46
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.
- package/front/src/components/CameraButton.vue +53 -0
- package/front/src/components/DeviceSelect.vue +20 -43
- package/front/src/components/MicrophoneButton.vue +53 -0
- package/front/src/components/Peer.js +1 -0
- package/front/src/components/PermissionsDialog.vue +6 -3
- package/index.js +3 -1
- package/package.json +16 -16
|
@@ -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">
|
|
@@ -142,12 +127,18 @@
|
|
|
142
127
|
|
|
143
128
|
<script setup>
|
|
144
129
|
|
|
145
|
-
import
|
|
130
|
+
import Button from 'primevue/button'
|
|
131
|
+
import Dropdown from 'primevue/dropdown'
|
|
132
|
+
import PermissionsDialog from './PermissionsDialog.vue'
|
|
133
|
+
import VolumeIndicator from './VolumeIndicator.vue'
|
|
134
|
+
|
|
135
|
+
import { defineProps, defineModel, computed, ref, toRefs, onMounted, watch, watchEffect } from 'vue'
|
|
146
136
|
import { useInterval, useEventListener } from "@vueuse/core"
|
|
147
137
|
import { getUserMedia as getUserMediaNative, getDisplayMedia as getDisplayMediaNative, isUserMediaPermitted }
|
|
148
138
|
from "./userMedia.js"
|
|
149
|
-
import
|
|
150
|
-
import
|
|
139
|
+
import MicrophoneButton from './MicrophoneButton.vue'
|
|
140
|
+
import CameraButton from './CameraButton.vue'
|
|
141
|
+
|
|
151
142
|
|
|
152
143
|
const props = defineProps({
|
|
153
144
|
audioInputRequest: {
|
|
@@ -194,6 +185,8 @@
|
|
|
194
185
|
}
|
|
195
186
|
})
|
|
196
187
|
|
|
188
|
+
globalThis.deviceSelectModel = model
|
|
189
|
+
|
|
197
190
|
const devices = ref([])
|
|
198
191
|
async function updateDevices() {
|
|
199
192
|
console.log("UPDATE DEVICES")
|
|
@@ -209,22 +202,6 @@
|
|
|
209
202
|
const audioOutputs = computed(() => devices.value.filter(device => device.kind === 'audiooutput'))
|
|
210
203
|
const videoInputs = computed(() => devices.value.filter(device => device.kind === 'videoinput'))
|
|
211
204
|
|
|
212
|
-
const audioInputMuted = computed({
|
|
213
|
-
get: () => model.value?.audioMuted,
|
|
214
|
-
set: (value) => model.value = {
|
|
215
|
-
...model.value,
|
|
216
|
-
audioMuted: value
|
|
217
|
-
}
|
|
218
|
-
})
|
|
219
|
-
|
|
220
|
-
const videoInputMuted = computed({
|
|
221
|
-
get: () => model.value?.videoMuted,
|
|
222
|
-
set: (value) => model.value = {
|
|
223
|
-
...model.value,
|
|
224
|
-
videoMuted: value
|
|
225
|
-
}
|
|
226
|
-
})
|
|
227
|
-
|
|
228
205
|
watch(audioInputs, (value) => {
|
|
229
206
|
model.value = {
|
|
230
207
|
...model.value,
|
|
@@ -314,13 +291,13 @@
|
|
|
314
291
|
}
|
|
315
292
|
})
|
|
316
293
|
|
|
317
|
-
|
|
318
|
-
(
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
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 })
|
|
324
301
|
|
|
325
302
|
|
|
326
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>
|
|
@@ -54,14 +54,17 @@
|
|
|
54
54
|
</template>
|
|
55
55
|
|
|
56
56
|
<script setup>
|
|
57
|
+
|
|
58
|
+
import Dialog from 'primevue/dialog'
|
|
59
|
+
|
|
60
|
+
import { defineProps, defineModel, defineEmits, toRefs, ref, computed, watch } from 'vue'
|
|
61
|
+
import { useInterval } from '@vueuse/core'
|
|
62
|
+
|
|
57
63
|
const permissionIcons = {
|
|
58
64
|
camera: 'pi pi-camera',
|
|
59
65
|
microphone: 'pi pi-microphone'
|
|
60
66
|
}
|
|
61
67
|
|
|
62
|
-
import { defineProps, defineModel, defineEmits, toRefs, ref, computed, watch } from 'vue'
|
|
63
|
-
import { useInterval } from '@vueuse/core'
|
|
64
|
-
|
|
65
68
|
const props = defineProps({
|
|
66
69
|
title: {
|
|
67
70
|
type: String
|
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.46",
|
|
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.46",
|
|
26
|
+
"@live-change/dao": "^0.8.46",
|
|
27
|
+
"@live-change/dao-vue3": "^0.8.46",
|
|
28
|
+
"@live-change/dao-websocket": "^0.8.46",
|
|
29
|
+
"@live-change/framework": "^0.8.46",
|
|
30
|
+
"@live-change/password-authentication-service": "^0.8.46",
|
|
31
|
+
"@live-change/secret-code-service": "^0.8.46",
|
|
32
|
+
"@live-change/secret-link-service": "^0.8.46",
|
|
33
|
+
"@live-change/session-service": "^0.8.46",
|
|
34
|
+
"@live-change/user-frontend": "^0.8.46",
|
|
35
|
+
"@live-change/user-service": "^0.8.46",
|
|
36
|
+
"@live-change/vue3-components": "^0.8.46",
|
|
37
|
+
"@live-change/vue3-ssr": "^0.8.46",
|
|
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.46",
|
|
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": "a86f309b65b5d5c37d31ddb6b8ef0f53d1f6abaa"
|
|
69
69
|
}
|