Skip to content

Home

Jump to bottom Edit New page
GhanshyamB1992 edited this page May 15, 2021 · 1 revision

I have customized WebCam js for Capture Video, using JavaScript code. Hence, I followed the steps given below.

  1. Include

    <script type="text/javascript" src="webcam.js"></script>

  2. Configure

By **Webcam.set()** function override the default setting. 
Call **Webcam.attach()** function on which pass the selector where you want to show live camera view.

     Webcam.set({
        `width: 320,`
        `height: 240,`
        `image_format: 'jpeg',`
        `jpeg_quality: 90`
     });

     Webcam.attach('#webcam);
  1. Capture Image

Just call Webcam.snap() function that has a callback function. The function contains the data_uri that you can use to show a preview or save as an image that generates after taking a snapshot.

    Webcam.snap(function (data_uri) {
           $(".imgList").append('<img src="' + data_uri + '"/>');
    });
  1. Capture Video

Start Video Capturing Just call Webcam.start() The function contains the rec parameter that you can use to pass preview id.

  Webcam.start("preview");

Stop Video Capturing Just call Webcam.stop()

  Webcam.stop();

Completed Code

  `<html>`
`<head>`
`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>`
`<script src="Webcam.js"></script>`
`<script>`
`$(document).ready(function () {`
	`//Configration`
	`Webcam.set({`
		`width: 320,`
		`height: 240,`
		`image_format: 'jpeg',`
		`jpeg_quality: 90`
	`});`
	`Webcam.attach('#webcam');`

	`//Capture Image`
	`$("#btnCapture").click(function () {`
		`Webcam.snap(function (data_uri) {`
			   `$(".imgList").append('<img src="' + data_uri + '"/>');`
		`});`
	`});`
	
	`//Start video Recording`
	`$("#btnStart").click(function () {`
		`Webcam.start("preview");`
	`});`
	
	`//Stop video Recording`
	`$("#btnStop").click(function () {`
		`Webcam.stop();`
	`});`
`});`
`</script>`
`</head>`
`<div>	`
	`<div id="webcam"></div>`
	`<br>`
	`<input type="button" id="btnCapture" class="btn btn-info" value="Capture" />`
	`<input type="button" id="btnStart" class="btn btn-info" value="Start" />`
	`<input type="button" id="btnStop" class="btn btn-info" value="Stop" />`
`</div>	`
`<div>`
	`<h1>Video Player</h1>`
	`<video id="preview" width="240" height="180" autoplay controls></video>`
`</div>`
    `<div>`
	`<h1>Images</h1>    `
	`<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 imgList"></div>`
`</div>`
`</html>`
Add a custom footer
Add a custom sidebar
Clone this wiki locally