Scribd
Upload
3 views1 page

Capture Images with Webcam Tool

The document is an HTML template for a web page that captures images using a webcam. It includes a video element to display the webcam feed, a button to take a snapshot, and a canvas to render the captured image. The script handles accessing the camera and drawing the video frame onto the canvas when the button is clicked.

Uploaded by

ayobeghgh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views1 page

Capture Images with Webcam Tool

The document is an HTML template for a web page that captures images using a webcam. It includes a video element to display the webcam feed, a button to take a snapshot, and a canvas to render the captured image. The script handles accessing the camera and drawing the video frame onto the canvas when the button is clicked.

Uploaded by

ayobeghgh
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

<DOCTYPE html!

>
<html>
<head>
<title/>!‫<ﺧﺬ ﺻﻮﺭﺓ‬title>
<style>
{ ;body { text-align: center; font-family: sans-serif; background: #f9f9f9
{ ;video, canvas { max-width: 90%; margin-top: 20px
{ ;button { padding:15px 25px; font-size: 18px; cursor: pointer
<style/>
<head/>
<body>

<h1/>‫ ﺍﺿﻐﻂ ﻻﻟﺘﻘﺎﻁ ﺻﻮﺭﺓ‬h1>>


<video id="video" autoplay></video>
<br>
<button/>‫"<ﺍﻟﺘﻘﺎﻁ‬button id="snap>
<canvas id="canvas"></canvas>

<script>
;('const video = [Link]('video
;('const canvas = [Link]('canvas
;('const snap = [Link]('snap

‫ ﺍﻃﻠﺐ ﺇﺫﻥ ﺍﻟﻜﺎﻣﻴﺮﺍ‬//


({ [Link]({ video: true
(then(stream => [Link] = stream.
;(('‫)'ﻻ ﻳﻤﻜﻦ ﺍﻟﻮﺻﻮﻝ ﻟﻠﻜﺎﻣﻴﺮﺍ‬catch(err => alert.

} <= () ,'[Link]('click
;('const ctx = [Link]('2d
;[Link] = [Link]
;[Link] = [Link]
;([Link](video, 0, 0
;({
<script/>

<body/>
<html/>

You might also like