Як зробити фотографію з вашої веб-камери на jаvascript.

Всім привіт! Ми вже навчилися стрім відео з вашої веб-камери на сторінку в реальному часі, а сьогодні я покажу, як робити фотографії з вашої веб-камери на jаvascript.

відкриємо файл index.html і пропишемо наступний код:

Відео: Як зробити фотографію з WEB камери ноутбука

 
lang="En"gt; 
 
charset="UTF-8"gt; 
Take pictures from your webcam 
rel="Stylesheet"href="Style.css"gt; 
 
 
class="Booth"gt; 
id="Video"width="400"height="300"autoplaygt; 
href="#"id="Capture"class="Booth-capture-button"gt;сфотографувати 
id="Canvas"width="400"height="300"gt; 
src="Http://goo.gl/qgUfzX"id="Photo"alt="Ваша фотографія"gt;

І пропишемо такі стилі для нашої структури:

.booth { 
 width:400px- 
 background:# ccc- 
 border:10px solid # ddd- 
 margin:0auto- 
} 
 
.booth-capture-button { 
 display: block- 
 margin:10px0- 
 padding:10px20px- 
 background: cornflowerblue- 
 color:# fff- 
 text-align: center- 
 text-decoration: none- 
} 
 
#canvas { 
 display: none- 
}

І, звичайно ж, двигун нашої задумки - jаvascript.

(function(){ 
var video = document.getElementById(`Video`), 
 canvas = document.getElementById(`Canvas`), 
 context = canvas.getContext(`2d`), 
 photo = document.getElementById(`Photo`), 
 vendorUrl = window.URL || window.webkitURL- 
 navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator. 
mozGetUserMedia || navigator.msGetUserMedia- 
 navigator.getMedia({ 
 video:true, 
 audio:false 
},function(stream){ 
 video.src = vendorUrl.createObjectURL(stream) - 
 video.play() - 
},function(error){ 
 alert(`Помилка! Щось пішло не так, спробуйте пізніше. `) - 
}) - 
 document.getElementById(`Capture`).addEventListener(`Click`,function(){ 
 context.drawImage(video,0,0,400,300) - 
 photo.setAttribute(`Src`, canvas.toDataURL(`Image / png`)) - 
}) - 
}) () -

Ось таким досить нескладним способом можна зробити захоплення зображення з вашої веб-камери, а використовувати це можна, наприклад, при реєстрації для аватарки.