Socket Cam

• スマートフォンを、簡単に監視カメラ代わりにすることができるサービスです。
• ホームページ: https://socket-cam.vercel.app/

利用技術

• フロントエンド

  • React, TypeScript, Chakra UI, Tailwindcss

• バックエンド

  • SkyWay

チュートリアル

1. ホームページにアクセスし、ダッシュボードに移動をクリックします。

   • 

2. ダッシュボードは下記画像のようになっています。右上にあるカメラ追加をクリックするとQRコードとURLリンクが表示されます。

   • 

3. そのURLまたはQRコードを、監視カメラにしたい端末に読み取らせ、リンク先にアクセスしてください。

4. アクセスすると、「カメラ・マイクへのアクセス許可」に関するポップが表示されますので、許可してください。

   • 

5. 許可をするとルームに接続され、ダッシュボード上でカメラ映像が表示されます。

   • 

6. カメラを削除する場合は、アクションボタン内にあるカメラを削除をクリックすると、カメラが解除されます。(カメラ側は、ホームページに遷移します)

   • 

7. ダッシュボードを削除したい場合は、右上にあるアクションボタン内にあるダッシュボードを削除をクリックすると、削除されます。(削除後はホームページに遷移します)

   • 

ダッシュボード機能

カメラの機能紹介

モーション検知・通知

• モーション検知: 物体が動いたかどうかを検知します

  • 検知した場合、通知する: モーション検知した場合、デスクトップに通知します。(PCのみ)
  • 検知した場合、通知内容を送信する: 通知内容を入力欄に書かれた内容をカメラに送信します。

• 通知内容を送信: 通知内容を入力欄に入力された通知を送信します。送信された通知内容は、カメラ側で読み上げられます。

  • iPhoneなどのSafariでは、アクションボタン内にあるスピーカーを許可をクリックする必要があります。

カメラ

• カメラを切り替えることができます。

アクション

• 検知した画像を見る: モーション検知した際に撮影された画像の一覧が表示されます。
• スクリーンショット: 現在撮影されている映像のスクリーンショットを撮影します。
• 拡大: 表示領域を拡大します
• カメラ再読み込み: 映像を撮影しているブラウザのページ再読み込みをします。
• カメラを削除: カメラの撮影を停止し、ダッシュボードから削除されます。
• また、デフォルトでは新規のダッシュボードさんとなっていますが、そのテキストをクリックするとダッシュボード名の変更もできます。

ダッシュボードの機能紹介

アクション

• ホームに戻る: ホームページに遷移します。
• ダッシュボードを共有: このダッシュボードを共有することができます。
• サーバーに再接続: ブラウザのページを再読み込みします。
• ダッシュボード削除: ダッシュボードを削除します。削除された場合、カメラはすべて破棄されホームページに遷移します。

カメラ追加

• 端末を監視カメラとして追加できるリンクとQUコード生成します。

ダッシュボード名の変更

• 表示されているダッシュボード名をクリックすると、ダッシュボード名を変更することができます。

カメラ機能

アクション

• カメラを増やす: 同じダッシュボードに接続することができる監視カメラのリンク・QUコードを共有することができます。
• スピーカーを許可: 通知が送信されたときに、スピーカーから音を出すことを許可します。(Safariのみ許可が必要)
• サーバーに再接続: ブラウザのページを再読み込みします。
• カメラを切断: カメラを削除します。ダッシュボード上からは削除され、ホームページに遷移します。

カメラ

• 撮影するカメラを選択します。

画面共有

• PCの場合、デスクトップやアプリの画面を配信することもできます。
• 「システムの音声を共有」にチェックを入れると、デスクトップ内の音声も配信することができます。
• ダッシュボードからの変更はできません。