Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

リモートワークが流行りそうなので今のブラウザで何が出来るか調べてみた

リモートワークが流行りそうなので今のブラウザで何が出来るか調べてみました。

WebRTC

まずは、リモートでのコミニュケーションをするために、WebRTCを調査してみます。
WebRTCでのコミニュケーションは基本的にP2Pのやり取りとはいえ、そこに至るまでの調整に中央サーバーが必要という認識です。
とはいえ、こちら によると簡易的なものならばFirebaseで大丈夫そうでした。ただ、この記事が書かれた頃とFirebaseのインターフェイスに若干変更があったので、このままでは動きませんでした。
もう少しググったところ、こちらのソースコードを丸パクリすれば一瞬で実装できました。なお、使ったのはFirebaseのFirestoreとHostingだけでした。無料枠です。
https://webrtc.org/getting-started/firebase-rtc-codelab

音声認識

今のブラウザは音声認識も標準機能であるようでした。これも無料なのが少しびっくりです。
https://qiita.com/hmmrjn/items/4b77a86030ed0071f548
とはいえ、SpeechToTextを提供できるほどの計算量を持っている会社は限られていると思うので、この記事にあるようにこれをWeb標準として良いのか興味を持ちました。

翻訳

折角、音声認識により、音声が文字になったので、翻訳も調べてみます。
残念ながらWeb標準では無かったですが、低コストで実装は可能そうでした。
GASを使用している例:
https://qiita.com/tanabee/items/c79c5c28ba0537112922
Web RTCを組み合わせた例:
https://qiita.com/yorifuji/items/9988f9a31c48bae31def

音声可視化

殆どのブラウザに搭載されていると思われるWebAudio APIを使えば、音声可視化などの操作も容易そうでした。
WebAudio APIについて:
https://www.html5rocks.com/ja/tutorials/webaudio/intro/
実装例:
https://github.com/urtzurd/html-audio

ただ、エコー対策が必要そうです。
https://qiita.com/yusuke84/items/842ef495d2e6eca05ae6

録画

MediaRecorder APIを使えば、動画・音声だけでなくブラウザでの行動履歴の録画も出来るようでした。
この実装例には若干感動を覚えました。
https://qiita.com/ru_shalm/items/0930aedad12c4e100446

Web RTCと組み合わせた例:
https://qiita.com/massie_g/items/ecfc16018210441051b4
https://developers.google.com/web/updates/2016/01/mediarecorder

感情分析(表情)

ブラウザの標準機能には無いですが、javascriptには顔認識のライブラリが多数ありました。そのなかでもface-apiは感情分析等のモデルも含んでおり、無料で使えました。 https://github.com/justadudewhohacks/face-api.js

感情分析(音声)

TODO

軽く作ったもの:

ひとまず上記のうち、録画以外のデモです。メモリを沢山使ってしまうかもです。
https://rimooto-desu.firebaseapp.com/

今後調べたい項目

・ chrome://flags
Web NFC API
AV1リアルタイムハードウェアエンコーダ (日本のパイドパイパー?)

water_boy_tokyo
flutterとfirebase頑張りたいです
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away