20 |
28 | );
29 | });
30 |
--------------------------------------------------------------------------------
/web/src/components/reusable/TalkyStarter.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from "react";
2 |
3 | import "./TalkyStarter.css";
4 | import { ROOM_ID_PREFIX_LEN } from "../../network/common";
5 |
6 | const TalkyStarter = memo<{
7 | roomId: string;
8 | uniqueId?: string;
9 | }>(({ roomId, uniqueId }) => {
10 | const talkyUrl = `https://talky.io/${roomId.slice(0, ROOM_ID_PREFIX_LEN)}_${
11 | uniqueId || "default"
12 | }`;
13 |
14 | return (
15 | Unrecoverable error occurred.
21 | {err && ( 22 |23 | {err.name}: {err.message} 24 |
25 | )} 26 |Will auto reload in {waitSec} sec.
27 |
16 |
22 | );
23 | });
24 |
25 | export default TalkyStarter;
26 |
--------------------------------------------------------------------------------
/web/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "downlevelIteration": true,
6 | "allowJs": true,
7 | "skipLibCheck": true,
8 | "esModuleInterop": true,
9 | "allowSyntheticDefaultImports": true,
10 | "strict": true,
11 | "forceConsistentCasingInFileNames": true,
12 | "module": "esnext",
13 | "moduleResolution": "node",
14 | "resolveJsonModule": true,
15 | "isolatedModules": true,
16 | "noEmit": true,
17 | "jsx": "react-jsx",
18 | "types": [
19 | "vite/client",
20 | "w3c-image-capture",
21 | "jest"
22 | ],
23 | "noFallthroughCasesInSwitch": true
24 | },
25 | "include": [
26 | "src"
27 | ]
28 | }
29 |
--------------------------------------------------------------------------------
/web/src/components/reusable/GitHubCorner.css:
--------------------------------------------------------------------------------
1 | .GitHubCorner-container:hover .GitHubCorner-octo-arm {
2 | animation: GitHubCorner-octocat-wave 560ms ease-in-out;
3 | }
4 |
5 | @keyframes GitHubCorner-octocat-wave {
6 | 0%,
7 | 100% {
8 | transform: rotate(0);
9 | }
10 | 20%,
11 | 60% {
12 | transform: rotate(-25deg);
13 | }
14 | 40%,
15 | 80% {
16 | transform: rotate(10deg);
17 | }
18 | }
19 |
20 | @media (max-width: 500px) {
21 | .GitHubCorner-container:hover .GitHubCorner-octo-arm {
22 | animation: none;
23 | }
24 | .GitHubCorner-octo-arm {
25 | animation: GitHubCorner-octocat-wave 560ms ease-in-out;
26 | }
27 | }
28 |
29 | @media (max-width: 300px) {
30 | .GitHubCorner-container {
31 | display: none;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/web/src/utils/types.ts:
--------------------------------------------------------------------------------
1 | export const isObject = (x: unknown): x is Record
17 |
18 | Open Talky
19 |
20 |
21 |
26 |
27 |
32 |
33 | ));
34 |
--------------------------------------------------------------------------------
/web/src/utils/base64.ts:
--------------------------------------------------------------------------------
1 | export const encodeBase64Sync = (data: Uint8Array) => {
2 | const base64 = btoa(String.fromCharCode(...data));
3 | return base64;
4 | };
5 |
6 | export const decodeBase64Sync = (base64: string) => {
7 | const binaryString = atob(base64);
8 | const data = new Uint8Array(
9 | [].map.call(binaryString, (c: string) =>
10 | c.charCodeAt(0)
11 | ) as unknown as ArrayBufferLike
12 | );
13 | return data;
14 | };
15 |
16 | export const encodeBase64Async = (data: Uint8Array) =>
17 | new Promise
35 |
37 | );
38 | });
39 |
40 | export default SingleRoom;
41 |
--------------------------------------------------------------------------------
/web/src/components/reusable/FaceCard.css:
--------------------------------------------------------------------------------
1 | .FaceCard-container {
2 | position: relative;
3 | width: 36px;
4 | height: 36px;
5 | overflow: hidden;
6 | }
7 |
8 | .FaceCard-photo {
9 | display: block;
10 | width: 36px;
11 | height: 36px;
12 | }
13 |
14 | .FaceCard-name {
15 | position: absolute;
16 | top: 1px;
17 | left: 1px;
18 | color: #f5f5f5;
19 | font-size: 0.5rem;
20 | line-height: 0.5rem;
21 | font-family: sans-serif;
22 | text-shadow: 1px 1px 0 #4848487a;
23 | cursor: default;
24 | }
25 |
26 | .FaceCard-mesg {
27 | position: absolute;
28 | bottom: 2px;
29 | left: 1px;
30 | color: white;
31 | font-size: 0.5rem;
32 | line-height: 0.5rem;
33 | font-family: sans-serif;
34 | }
35 |
36 | .FaceCard-updated {
37 | position: absolute;
38 | bottom: 1px;
39 | right: 1px;
40 | color: #f5f5f5;
41 | font-size: 0.5rem;
42 | line-height: 0.5rem;
43 | font-family: sans-serif;
44 | text-shadow: 1px 1px 0 #4848487a;
45 | cursor: default;
46 | }
47 |
48 | .FaceCard-mic-speaker-icons {
49 | position: absolute;
50 | bottom: 1px;
51 | right: 1px;
52 | font-size: 0.5rem;
53 | line-height: 0.5rem;
54 | cursor: default;
55 | }
56 |
--------------------------------------------------------------------------------
/web/src/components/reusable/Landing.css:
--------------------------------------------------------------------------------
1 | .Landing-container {
2 | display: flex;
3 | flex-direction: column;
4 | align-items: center;
5 | }
6 |
7 | .Landing-container img {
8 | max-width: 100vw;
9 | max-height: 40vh;
10 | }
11 |
12 | .Landing-features {
13 | display: grid;
14 | grid-gap: 1rem;
15 | padding: 1rem;
16 | grid-template-columns: repeat(3, 1fr);
17 | margin-top: 2.5rem;
18 | }
19 |
20 | @media (max-width: 480px) {
21 | .Landing-features {
22 | grid-template-columns: 1fr;
23 | }
24 | }
25 |
26 | .Landing-features > div {
27 | border: orange 3px dashed;
28 | border-radius: 3px;
29 | background-color: oldlace;
30 | background-radius: 3px;
31 | padding: 0.8rem;
32 | }
33 |
34 | .Landing-features h1 {
35 | margin: 0 0 0.5rem 0;
36 | font-size: 1.2rem;
37 | }
38 |
39 | .Landing-features p {
40 | margin: 0;
41 | font-size: 0.8rem;
42 | }
43 |
44 | .Landing-howto {
45 | padding: 1rem;
46 | }
47 |
48 | .Landing-howto h2 {
49 | font-size: 1.2rem;
50 | }
51 |
52 | .Landing-howto ol {
53 | margin: 1rem 3rem 2rem 1rem;
54 | }
55 |
56 | .Landing-howto li {
57 | padding-top: 1rem;
58 | padding-bottom: 1rem;
59 | line-height: 1.5;
60 | }
61 |
--------------------------------------------------------------------------------
/web/src/components/reusable/LinkOpener.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useEffect, useState } from "react";
2 |
3 | import "./LinkOpener.css";
4 | import { generateExcalidrawURL } from "../../utils/excalidraw";
5 |
6 | const LinkOpener = memo<{
7 | roomId: string;
8 | }>(({ roomId }) => {
9 | const [excalidrawUrl, setExcalidrawUrl] = useState
23 |
38 | );
39 | });
40 |
41 | export default LinkOpener;
42 |
--------------------------------------------------------------------------------
/libopus/Makefile:
--------------------------------------------------------------------------------
1 | DIST_FILE=../web/public/libopus.js
2 |
3 | OPTS=-O1 --memory-init-file 0 -s NO_FILESYSTEM=1 -s MODULARIZE=1 -s EXPORT_ES6=1 -s USE_ES6_IMPORT_META=0 -s WASM_ASYNC_COMPILATION=0 -s SINGLE_FILE=1 -s EXPORTED_FUNCTIONS="['_malloc', '_free', '_opus_encoder_create', '_opus_encode_float', '_opus_decoder_create', '_opus_decode_float', '_speex_resampler_init', '_speex_resampler_process_interleaved_float', '_speex_resampler_destroy']"
4 |
5 | LIBOPUS=opus/.libs/libopus.a
6 |
7 | LIBSPEEXDSP=speexdsp/libspeexdsp/.libs/libspeexdsp.a
8 |
9 | all: $(DIST_FILE)
10 |
11 | $(LIBOPUS):
12 | cd opus; ./autogen.sh
13 | cd opus; emconfigure ./configure --disable-extra-programs --disable-doc --disable-intrinsics
14 | cd opus; sed -i~ 's/-fstack-protector-strong//g' Makefile
15 | cd opus; emmake make
16 | cd opus; rm a.out*
17 |
18 | $(LIBSPEEXDSP):
19 | cd speexdsp; ./autogen.sh
20 | cd speexdsp; emconfigure ./configure --disable-examples
21 | cd speexdsp; emmake make
22 | cd speexdsp; rm a.out*
23 |
24 | $(DIST_FILE): $(LIBOPUS) $(LIBSPEEXDSP) Makefile
25 | emcc $(OPTS) -o $(DIST_FILE) $(LIBOPUS) $(LIBSPEEXDSP)
26 | echo "\n/*" >> $(DIST_FILE)
27 | cat opus/COPYING >> $(DIST_FILE)
28 | echo "\n" >> $(DIST_FILE)
29 | cat speexdsp/COPYING >> $(DIST_FILE)
30 | echo "*/" >> $(DIST_FILE)
31 |
--------------------------------------------------------------------------------
/.github/workflows/cd.yml:
--------------------------------------------------------------------------------
1 | name: CD
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 |
8 | jobs:
9 | deploy_web:
10 | runs-on: ubuntu-latest
11 | steps:
12 | - uses: actions/checkout@v2
13 |
14 | - name: Setup Node
15 | uses: actions/setup-node@v1
16 | with:
17 | node-version: '14.x'
18 |
19 | - name: Get yarn cache
20 | id: yarn-cache
21 | run: echo "::set-output name=dir::$(yarn cache dir)"
22 |
23 | - name: Cache dependencies
24 | uses: actions/cache@v1
25 | with:
26 | path: ${{ steps.yarn-cache.outputs.dir }}
27 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
28 | restore-keys: |
29 | ${{ runner.os }}-yarn-
30 |
31 | - name: Install dependencies (web)
32 | run: (cd web; yarn install)
33 |
34 | - name: Test (web)
35 | run: (cd web; yarn test)
36 |
37 | - name: Copy to dist (web)
38 | run: |
39 | (cd web; CI=false yarn build)
40 | mkdir -p web/dist/d
41 | cp -r web/build web/dist/d/`date '+%Y-%m-%d'`
42 |
43 | - name: Deploy (web)
44 | uses: peaceiris/actions-gh-pages@v3
45 | with:
46 | github_token: ${{ secrets.GITHUB_TOKEN }}
47 | publish_dir: ./web/dist
48 | keep_files: true
49 |
--------------------------------------------------------------------------------
/web/src/utils/storage.ts:
--------------------------------------------------------------------------------
1 | type StringItemName =
2 | | "nickname"
3 | | "avatar_img"
4 | | "take_photo"
5 | | "faceimage_video_device_id"
6 | | "faceimage_audio_device_id";
7 |
8 | type JsonItemName = "preference";
9 |
10 | export const setStringItem = (name: StringItemName, value: string) => {
11 | try {
12 | window.localStorage.setItem(name, value);
13 | } catch (e) {
14 | console.info("Failed to save string to localStorage", e);
15 | }
16 | };
17 |
18 | export const getStringItem = (name: StringItemName) => {
19 | try {
20 | return window.localStorage.getItem(name) || "";
21 | } catch (e) {
22 | // ignore
23 | return "";
24 | }
25 | };
26 |
27 | export const setJsonItem = (name: JsonItemName, value: unknown) => {
28 | try {
29 | window.localStorage.setItem(name, JSON.stringify(value));
30 | } catch (e) {
31 | console.info("Failed to save json to localStorage", e);
32 | }
33 | };
34 |
35 | export const getJsonItem = (name: JsonItemName): unknown | null => {
36 | try {
37 | return JSON.parse(window.localStorage.getItem(name) || "");
38 | } catch (e) {
39 | // ignore
40 | return null;
41 | }
42 | };
43 |
44 | export const removeItem = (name: StringItemName | JsonItemName) => {
45 | try {
46 | window.localStorage.removeItem(name);
47 | } catch (e) {
48 | // ignore
49 | }
50 | };
51 |
--------------------------------------------------------------------------------
/web/public/stream_viewer.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
13 |
39 |
40 |
41 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/web/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 |
24 | Room Link:
25 |
26 |
27 |
28 |
29 | Open App
30 |
31 |
32 |
33 |
34 | Open Excalidraw
35 |
36 |
37 |
49 |
50 |
61 | `;
62 |
--------------------------------------------------------------------------------
/web/src/media/capture.ts:
--------------------------------------------------------------------------------
1 | import { sleep } from "../utils/sleep";
2 |
3 | const captureImage = async (stream: MediaStream, track: MediaStreamTrack) => {
4 | if (typeof ImageCapture !== "undefined") {
5 | const imageCapture = new ImageCapture(track);
6 | await sleep(2000);
7 | let srcImg: ImageBitmap;
8 | try {
9 | const blob = await imageCapture.takePhoto();
10 | srcImg = await createImageBitmap(blob);
11 | } catch (e) {
12 | srcImg = await imageCapture.grabFrame();
13 | }
14 | const srcW = srcImg.width;
15 | const srcH = srcImg.height;
16 | return { srcImg, srcW, srcH };
17 | }
18 | const video = document.createElement("video");
19 | video.autoplay = true;
20 | video.setAttribute("playsinline", "");
21 | video.style.display = "block";
22 | video.style.width = "1px";
23 | video.style.height = "1px";
24 | video.style.position = "absolute";
25 | video.style.bottom = "0";
26 | document.body.appendChild(video);
27 | const dispose = () => {
28 | document.body.removeChild(video);
29 | };
30 | video.srcObject = stream;
31 | await sleep(2000);
32 | const srcImg = video;
33 | const srcW = video.videoWidth;
34 | const srcH = video.videoHeight;
35 | return { srcImg, srcW, srcH, dispose };
36 | };
37 |
38 | export const takePhoto = async (deviceId?: string, size = 72) => {
39 | const constraints = {
40 | video: {
41 | deviceId,
42 | width: 1280,
43 | height: 720,
44 | },
45 | };
46 | const stream = await navigator.mediaDevices.getUserMedia(constraints);
47 | const [track] = stream.getVideoTracks();
48 | const canvas = document.createElement("canvas");
49 | const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
50 | const dstW = size;
51 | const dstH = size;
52 | canvas.width = dstW;
53 | canvas.height = dstH;
54 | const { srcImg, srcW, srcH, dispose } = await captureImage(stream, track);
55 | const ratio = Math.max(dstW / srcW, dstH / srcH);
56 | const width = Math.min(srcW, dstW / ratio);
57 | const height = Math.min(srcH, dstH / ratio);
58 | const x = (srcW - width) / 2;
59 | const y = (srcH - height) / 2;
60 | ctx.drawImage(srcImg, x, y, width, height, 0, 0, dstW, dstH);
61 | if (dispose) {
62 | dispose();
63 | }
64 | track.stop();
65 | return canvas.toDataURL("image/jpeg");
66 | };
67 |
--------------------------------------------------------------------------------
/ckeditor5/webpack.config.js:
--------------------------------------------------------------------------------
1 | /**
2 | * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
3 | * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
4 | */
5 |
6 | 'use strict';
7 |
8 | /* eslint-env node */
9 |
10 | const path = require( 'path' );
11 | const webpack = require( 'webpack' );
12 | const { bundler, styles } = require( '@ckeditor/ckeditor5-dev-utils' );
13 | const CKEditorWebpackPlugin = require( '@ckeditor/ckeditor5-dev-webpack-plugin' );
14 | const TerserPlugin = require( 'terser-webpack-plugin' );
15 |
16 | module.exports = {
17 | devtool: 'source-map',
18 | performance: { hints: false },
19 |
20 | entry: path.resolve( __dirname, 'src', 'ckeditor.js' ),
21 |
22 | output: {
23 | // The name under which the editor will be exported.
24 | library: 'InlineEditor',
25 |
26 | path: path.resolve( __dirname, 'build' ),
27 | filename: 'ckeditor.js',
28 | libraryTarget: 'umd',
29 | libraryExport: 'default'
30 | },
31 |
32 | optimization: {
33 | minimizer: [
34 | new TerserPlugin( {
35 | sourceMap: true,
36 | terserOptions: {
37 | output: {
38 | // Preserve CKEditor 5 license comments.
39 | comments: /^!/
40 | }
41 | },
42 | extractComments: false
43 | } )
44 | ]
45 | },
46 |
47 | plugins: [
48 | new CKEditorWebpackPlugin( {
49 | // UI language. Language codes follow the https://en.wikipedia.org/wiki/ISO_639-1 format.
50 | // When changing the built-in language, remember to also change it in the editor's configuration (src/ckeditor.js).
51 | language: 'en',
52 | additionalLanguages: 'all'
53 | } ),
54 | new webpack.BannerPlugin( {
55 | banner: bundler.getLicenseBanner(),
56 | raw: true
57 | } )
58 | ],
59 |
60 | module: {
61 | rules: [
62 | {
63 | test: /\.svg$/,
64 | use: [ 'raw-loader' ]
65 | },
66 | {
67 | test: /\.css$/,
68 | use: [
69 | {
70 | loader: 'style-loader',
71 | options: {
72 | injectType: 'singletonStyleTag',
73 | attributes: {
74 | 'data-cke': true
75 | }
76 | }
77 | },
78 | {
79 | loader: 'postcss-loader',
80 | options: styles.getPostCssConfig( {
81 | themeImporter: {
82 | themePath: require.resolve( '@ckeditor/ckeditor5-theme-lark' )
83 | },
84 | minify: true
85 | } )
86 | }
87 | ]
88 | }
89 | ]
90 | }
91 | };
92 |
--------------------------------------------------------------------------------
/web/src/components/FaceList.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from "react";
2 | import { useSnapshot } from "valtio";
3 |
4 | import "./FaceList.css";
5 | import { Loading } from "./reusable/Loading";
6 | import { useFaceImages } from "../hooks/useFaceImages";
7 | import { FaceCard } from "./reusable/FaceCard";
8 | import { NG_IMAGE } from "../media/imagePresets";
9 | import { globalState } from "../states/global";
10 |
11 | // XXX temporary global state for debugging
12 | import { getRoomState } from "../states/roomMap";
13 |
14 | const setStatusMesg = (mesg: string) => {
15 | globalState.statusMesg = mesg;
16 | };
17 |
18 | const FaceList = memo(() => {
19 | const {
20 | roomId,
21 | userId,
22 | statusMesg,
23 | config: { avatar, nickname, takePhoto, videoDeviceId },
24 | preference: { photoSize },
25 | } = useSnapshot(globalState);
26 | const roomState = getRoomState(roomId, userId);
27 | const { userIdList } = useSnapshot(roomState);
28 | const { myImage, roomImages } = useFaceImages(
29 | roomId,
30 | userId,
31 | avatar,
32 | nickname,
33 | statusMesg,
34 | !takePhoto,
35 | false,
36 | false,
37 | false,
38 | videoDeviceId,
39 | photoSize
40 | );
41 | return (
42 | -
51 | ${sources.map(({ id, name, thumbnail }) => `
52 |
- 53 | 57 | 58 | `).join('')} 59 |
43 |
81 | );
82 | });
83 |
84 | export default FaceList;
85 |
--------------------------------------------------------------------------------
/web/src/components/reusable/MomentaryChat.css:
--------------------------------------------------------------------------------
1 | .MomentaryChat-container {
2 | -webkit-app-region: no-drag;
3 | overflow: hidden;
4 | display: grid;
5 | grid-template-rows: 1fr auto;
6 | width: 100%;
7 | height: 100%;
8 | }
9 |
10 | .MomentaryChat-editor {
11 | border: 1px solid lightgray;
12 | border-radius: 3px;
13 | overflow: scroll;
14 | }
15 |
16 | .MomentaryChat-editor::-webkit-scrollbar {
17 | display: none;
18 | }
19 |
20 | .MomentaryChat-list {
21 | list-style: none;
22 | margin: 0;
23 | padding-inline-start: 0;
24 | display: flex;
25 | flex-direction: column-reverse;
26 | overflow: scroll;
27 | }
28 |
29 | .MomentaryChat-list::-webkit-scrollbar {
30 | display: none;
31 | }
32 |
33 | .MomentaryChat-text {
34 | word-break: break-all;
35 | overflow: scroll;
36 | font-size: 0.7rem;
37 | padding: 0 0.545rem;
38 | }
39 |
40 | .MomentaryChat-editor {
41 | font-size: 0.7rem;
42 | }
43 |
44 | .MomentaryChat-text p,
45 | .MomentaryChat-editor p {
46 | margin: 0;
47 | }
48 |
49 | .MomentaryChat-text.ck-content .image {
50 | margin: 0.1rem auto;
51 | }
52 |
53 | .MomentaryChat-text.ck-content::-webkit-scrollbar {
54 | display: none;
55 | }
56 |
57 | .MomentaryChat-listPart:hover {
58 | background-color: #f5f5f5;
59 | }
60 |
61 | .MomentaryChat-nickname {
62 | font-size: 0.7rem;
63 | font-weight: bold;
64 | }
65 |
66 | .MomentaryChat-time {
67 | color: grey;
68 | margin-left: 1rem;
69 | font-size: 0.5rem;
70 | }
71 |
72 | .MomentaryChat-iconButton-container {
73 | position: absolute;
74 | right: 0.1rem;
75 | }
76 |
77 | .MomentaryChat-iconButton {
78 | opacity: 0;
79 | }
80 |
81 | .MomentaryChat-listPart {
82 | border-top: solid 1px #eee;
83 | padding-bottom: 0.2rem;
84 | }
85 |
86 | .MomentaryChat-listPart:hover .MomentaryChat-iconButton {
87 | opacity: 1;
88 | }
89 |
90 | .MomentaryChat-listPart-header {
91 | position: relative;
92 | }
93 |
94 | .MomentaryChat-icon {
95 | background-color: #eee;
96 | border-radius: 0.7rem;
97 | font-size: 0.7rem;
98 | width: 2.5rem;
99 | padding: 0;
100 | margin-top: 0.1rem;
101 | margin-right: 0.1rem;
102 | text-align: center;
103 | display: inline-block;
104 | }
105 |
106 | .MomentaryChat-icon:focus {
107 | outline: 0;
108 | }
109 |
110 | .MomentaryChat-button {
111 | margin: 0.2rem 0;
112 | }
113 |
114 | .MomentaryChat-button button {
115 | font-size: 0.7rem;
116 | }
117 |
--------------------------------------------------------------------------------
/web/src/components/MySetting.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useState } from "react";
2 |
3 | import "./MySetting.css";
4 | import { globalState } from "../states/global";
5 | import { useInputAvatar } from "../hooks/useInputAvatar";
6 |
7 | const LOW_RESOLUTION = 24;
8 |
9 | const MySetting = memo(() => {
10 | const [message, setMessage] = useState(globalState.statusMesg);
11 | const [camera, setCamera] = useState(globalState.config.takePhoto);
12 | const [lowResPhoto, setLowResPhoto] = useState(
13 | globalState.preference.photoSize === LOW_RESOLUTION
14 | );
15 | const [avatar, onChangeAvatar] = useInputAvatar("");
16 |
17 | return (
18 |
44 |
55 | {roomImages.map((item) => (
56 |
57 | x.userId === item.userId && x.peerIndex !== "closed"
61 | )
62 | ? item.image
63 | : NG_IMAGE
64 | }
65 | nickname={item.info.nickname}
66 | statusMesg={item.info.message}
67 | updated={item.updated}
68 | inFaceList
69 | muted
70 | micOn={false}
71 | speakerOn={false}
72 | />
73 |
74 | ))}
75 | {!roomImages.length && (
76 |
77 |
79 | )}
80 |
19 |
43 | 44 | )} 45 |
46 | {!camera && ( 47 | <> 48 | 56 |
57 | 58 | )} 59 | 69 |
70 | 85 |
86 | );
87 | });
88 |
89 | export default MySetting;
90 |
--------------------------------------------------------------------------------
/web/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "remote-faces-web",
3 | "description": "A small app to share webcam still images periodically",
4 | "version": "1.0.0",
5 | "private": true,
6 | "author": "Daishi Kato",
7 | "scripts": {
8 | "start": "vite",
9 | "build": "tsc && vite build",
10 | "serve": "vite preview",
11 | "test:app": "jest",
12 | "test:lint": "eslint --ext .js,.ts,.tsx src",
13 | "test:type": "tsc --noEmit",
14 | "test": "yarn test:lint && yarn test:type && yarn test:app"
15 | },
16 | "homepage": "./",
17 | "dependencies": {
18 | "@ckeditor/ckeditor5-react": "^5.0.2",
19 | "@daishi/ckeditor5-build-inline-custom": "^24.0.0-custom.1",
20 | "dompurify": "^2.4.0",
21 | "emoji-mart": "3.0.1",
22 | "ipfs": "^0.65.0",
23 | "ipfs-pubsub-room": "^3.0.0",
24 | "pako": "^2.0.4",
25 | "peerjs": "^1.4.7",
26 | "react": "^18.2.0",
27 | "react-dom": "^18.2.0",
28 | "valtio": "1.7.2",
29 | "valtio-yjs": "^0.4.0",
30 | "wgo": "^3.0.0-alpha.10",
31 | "yjs": "^13.5.42"
32 | },
33 | "devDependencies": {
34 | "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
35 | "@testing-library/jest-dom": "^5.16.5",
36 | "@testing-library/react": "^13.4.0",
37 | "@testing-library/user-event": "^14.4.3",
38 | "@types/dompurify": "^2.3.4",
39 | "@types/emoji-mart": "^3.0.9",
40 | "@types/jest": "^29.2.2",
41 | "@types/node": "^18.11.9",
42 | "@types/pako": "^2.0.0",
43 | "@types/react": "^18.0.25",
44 | "@types/react-dom": "^18.0.8",
45 | "@types/w3c-image-capture": "^1.0.7",
46 | "@vitejs/plugin-react": "^2.2.0",
47 | "eslint": "^8.26.0",
48 | "eslint-config-airbnb-typescript-prettier": "^5.0.0",
49 | "identity-obj-proxy": "^3.0.0",
50 | "jest": "^29.2.2",
51 | "jest-environment-jsdom": "^29.2.2",
52 | "prettier": "^2.7.1",
53 | "process": "^0.11.10",
54 | "stream-browserify": "^3.0.0",
55 | "ts-jest": "^29.0.3",
56 | "typescript": "^4.8.4",
57 | "vite": "^3.2.2"
58 | },
59 | "jest": {
60 | "preset": "ts-jest/presets/js-with-ts",
61 | "testEnvironment": "jsdom",
62 | "moduleNameMapper": {
63 | "\\.(css|sass)$": "identity-obj-proxy"
64 | }
65 | },
66 | "browserslist": {
67 | "production": [
68 | "chrome >= 67",
69 | "edge >= 79",
70 | "firefox >= 68",
71 | "opera >= 54",
72 | "safari >= 14"
73 | ],
74 | "development": [
75 | "last 1 chrome version",
76 | "last 1 firefox version",
77 | "last 1 safari version"
78 | ]
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/web/src/components/MemberList.tsx:
--------------------------------------------------------------------------------
1 | import { memo } from "react";
2 | import { useSnapshot } from "valtio";
3 |
4 | import "./MemberList.css";
5 | import { Loading } from "./reusable/Loading";
6 | import { useFaceImages } from "../hooks/useFaceImages";
7 | import { FaceCard } from "./reusable/FaceCard";
8 | import { NG_IMAGE } from "../media/imagePresets";
9 | import { globalState } from "../states/global";
10 |
11 | // XXX temporary global state for debugging
12 | import { getRoomState } from "../states/roomMap";
13 |
14 | const MemberList = memo(() => {
15 | const {
16 | roomId,
17 | userId,
18 | statusMesg,
19 | config: { avatar, nickname, takePhoto, videoDeviceId },
20 | preference: { photoSize },
21 | } = useSnapshot(globalState);
22 | const roomState = getRoomState(roomId, userId);
23 | const { userIdList } = useSnapshot(roomState);
24 | const { myImage, roomImages } = useFaceImages(
25 | roomId,
26 | userId,
27 | avatar,
28 | nickname,
29 | statusMesg,
30 | !takePhoto,
31 | false,
32 | false,
33 | false,
34 | videoDeviceId,
35 | photoSize
36 | );
37 | return (
38 | Setting
20 | 31 | {camera && ( 32 | <> 33 | {" "} 34 | 42 |43 | 44 | )} 45 |
46 | {!camera && ( 47 | <> 48 | 56 |
57 | 58 | )} 59 | 69 |
70 | 85 |
39 |
82 | );
83 | });
84 |
85 | export default MemberList;
86 |
--------------------------------------------------------------------------------
/ckeditor5/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@disabled-for-ci_daishi/ckeditor5-build-inline-custom",
3 | "version": "24.0.0-custom.1",
4 | "description": "The inline editor build of CKEditor 5 – the best browser-based rich text editor.",
5 | "keywords": [
6 | "ckeditor5-build",
7 | "ckeditor",
8 | "ckeditor5",
9 | "ckeditor 5",
10 | "wysiwyg",
11 | "rich text",
12 | "editor",
13 | "html",
14 | "contentEditable",
15 | "editing",
16 | "operational transformation",
17 | "ot",
18 | "collaboration",
19 | "collaborative",
20 | "real-time",
21 | "framework"
22 | ],
23 | "main": "./build/ckeditor.js",
24 | "files": [
25 | "build"
26 | ],
27 | "devDependencies": {
28 | "@ckeditor/ckeditor5-adapter-ckfinder": "^24.0.0",
29 | "@ckeditor/ckeditor5-autoformat": "^24.0.0",
30 | "@ckeditor/ckeditor5-basic-styles": "^24.0.0",
31 | "@ckeditor/ckeditor5-block-quote": "^24.0.0",
32 | "@ckeditor/ckeditor5-ckfinder": "^24.0.0",
33 | "@ckeditor/ckeditor5-core": "^24.0.0",
34 | "@ckeditor/ckeditor5-dev-utils": "^20.0.0",
35 | "@ckeditor/ckeditor5-dev-webpack-plugin": "^20.0.0",
36 | "@ckeditor/ckeditor5-easy-image": "^24.0.0",
37 | "@ckeditor/ckeditor5-editor-inline": "^24.0.0",
38 | "@ckeditor/ckeditor5-essentials": "^24.0.0",
39 | "@ckeditor/ckeditor5-heading": "^24.0.0",
40 | "@ckeditor/ckeditor5-image": "^24.0.0",
41 | "@ckeditor/ckeditor5-indent": "^24.0.0",
42 | "@ckeditor/ckeditor5-link": "^24.0.0",
43 | "@ckeditor/ckeditor5-list": "^24.0.0",
44 | "@ckeditor/ckeditor5-media-embed": "^24.0.0",
45 | "@ckeditor/ckeditor5-paragraph": "^24.0.0",
46 | "@ckeditor/ckeditor5-paste-from-office": "^24.0.0",
47 | "@ckeditor/ckeditor5-special-characters": "^24.0.0",
48 | "@ckeditor/ckeditor5-table": "^24.0.0",
49 | "@ckeditor/ckeditor5-theme-lark": "^24.0.0",
50 | "@ckeditor/ckeditor5-typing": "^24.0.0",
51 | "@ckeditor/ckeditor5-ui": "^24.0.0",
52 | "@ckeditor/ckeditor5-upload": "^24.0.0",
53 | "postcss-loader": "^3.0.0",
54 | "raw-loader": "^4.0.1",
55 | "style-loader": "^1.2.1",
56 | "terser-webpack-plugin": "^3.0.2",
57 | "webpack": "^4.43.0",
58 | "webpack-cli": "^3.3.11"
59 | },
60 | "engines": {
61 | "node": ">=12.0.0",
62 | "npm": ">=5.7.1"
63 | },
64 | "author": "CKSource (http://cksource.com/)",
65 | "license": "GPL-2.0-or-later",
66 | "homepage": "https://ckeditor.com/ckeditor-5",
67 | "bugs": "https://github.com/ckeditor/ckeditor5/issues",
68 | "repository": {
69 | "type": "git",
70 | "url": "https://github.com/ckeditor/ckeditor5.git",
71 | "directory": "packages/ckeditor5-build-inline"
72 | },
73 | "scripts": {
74 | "test": "echo no test",
75 | "build": "webpack --mode production",
76 | "preversion": "npm run build"
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/web/src/network/pubsubUtils.ts:
--------------------------------------------------------------------------------
1 | let peerIndexCounter = 0;
2 |
3 | const getNextPeerIndex = () => {
4 | peerIndexCounter += 1;
5 | return peerIndexCounter;
6 | };
7 |
8 | // XXX It would be nice to reuse audio worker for all connections
9 | export type Connection = {
10 | peerIndex: number;
11 | peer: string; // ipfsId
12 | userId: string;
13 | audioWorkers: Map
40 |
53 | {roomImages.map((item) => (
54 |
41 |
50 | {nickname}
51 | {statusMesg}
52 |
55 |
75 | ))}
76 | {!roomImages.length && (
77 |
56 | x.userId === item.userId && x.peerIndex !== "closed"
60 | )
61 | ? item.image
62 | : NG_IMAGE
63 | }
64 | nickname=""
65 | statusMesg=""
66 | updated={item.updated}
67 | muted
68 | micOn={false}
69 | speakerOn={false}
70 | />
71 |
72 | {item.info.nickname}
73 | {item.info.message}
74 |
78 |
80 | )}
81 |
10 | 
14 | {children}
15 |
78 | ));
79 |
80 | export default Landing;
81 |
--------------------------------------------------------------------------------
/electron/build/icon.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/web/src/hooks/useMediaShare.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState, useRef } from "react";
2 | import { useSnapshot } from "valtio";
3 |
4 | import { getScreenStream } from "../media/screen";
5 | import { getVideoStream } from "../media/video";
6 | import { getRoomState } from "../states/roomMap";
7 |
8 | export const useMediaShare = (
9 | roomId: string,
10 | userId: string,
11 | mediaId: { video: string } | "SCREEN" | null,
12 | close: () => void,
13 | uniqueShareId?: string
14 | ) => {
15 | const videoType = `${uniqueShareId || "mediaShare"}Video`;
16 | const [videoStream, setVideoStream] = useState
14 | {children}
15 |
16 |
52 | {!hideHowto && (
53 |
17 |
28 | See faces of your friends or colleagues remotely
18 |19 | The key feature of this app is to share webcam still images to see 20 | each other. Images are just 72px square and only updated every two 21 | minutes. They are so small that you can place the window all the time 22 | near the left edge of your desktop. Images are sent each other in a 23 | peer-to-peer manner and not stored anywhere. The link represents a 24 | virtual room and all room members can see each other. Be careful not 25 | to leak the link to unwanted person. 26 |
27 |
29 |
39 | Face List and Gather Area
30 |31 | On the left of the screen, you will see faces in a column, which we 32 | call face list and the rest is what we call gather area. In the gather 33 | area, you can drag your avatar, and the location is shared with 34 | others. We can define regions in the gather area. Regions can be just 35 | background or add some features. There is a preset you can choose when 36 | creating a new room. 37 |
38 |
40 |
51 | Real-time communication
41 |42 | One of the regions is called "Meeting" in which you can talk 43 | with others in the same meeting region. The face becomes a small video 44 | in the meeting region. We can create as many meeting regions as we 45 | want. There is another region called "Media", with which we 46 | can share screens and videos in high resolution. "Chat" 47 | region is to text. The chat texts are not stored anywhere other than 48 | all connected peers. 49 |
50 |
54 |
76 | )}
77 | Getting started
55 |-
56 |
- 57 | You or someone needs to create a new room. Just click the 58 | "Create a new room" button and it will issue a unique 59 | link. 60 | 61 |
- 62 | Copy the link from the browser address bar and send it to your 63 | friends or colleagues. If you receive the link, open it in the 64 | browser. It may take several seconds for everyone to see each other. 65 | If it keeps unconnected more than two minutes, there can be a 66 | connectivity issue. Sometimes, reloading the page in the browser 67 | solves the situation. 68 | 69 |
- 70 | If it is the first time to run this app, the browser will prompt the 71 | permission for camera and microphone. It may also ask permission for 72 | notification. 73 | 74 |
58 |
61 |
62 | );
63 | });
64 |
65 | export const MeetingScreen = memo<{
66 | roomId: string;
67 | userId: string;
68 | nickname: string;
69 | uniqueId: string;
70 | isActive: boolean;
71 | }>(({ roomId, userId, nickname, uniqueId, isActive }) => {
72 | const [isSharing, setIsSharing] = useState(false);
73 | useEffect(() => {
74 | if (!isActive) {
75 | setIsSharing(false);
76 | }
77 | }, [isActive]);
78 | const close = useCallback(() => {
79 | setIsSharing(false);
80 | }, []);
81 | const { videoStream, videoStreamMap } = useMediaShare(
82 | roomId,
83 | userId,
84 | isSharing ? "SCREEN" : null,
85 | close,
86 | uniqueId
87 | );
88 | const nicknameMap = useNicknameMap(roomId, userId);
89 |
90 | return (
91 |
92 |
127 | );
128 | });
129 |
130 | export default MeetingScreen;
131 |
--------------------------------------------------------------------------------
/web/src/components/reusable/RegionEditor.tsx:
--------------------------------------------------------------------------------
1 | import { memo, useState } from "react";
2 |
3 | import "./RegionEditor.css";
4 | import { getRoomState } from "../../states/roomMap";
5 | import { RegionData } from "../../hooks/useGatherArea";
6 |
7 | const RegionEditor = memo<{
8 | roomId: string;
9 | userId: string;
10 | }>(({ roomId, userId }) => {
11 | const roomState = getRoomState(roomId, userId);
12 | const [regionId, setRegionId] = useState("");
13 | const [type, setType] = useState
93 | {isSharing && (
94 |
97 | )}
98 | {!isSharing && (
99 |
106 | )}
107 |
108 | {isActive && (
109 |
110 | {videoStream && (
111 |
125 | )}
126 |
49 |
53 |
66 |
67 | 75 | 83 | 91 | 99 |
100 | 103 |
104 | 117 | {!!allRegionData && ( 118 |
67 | 75 | 83 | 91 | 99 |
100 | 103 |
104 | 117 | {!!allRegionData && ( 118 |
119 |