createVideo()와 image() 함수를 사용하면 비디오를 캔버스에 업로드할 수 있습니다. 비디오 캡처는 image() 생성자를 통해 전달될 수 있으므로 filter() 메서드를 사용하여 비디오 캡처에 필터를 추가할 수 있습니다. 이 예제를 로컬에서 실행하려면 실행 중인 로컬 서버가 필요합니다. 비디오를 캔버스 내에 내장하지 않고 구축하려면 Video 예제를 확인해 보세요.
캔버스에서의 비디오 by p5.js Contributors and the Processing Foundation is licensed under CC BY-NC-SA 4.0.
관련 예제
![](/_astro/03_Imported_Media-00_Words-thumbnail.B0ocGCfk_Z18RDyX.webp)
No alt text
단어
글꼴을 불러오고 글자를 그립니다.
![](/_astro/03_Imported_Media-01_Copy_Image_Data-thumbnail.C_M5-Apf_Z1ShDY6.webp)
No alt text
이미지 데이터 복사
캔버스에 이미지 파일로부터 색상을 입힙니다.
![](/_astro/03_Imported_Media-02_Alpha_Mask-thumbnail.Cu0OO42U_1jXtbX.webp)
No alt text
알파 마스크
한 이미지를 사용해 다른 이미지의 일부를 잘라냅니다.
![](/_astro/03_Imported_Media-03_Image_Transparency-thumbnail.Cds7LBFq_Z2i3fPS.webp)
No alt text
이미지 투명도
캔버스에 이미지를 반투명하게 만듭니다.
![](/_astro/03_Imported_Media-04_Create_Audio-thumbnail.freIsbi7_2nfLeB.webp)
No alt text
오디오 플레이어
오디오 파일의 플레이어를 생성합니다.
![](/_astro/03_Imported_Media-05_Video-thumbnail.2aa8-8AD_ZwCeux.webp)
No alt text
비디오 플레이어
비디오 파일의 플레이어를 생성합니다.
![](/_astro/03_Imported_Media-06_Video_Canvas-thumbnail.BlkAL3PB_ZMnFsG.webp)
No alt text
캔버스에서의 비디오
캔버스에서 비디오를 표시하고 스타일을 지정합니다.
![](/_astro/03_Imported_Media-07_Video_Capture-thumbnail.BoO0NmjW_Z2mN7ra.webp)
No alt text
비디오 캡처
카메라의 라이브 비디오 피드를 표시합니다.