sam_oneal/fx_cast
1
0
Fork 0
mirror of https://github.com/hensm/fx_cast.git synced 2026-06-08 08:39:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add splash/idle screen to receiver application

Browse Source
This commit is contained in:
hensm
2019-09-26 01:05:36 +01:00
parent 7ad041bb85
commit e1b15a12a2
3 changed files with 110 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/receiver/index.css
View File

@@ -1,9 +1,67 @@
html,
body {
align-items: center;
display: flex;
justify-content: center;
height: 100%;
width: 100%;
}
#media {
body {
margin: initial;
font-family: sans-serif;
}
@keyframes splash-loading {
20% { content: "."; }
50% { content: ".."; }
80% { content: "..."; }
}
.splash {
align-items: center;
background-color: #2a2a2e;
color: white;
display: flex;
flex-direction: column;
height: 100%;
justify-content: center;
left: 0;
position: fixed;
top: 0;
transition: 250ms ease;
transition-property: transform, opacity;
width: 100%;
z-index: 1;
}
.splash.splash--disabled {
opacity: 0;
transform: scale(2);
}
.splash__title {
font-size: 60px;
font-weight: 500;
margin-bottom: 20px;
}
.splash__action {
position: relative;
}
.splash__action::after {
content: "";
display: block;
position: absolute;
right: 0;
top: 0;
transform: translateX(100%);
}
.splash__action::after {
animation: splash-loading 1500ms ease infinite;
}
.media {
max-height: 100vh;
max-width: 100vw;
}

12
docs/receiver/index.html
View File

@@ -1,10 +1,14 @@
<html>
<html manifest="cache.manifest">
<head>
<script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
<link rel="stylesheet" href="index.css">
<script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js" defer></script>
<script src="index.js" defer></script>
</head>
<body>
<video id="media" autoplay></video>
<script src="index.js"></script>
<div class="splash">
<div class="splash__title">fx_cast</div>
<div class="splash__action">Waiting for connection</div>
</div>
<video class="media" autoplay></video>
</body>
</html>

71
docs/receiver/index.js
View File

@@ -1,20 +1,51 @@
"use strict";
const NAMESPACE = "urn:x-cast:fx_cast";
const castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
const mediaElement = document.querySelector("#media");
const mediaElement = document.querySelector(".media");
const mediaManager = new cast.receiver.MediaManager(mediaElement);
mediaElement.height = window.innerHeight;
mediaElement.width = window.innerWidth;
let senderId;
const messageBus = castReceiverManager.getCastMessageBus(
NAMESPACE
"urn:x-cast:fx_cast"
, cast.receiver.CastMessageBus.MessageType.JSON);
messageBus.onMessage = async message => {
const { subject, data } = message.data;
senderId = message.senderId;
switch (subject) {
case "peerConnectionOffer": {
await pc.setRemoteDescription(data);
const desc = await pc.createAnswer();
await pc.setLocalDescription(desc);
messageBus.send(message.senderId, {
subject: "peerConnectionAnswer"
, data: desc
});
break;
}
case "iceCandidate": {
await pc.addIceCandidate(data);
break;
}
case "close": {
window.close();
break;
}
}
};
const pc = new RTCPeerConnection();
@@ -24,39 +55,17 @@ pc.addEventListener("icecandidate", ev => {
, data: ev.candidate
});
});
pc.addEventListener("addstream", ev => {
mediaElement.srcObject = ev.stream;
mediaElement.webkitRequestFullscreen();
const splash = document.querySelector(".splash");
splash.classList.add("splash--disabled");
});
messageBus.onMessage = async message => {
const { subject, data } = message.data;
senderId = message.senderId;
switch (subject) {
case "peerConnectionOffer":
await pc.setRemoteDescription(data);
const desc = await pc.createAnswer();
await pc.setLocalDescription(desc);
messageBus.send(message.senderId, {
subject: "peerConnectionAnswer"
, data: desc
});
break;
case "iceCandidate":
console.log(data);
await pc.addIceCandidate(data);
break;
case "close":
window.close();
break;
}
};
// TODO: Fix APi shim to make this work
// TODO: Fix API shim to make this work
castReceiverManager.onSenderDisconnected = ev => {
if (castReceiverManager.getSenders().length <= 0) {
window.close();