Giter Site home page Giter Site logo

cacaomath / flowchatweb Goto Github PK

View Code? Open in Web Editor NEW
0.0 1.0 0.0 35 KB

FlowChatのWebバージョン webアプリ上でコメントが流れます.OBSなどで合成すると,某動画サイトのような配信もできます.

Home Page: https://flowchat-7d30c.web.app/index.html

HTML 49.25% JavaScript 42.71% CSS 8.04%
firebase-realtime-database comment-system chat-application

flowchatweb's Introduction

FlowChatWeb

FlowChatのWebバージョン.
FlowChat
これは,自身が制作した,Chrome拡張機能↓の移植バージョンです.
FlowChat for Chrome
コメントが流れるとこんな感じです.
Videotogif (1)

使い方

ホーム画面から,コメントを打つ場合はコメント投稿画面(基本はゲスト)
コメントを見る場合はコメント視聴画面へいってください.
投稿画面では,テキストボックスにコメントを打ち込み,sendボタンを押すことで投稿します.
また,下のタブから流れるコメントの文字の色を変化させることが出来ます.
コメント視聴画面は,OBS(Open Brodcaster Software)によってクロマキー合成し,配信で利用することを想定し緑色になっています.
また,視聴画面で Shift を押すことで右上に表示されるコメント履歴を表示・非表示に切り替えられます.

ホーム画面

コメント視聴画面

コメント投稿画面

動作環境

  • OS
    Windows10, Android10, Android11
  • ブラウザ
    Chrome, Edge, Firefox

flowchatweb's People

Contributors

cacaomath avatar

Watchers

 avatar

flowchatweb's Issues

Jqueryを使う

内容

JavaScriptコードをJqueryで使える部分は書き換えたほうがいい

投稿ページの統一

内容

投稿ページがほとんど同じ内容なのに2つのファイルを使っているのが非効率

グループチャット機能を追加したい

対象画面

コメント投稿や閲覧

改善案

グループチャット機能(部屋番号等)でコメントの見れる人の範囲を制限する.

優先度

背景

今は身内で使うことが多いが,もし校外で使った場合誰にでもコメントが見られてしまうため.プライバシーの観点から必要

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.