24 時間クラウド録画防犯カメラサービスを作る！

本

「24時間クラウド録画防犯カメラサービスを作る！」シリーズ記事をまとめました

運営しているクリエイター: Daddy

#JavaScript

⑪CORS(Cross-Origin Resource Sharing)の設定(AWS Lambda)

前回の記事はこちらはじめに前章でM3U8生成Lambda関数の動作確認にVLC Media Playerを使用しましたが、毎回アプリを起動し、URLを入力して再生するのは大変です。そこで、ブラウザ上で録画した動画を再生できるようにしていきます。言語としてはJavaScriptを使用し、VideoJSを使ってHLS再生を行っていきます。その時考えなければいけないのが、CORS(Cross-Origin Resource Sharing) です。 Same-Or

⑫動画再生プレイヤーの作成(JavaScript)

前回の記事はこちらはじめに今回の記事では、JavaScriptを使ったビデオプレイヤーを作成します。動画再生処理には、VideoJSを使用します。なお、本記事の後半は有料記事になっており、全ソースコードの公開を行っています。動画再生プレイヤーの配置動画再生プレイヤーは以下の２つのファイルで構成されます。 index.html 動画再生プレイヤーを配置したHTMLファイル player.js index.htmlで読み込まれるJavaScriptファイル

¥1,200

⑬簡易ライブビューの仕組み

前回の記事はこちらはじめにここまでで、カメラの映像をクラウド上に保存し、ブラウザでその動画を再生する機能が出来上がりました。本章では、ここまでで出来上がったシステムに、リアルタイムにカメラ映像を確認するライブビューの機能を追加していきたいと思います。簡易ライブビューカメラ映像をリアルタイムに確認するライブビューの仕組みはいくつかありますが、今回は、JPEG画像のコマ送りによる、簡易的なライブビューを作ります。基本的な構成は、下記の記事で紹介した方法と同じです。

⑮[最終回] 簡易ライブビュー再生プレイヤーの作成(JavaScript)

前回の記事はこちらはじめに前章で作成したクラウドレコーダが定期的にアップロードするライブJPEG画像を表示する、簡易ライブビュー再生プレイヤーを作ります。基本的な作り方は下記で紹介したものとほぼ同じです。ライブビューを見る前提として、AWS S3のバケットのプロパティで、静的ウェブサイトホスティングが有効になっている必要があります。設定していない方は以下の記事を参照してください。簡易ライブビュー再生プレイヤーは以下の２つのファイルで構成されます。 liv