diff --git a/src/helpers/useSession.js b/src/helpers/useSession.js
index 6a0fdbf..4676fb9 100644
--- a/src/helpers/useSession.js
+++ b/src/helpers/useSession.js
@@ -12,7 +12,8 @@ function useSession(
onPeerDisconnected,
onPeerData,
onPeerTrackAdded,
- onPeerTrackRemoved
+ onPeerTrackRemoved,
+ onPeerError
) {
useEffect(() => {
socket.emit("join party", partyId);
@@ -50,9 +51,10 @@ function useSession(
onPeerDisconnected && onPeerDisconnected(id);
});
- peer.on("error", (err) => {
+ peer.on("error", (error) => {
onPeerDisconnected && onPeerDisconnected(id);
- console.error("error", err);
+ onPeerError && onPeerError(error);
+ console.error(error);
});
setPeers((prevPeers) => ({
@@ -104,6 +106,7 @@ function useSession(
onPeerData,
onPeerTrackAdded,
onPeerTrackRemoved,
+ onPeerError,
]);
return { peers, socket };
diff --git a/src/routes/FAQ.js b/src/routes/FAQ.js
index 0de3499..cbe5eae 100644
--- a/src/routes/FAQ.js
+++ b/src/routes/FAQ.js
@@ -61,6 +61,51 @@ function FAQ() {
{" "}
on the Mozilla Developer Network.
+
+ Connection Failed
+
+
+ Ice connection failed / Connection failed.
+
+
+ Owlbear Rodeo uses peer to peer connections to send data between the
+ players. Specifically the{" "}
+
+ WebRTC API
+ {" "}
+ is used. WebRTC allows the sending of two types of data, the first is
+ media such as a camera or microphone and the second is raw data such
+ as chat messages or in this case the state of the game map. As
+ at this time we don't support voice or video chat as such we only use
+ the raw data feature of WebRTC. This however can lead to connection
+ issues, specifically with the Safari web browser and connecting
+ between two devices on the same network. This is due a decision made
+ by the Safari team to only allow fully peer to peer connections when
+ the user grants camera permission to the website. Unfortunately that
+ means in order to fully support Safari we would need to ask for camera
+ permission even though we wouldn't be using it. To us that is a bad
+ user experience so we have decided against it at this time.
+ The good news is that Safari will still work if the two devices are
+ connected to a seperate network as we make use of{" "}
+
+ TURN
+ {" "}
+ servers which will handle the IP sharing and are not blocked by
+ Safari.{" "}
+
+ So if you're seeing errors and are on the same network as the other
+ person if possible switch to seperate networks and try again.
+
+ . For more information about Safari's restrictions on WebRTC see this{" "}
+
+ bug report
+ {" "}
+ on the Webkit site or this{" "}
+
+ blog post
+
+ .
+
diff --git a/src/routes/Game.js b/src/routes/Game.js
index 6ba6320..8c98529 100644
--- a/src/routes/Game.js
+++ b/src/routes/Game.js
@@ -1,5 +1,5 @@
import React, { useState, useRef, useEffect, useCallback } from "react";
-import { Flex } from "theme-ui";
+import { Flex, Box, Text, Link } from "theme-ui";
import { useParams } from "react-router-dom";
import { omit, isStreamStopped } from "../helpers/shared";
@@ -10,6 +10,7 @@ import { getRandomMonster } from "../helpers/monsters";
import Party from "../components/Party";
import Tokens from "../components/Tokens";
import Map from "../components/Map";
+import Banner from "../components/Banner";
function Game() {
const { id: gameId } = useParams();
@@ -20,7 +21,8 @@ function Game() {
handlePeerDisconnected,
handlePeerData,
handlePeerTrackAdded,
- handlePeerTrackRemoved
+ handlePeerTrackRemoved,
+ handlePeerError
);
const [mapSource, setMapSource] = useState(null);
@@ -118,6 +120,11 @@ function Game() {
setPartyNicknames((prevNicknames) => omit(prevNicknames, [disconnectedId]));
}
+ const [peerError, setPeerError] = useState(null);
+ function handlePeerError(error) {
+ setPeerError(error.message || "Unknown Error Occurred.");
+ }
+
function handlePeerTrackAdded({ id, stream: remoteStream }) {
setPartyStreams((prevStreams) => ({
...prevStreams,
@@ -183,31 +190,40 @@ function Game() {
}, [stream, peers, handleStreamEnd]);
return (
-
-
-
-
-
+ <>
+
+
+
+
+
+
-
+ setPeerError(null)}>
+
+
+ {peerError} See FAQ for more information.
+
+
+
+ >
);
}