2020-05-26に更新

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

image

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

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

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

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

サービスについて

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

経緯

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

作りたかったもの・構想

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

image

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

image

  1. 1vs1での音声、チャットによるコミュニケーション
    image

  2. 商品の売買
    image

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

実際一週間でできたもの

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

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

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

サービス

image

Onfes

できること

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

今の所この2点だけです!!!

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

作れなかったもの

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

技術

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

で開発しています。

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

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

ここの問題

image

ここは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", "");
    });
  }
解決方法
  if (Hls.isSupported()) {}

スマートフォンの時にはcanplayのイベントが呼ばれなかったのですが、原因はSafariではHls.jsには対応していないけれど、そもそもvideoタグでそのままm3u8形式の動画が再生できるということでした。

2. テクスチャ表示されない問題

3D空間内の動画の再生方法は、PlayCanvasの公式チュートリアルを参考にしてたのですが。

動画テクスチャ
https://developer.playcanvas.com/ja/tutorials/video-textures/

これが、Safariだと、真っ黒になってしまい再生されませんでした。

結果的にこれはテクスチャのフォーマットをpc.PIXELFORMAT_R5_G6_B5pc.PIXELFORMAT_R8_G8_B8に変更することで動作しました。

本当に作りたいもの

Onfesは今の所、簡単な操作、動画視聴機能しかありませんが今後のアップデートで、SHOWROOMのようなイケてる空間VRChatのような機能を実装して、メタバースなVRでARでフィンテックな空間を実装してオンラインでフェスを行うならオンフェスとなるようなサービスを作ります。

今後もちょくちょくアップデートをしていきますのでよろしければこちらのツイッターのフォローしていただけると嬉しいです!

感想とか、活用方法があるよーとかあれば教えて下さい〜

はが - Twitter

感想

5/18 土曜日 着手
5/23 土曜日 配信者側のコードを書く
5/24 日曜日 視聴者側のことを忘れてて急いで書き始める
5/25 月曜日 勢いで公開しちゃってもいいかと思う
5/26 火曜日 急いで記事を書く ← 今ここ

考えてたら時間が立ってた

3D空間の画面に表示されている綺麗な動画について

これは、Bick Buck Bunnyというクリエイティブ・コモンズの動画を使用していたのですが、これがあることでデバッグがめちゃくちゃ捗りました。

ツイッターでシェア
みんなに共有、忘れないようにメモ

はが

今年の春から初めて植物・ 野菜 🥦 を庭で育て始めました。 フォローさせていただいた方のツイートはめっちゃ見させていただいております。このアカウントの発言は個人の見解です。

コメント