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 { body {
align-items: center; height: 100%;
display: flex; width: 100%;
justify-content: center;
} }
#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-height: 100vh;
max-width: 100vw; max-width: 100vw;
} }

12
docs/receiver/index.html
View File

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

71
docs/receiver/index.js
View File

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