Japanese subtitles

← Live input - OSP

Get Embed Code
4 Languages

Showing Revision 1 created 05/19/2014 by K2480.

  1. getUserMediaと呼ばれるAPIを使用すると
  2. 音声とビデオの入力を
    ライブで直接できるようになります
  3. これはgetUserMediaを呼び出すシンプルな例です
  4. constraintsはここではビデオです
  5. そしてvideo要素にストリームを割り当てます
  6. これだけではライブビデオ入力の
    長方形が現れるだけです
  7. これを元に何かしましょう
  8. カメラアプリケーションを実装して
  9. スナップショットを撮りたければ
  10. canvasコンテキストとdrawImageで実現できます
  11. スナップショットを撮りたい場合は
  12. ビデオから画像を取り入れdrawImageで描画します
  13. canvasは画像とは異なりますので
  14. コピーしてどこかに貼りつけたり
  15. ハードディスクにダウンロードしたり
  16. SNSに掲示するなどの画像を中心とする
    ユーザフローはできません
  17. しかしcanvasには
  18. 画像としてエンコードする便利な機能があります
  19. canvas.toDataURLメソッドです
  20. canvas自体を表示する代わりに
    canvasのコンテンツをデータとして
  21. imgタグにコピーしています
  22. モバイルのローカルストレージに画像を
  23. 保存したい場合はa要素の
  24. download属性を使用すれば可能です
  25. 実際はデータをダウンロードしているのではなく
  26. リンクとしてエンコードされているので
    ネットワークでの転送はありません