Migrating EnableCameraScene to Svelte
This commit is contained in:
David Négrier
parent
c7b3e3cd44
commit
bf7083effc
10 changed files with 274 additions and 326 deletions
|
|
@ -1,12 +1,22 @@
|
|||
<script lang="typescript">
|
||||
import {Game} from "../../Phaser/Game/Game";
|
||||
import {EnableCameraScene} from "../../Phaser/Login/EnableCameraScene";
|
||||
import {localStreamStore} from "../../Stores/MediaStore";
|
||||
import {EnableCameraScene, EnableCameraSceneName} from "../../Phaser/Login/EnableCameraScene";
|
||||
import {
|
||||
audioConstraintStore,
|
||||
cameraListStore,
|
||||
localStreamStore,
|
||||
microphoneListStore,
|
||||
videoConstraintStore
|
||||
} from "../../Stores/MediaStore";
|
||||
import {onDestroy} from "svelte";
|
||||
import HorizontalSoundMeterWidget from "./HorizontalSoundMeterWidget.svelte";
|
||||
import cinemaCloseImg from "../images/cinema-close.svg";
|
||||
|
||||
export let game: Game;
|
||||
let selectedCamera : string|null = null;
|
||||
let selectedMicrophone : string|null = null;
|
||||
|
||||
const enableCameraScene = game.scene.scenes.find((scene) => scene instanceof EnableCameraScene);
|
||||
const enableCameraScene = game.scene.getScene(EnableCameraSceneName);
|
||||
|
||||
function submit() {
|
||||
enableCameraScene.login();
|
||||
|
|
@ -23,28 +33,84 @@
|
|||
}
|
||||
}
|
||||
|
||||
let stream : MediaStream|null;
|
||||
let stream: MediaStream | null;
|
||||
|
||||
const unsubscribe = localStreamStore.subscribe(value => {
|
||||
if (value.type === 'success') {
|
||||
stream = value.stream;
|
||||
|
||||
if (stream !== null) {
|
||||
const videoTracks = stream.getVideoTracks();
|
||||
if (videoTracks.length > 0) {
|
||||
selectedCamera = videoTracks[0].getSettings().deviceId;
|
||||
}
|
||||
const audioTracks = stream.getAudioTracks();
|
||||
if (audioTracks.length > 0) {
|
||||
selectedMicrophone = audioTracks[0].getSettings().deviceId;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
stream = null;
|
||||
selectedCamera = null;
|
||||
selectedMicrophone = null;
|
||||
}
|
||||
});
|
||||
|
||||
onDestroy(unsubscribe);
|
||||
|
||||
function normalizeDeviceName(label: string): string {
|
||||
// remove text in parenthesis
|
||||
return label.replace(/\([^()]*\)/g, '').trim();
|
||||
}
|
||||
|
||||
function selectCamera() {
|
||||
videoConstraintStore.setDeviceId(selectedCamera);
|
||||
}
|
||||
|
||||
function selectMicrophone() {
|
||||
audioConstraintStore.setDeviceId(selectedMicrophone);
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<form class="enableCameraScene" on:submit|preventDefault={submit}>
|
||||
<section class="title text-center">
|
||||
<section class="text-center">
|
||||
<h2>Turn on your camera and microphone</h2>
|
||||
</section>
|
||||
<div id="webRtcSetup" class="webrtcsetup">
|
||||
<img class="background-img" src="resources/logos/cinema-close.svg" alt="" class:hide={$localStreamStore.stream}>
|
||||
<video id="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted></video>
|
||||
<img class="background-img" src={cinemaCloseImg} alt="" class:hide={$localStreamStore.stream}>
|
||||
<video id="myCamVideoSetup" use:srcObject={$localStreamStore.stream} autoplay muted class:hide={!$localStreamStore.stream}></video>
|
||||
</div>
|
||||
<HorizontalSoundMeterWidget stream={stream}></HorizontalSoundMeterWidget>
|
||||
|
||||
<section class="selectWebcamForm">
|
||||
|
||||
{#if $cameraListStore.length > 1 }
|
||||
<div class="nes-select">
|
||||
<select bind:value={selectedCamera} on:change={selectCamera}>
|
||||
{#each $cameraListStore as camera}
|
||||
<option value={camera.deviceId}>
|
||||
{normalizeDeviceName(camera.label)}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if $microphoneListStore.length > 1 }
|
||||
<div class="nes-select">
|
||||
<select bind:value={selectedMicrophone} on:change={selectMicrophone}>
|
||||
{#each $microphoneListStore as microphone}
|
||||
<option value={microphone.deviceId}>
|
||||
{normalizeDeviceName(microphone.label)}
|
||||
</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
<!--<section class="text-center">
|
||||
<video id="myCamVideoSetup" autoplay muted></video>
|
||||
|
|
@ -73,19 +139,37 @@
|
|||
/*max-height: 48vh;
|
||||
width: 42vw;
|
||||
max-width: 300px;*/
|
||||
overflow: hidden;
|
||||
|
||||
section.title {
|
||||
/*section.title {
|
||||
position: absolute;
|
||||
top: 1vh;
|
||||
width: 100%;
|
||||
}*/
|
||||
|
||||
section.selectWebcamForm {
|
||||
margin-top: 3vh;
|
||||
margin-bottom: 3vh;
|
||||
min-height: 10vh;
|
||||
width: 50%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
select {
|
||||
font-family: "Press Start 2P";
|
||||
margin-top: 1vh;
|
||||
margin-bottom: 1vh;
|
||||
|
||||
option {
|
||||
font-family: "Press Start 2P";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.action{
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 85vh;
|
||||
/*position: absolute;
|
||||
top: 85vh;*/
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -103,29 +187,31 @@
|
|||
}
|
||||
|
||||
.webrtcsetup{
|
||||
position: absolute;
|
||||
/*position: absolute;
|
||||
top: 140px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
right: 0;*/
|
||||
margin-top: 2vh;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
height: 50%;
|
||||
width: 50%;
|
||||
height: 28.125vw;
|
||||
width: 50vw;
|
||||
border: white 6px solid;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img.background-img {
|
||||
position: relative;
|
||||
display: block;
|
||||
/*position: relative;*/
|
||||
/*display: block;*/
|
||||
width: 40%;
|
||||
height: 60%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
/*height: 60%;*/
|
||||
/*top: 50%;*/
|
||||
/*transform: translateY(-50%);*/
|
||||
}
|
||||
|
||||
img.hide {
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue