【WebGL】3D空間でみんなで動画を見れるウェブサービスを作りたかったけれど惜しいところまで行ったので公開します。

（はが）@mxcn3 です。 #web1weekに乗じて作りたいと思ってたサービスの開発を進めて見ました。

今回のテーマは好きということですね！インターネットの人とと繋がれる感じが大好きです！初めてインターネットに触れたあの感覚！そこで今回作ったものはこちらです！

スマホ・PC両対応です！
スマホの場合は２本指を器用に使うと動けます！！
Onfes
https://onfes.com

※ まだできてません！マジで不具合バグだらけです

サービスについて

Onfes（オンフェス）です。
このサービスのコンセプトの大まかな方針は、自由でわちゃわちゃできる夢のような空間を目指しています。

経緯

数週間前、3D空間で飲み会のツールを作りたいと考えていて、3D空間を作っていました。

作りたかったもの・構想

※ こちらは構想です
ウェブ上で誰もが自由で、わちゃわちゃできるもの

ライブ配信をするアプリからライブ配信者が配信ボタンを押すとWeb上で入れる空間が共有される

1vs1での音声、チャットによるコミュニケーション
商品の売買

この３つの機能を含んだウェブサービスでした。

実際一週間でできたもの

作ったものでも、不具合だらけのウェブサービスですがこちらの概要に勇気をもらったので公開したいと思います。
動きはするのでぜひ遊んでみてください。

Webサービスを1週間で作るイベント開催の概要

1週間しかありませんので、練習程度に作ったちょっとした1機能のものでも、不具合だらけでほとんど動かないようなものでも大丈夫です。逆に余裕があれば大作を作っていただいても大丈夫です。他の人とネタがかぶっちゃっても全然だいじょうぶです。また、1週間かける必要があるわけではないので1日だけ作ってみる感じでもOKです。

サービス

Onfes

できること

3D空間で動画を見ること
複数人で入って動くこと

今の所この２点だけです！！！

進捗具合としてはほぼかなり納得入っていませんが公開をするための練習として公開をさせていただきます！

作れなかったもの

UI/UX全般 (すみません >
魅力的な体験 ( いちばん大切な部分をまだ作れていないので、これから全力を出します）

技術

使用した技術については
3D部分
- PlayCanvas
マルチプレイ部分
- Photon JavaScript SDK
ホスティング先
- Firebase

で開発しています。

何に時間がかかってしまったか

ミドルウェアやライブラリを使っているのになぜ3D空間の中を動かすだけで時間がかかったのか？と思うのですが1番作成に時間がかかったのはここです。

ここの問題

ここはm3u8の動画を再生しているのですが、こちらを実装する際にいくつか実装に手間取りました。

Safari再生できない問題

Safariで再生できない問題があったのでその問題と解決策を共有します。

1. HLS.jsいらなかった問題

hls.jsというライブラリを使ってm3u8形式の動画を再生するためのライブラリをしようして動画の再生を行いました。

hls.jsを使用するためのコードはこんな形です。

  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(videoSrc);
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED, function () {
      video.loop = true;
      video.muted = true;
      video.autoplay = false;
      video.setAttribute("playsinline", "");
    });
  }