ブラウザから動画や画像のアップロードする手段の技術調査(主にスマホ)
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
調査項目 | スマホ操作(写真 UP) | スマホ操作(動画 UP) | PC 操作(写真 UP) | PC 操作(動画 UP) |
---|---|---|---|---|
その場でカメラ起動/撮影の可否 | ○ | △(iPhone8, Pixel5 は OK。ZTE Libero S10 はその場で撮った動画が input タグで取得できる時点では壊れていて、後からファイルとして選択しないと登録できなかった。つまり機種に依存する面が大きそう) | - | - |
>取り直し可否 | ○ | ○ | - | - |
> 1 回のカメラ起動で複数データの連続アップ可否 | × | × | - | - |
>携帯本体へのデータ保存有無 | ×(制御もできない) | △(Android は保存されているが iPhone はされていない。制御もできない) | - | - |
写真枚数の制御 | ○(input 要素を枚数分置くか、multiple にして files.length をバリデーションする)(multiple はその場のカメラ起動と併用しても複数アップロードできない) | - | ○(input 要素を枚数分置くか、multiple にして files.length をバリデーションする)(multiple はその場のカメラ起動と併用しても複数アップロードできない) | - |
写真容量の制御 | ○(file.size をバリデーションする) | - | ○(file.size をバリデーションする) | - |
動画長さの制御 | - | ○(video.duration をバリデーションする) | - | ○(video.duration をバリデーションする) |
動画容量の制御 | - | ○(file.size をバリデーションする) | - | ○(file.size をバリデーションする) |
予め撮影済みデータの撮影日の特定 | △(EXIF がついていれば。信用はできない) | × | △(EXIF がついていれば。信用はできない) | × |
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
動向の歴史
日本語訳はサンプル古い!
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
videoのduration
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
ファイルのサイズ
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
ファイルのMIMEタイプ
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
スマホのカメラからファイル投稿しつつプレビューしたい場合、inputタグのカメラ起動でファイル投稿し、createObjectURLし、video.srcにブチ込むのが基本
Pixel5 と iPhone8は正常にプレビューまで出来たが、ZTE Libero S10はなぜか file.size = 0
, file.type = ''
になっており、videoタグが壊れたファイル表示になっていてプレビューできなかった
色々やってもどうしようもなかった
なお、ZTE Libero S10でもinputタグからカメラ起動せず、撮影済みのファイルを選ぶ方法だと正常にプレビューまでできた
このように、inputタグのカメラ起動撮影直後のファイルは正常かどうか機種依存がありそう(特にAndroid)
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
inputの capture='user'
, capture='environment'
はiPhone Safariしか効いてないっぽい
Android Chromeだとどっちも同じ向きで起動する
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
スマホのブラウザだと
<input type='file' accept='image/*' capture='environment'>
のようにcapture属性があるとカメラが直接起動する
<input type="file" accept="image/*;capture=camera">
のように無いとカメラ起動かファイル選択か選ぶメニューが出る
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
videoって撮影日時とれるの?
→画像のEXIFのような規格がないので無理そうだし、EXIFと同じく、あっても信用できない
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
inputカメラ起動で撮影した動画/画像は保存されないっぽい(Androidかつ動画ならなぜか保存されている)
uploadするためだけだから保存しなくていいでしょという思想?
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
multipleを指定していても、inputカメラ起動からでは複数撮影&登録はできないようだ