Camera Pluginが動画に対応したので試してみるの続き。
撮影した動画を、いったんEntityに保存し、別の画面で再生する手順を確認する。
環境情報
Personal Environment(Version 11.18.1 (Build 37884))
Service Studio(Version 11.54.5)
Camera Plugin (Version 7.2.0)
File Plugin (Version 3.0.5)
動作確認にはAndroidを利用。
Entityを用意
以下の1:1構造の2 Entityを用意した。
RecordedVideoBinaryには撮影した動画のバイナリデータを、RecordedVideoMetadataには、Camera Pluginが返してくれるメタデータを格納する。
バイナリデータを取り出す
File PluginのGetFileDataFromUri Actionを使用する。
Camera PluginのRecordVideoが返すURIは'/'で始まるが、File Pluginでファイルにアクセスする際にはスキーマをつけなくてはいけないようだ。
もし、GetFileDataFromUriのFilePathパラメータにURIをそのまま渡すと、「Encoding Error」になってしまう。
よって、以下のように、先頭に「file://」を付与する。
「file://」を補っているのは、以前File Pluginでファイルを保存するパスで確認したときに、File Pluginで取得できるファイルパスの先頭についていたことから。
取り出したデータをサーバーに保存
これは、特別な部分が何もない。
Server Actionを作成し、Input Parameterとして↑で取り出したBinary Dataと、Camera Pluginが返すメタデータを渡す。受け取った値をEntityに保存するだけ。
別の画面でデータを取りだす
実装例：
- 画面のAggregateでRecordedVideoMetadata Entityを一覧表示
- 表示した各レコードにButtonを配置
- Buttonをクリックすると、Server Actionに該当レコードのIdを渡す
- Server ActionではIdを使ってBinary Dataを取り出し、BinaryData ExtensionのBinaryToBase64に渡してBase64フォーマットに変換した値を返す
Base64に変換しているのは、後でvideoタグのsrcにdata URIで渡すため。
UIに表示
Video Widgetはパラメータとして、Videoデータを直接返すURLを期待する。
そこで、代わりにHTML Element Widgetを使ってvideoタグを直接出力し、そのsrc属性にdata URIとして動画データを渡すことにする。
指定した属性は以下の通り、
- controls: True
- type: video/mp4
- src: "data:video/mp4;base64," + Base64形式の動画を格納したText型の変数
CSP
以下のようなエラーが開発者ツールのコンソールやエラーログに出ていたら、CSP (Content Security Policy)によってコンテンツの表示が止められている。
セキュリティ設定なので緩めるにあたっては慎重に検討が必要。
設定はLifeTimeで行う。
fused to load media from 'data:video/mp4;base64,...==' because it violates the following Content Security Policy directive: "default-src 'self' gap: 'unsafe-inline' 'unsafe-eval'". Note that 'media-src' was not explicitly set, so 'default-src' is used as a fallback.