createCapture

(別名: create_capture)

def setup
  createCanvas(100, 100)
  @capture = createCapture(VIDEO)
  @capture.hide
end

def draw
  image(@capture, 0, 0, width, width * @capture.height / @capture.width)
  filter(INVERT)
end
def setup
  createCanvas(100, 100)
  @capture = createCapture(VIDEO)
  @capture.hide
end

def draw
  if @capture.loadedmetadata
    c = @capture.get(0, 0, @capture.width / 2, @capture.height / 2)
    image(@capture, 0, 0, width, height)
    image(c, 50, 50, 50, 50)
  end
end

p5.jsリファレンス(参考情報)

[p5.js] createCapture
[p5.js] p5.MediaElement

概要

ビデオキャプチャを生成します。

書式

elm = createCapture([type])

引数

引数名内容備考オプションデフォルト値
typeキャプチャタイプVIDEO : ビデオ
AUDIO : オーディオ
VIDEと AUDIOの両方

戻値

elm : p5mediaelementオブジェクト
   (<video></video>タグの HTML要素)

備考

・引数 'type'には「VIDEO」または「AUDIO」の指定ができますが、
 rbCanvas/p5では AUDIOの操作に関するメソッド等が用意されていないので
 基本的に「VIDEO」を指定してキャプチャ画像として利用してください。

・セキュリティに関する詳細については、下記の URLを参照してください。
  MediaDevices.getUserMedia()

関連

HTMLElement 対応表
(p5mediaelement).loadedmetadata
(p5mediaelement).get