Welcome! Log In Create A New Profile

Advanced

Using a Webcam with WB24

Posted by mixgh 
Using a Webcam with WB24
October 28, 2019 12:32AM
I need to let my users take pictures and load into the database. Has anyone used the webcam control successfully?

If not, is there an alternative?

Thanks and regards

issah
Re: Using a Webcam with WB24
November 10, 2019 10:38PM
Yes it can be done donot use that control , brows the web and add it yourself

There is a very cool way to add anything you need:

Creation ==>Webcomponent ==> Other

Then you can addsome javascript to get the cam and then it will display your cam . You then can save the picture.

This is awesome. I made a barcode scanner on a website this way. * without a native app

Regards

Renko Allard


Sorry Here code that will help you out:

html placeholder:
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>


var video = document.getelementbyID('video')
// Make sure you can connect to the camera
if (navigator.mediaDevices.getUserMedia)
{navigator.mediaDevices.getUserMedia({video:true }).then
(function(stream)
{
video.srcObject = stream;
video.Play();
})


// Elements for taking the snapshot
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');

// Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
context.drawImage(video, 0, 0, 640, 480);
});



Edited 1 time(s). Last edit at 11/11/2019 08:32AM by Allard.
Re: Using a Webcam with WB24
November 12, 2019 08:46PM
Thanks so much Allard, I'll give it a try.

issah
Re: Using a Webcam with WB24
January 30, 2020 08:08PM
Hi Renko,

I gave your code a try but it didn't work. Most probably because I don't know how to program javascript. I did however continue my search based on your JS idea and got the following code:

<!DOCTYPE html><html><head></head><body onload="init();"><h1>
Take a snapshot of the current video stream
</h1>
Click on the Start WebCam button.<p>
<button onclick="startWebcam();">Start WebCam</button><button onclick="stopWebcam();">Stop WebCam</button>&nbsp;<button onclick="snapshot();">Take Snapshot</button>&nbsp;
</p>
<video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video><p>
Screenshots :&nbsp;<p>
<canvas id="myCanvas" width="400" height="350"></canvas>&nbsp;&nbsp;
</body>
<script>
//--------------------
// GET USER MEDIA CODE
//--------------------
navigator.getUserMedia = ( navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia);
var video;
var webcamStream;
function startWebcam() {
if (navigator.getUserMedia) {
navigator.getUserMedia (
// constraints
{
video: true,
audio: false
},
// successCallback
function(localMediaStream) {
video = document.querySelector('video');
video.src = window.URL.createObjectURL(localMediaStream);
webcamStream = localMediaStream;
},
// errorCallback
function(err) {
console.log("The following error occured: " + err);
}
);
} else {
console.log("getUserMedia not supported");
}
}
function stopWebcam() {
webcamStream.stop();
}
//---------------------
// TAKE A SNAPSHOT CODE
//---------------------
var canvas, ctx;
function init() {
// Get the canvas and obtain a context for
// drawing in it
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext('2d');
}
function snapshot() {
// Draws current image from the video element into the canvas
ctx.drawImage(video, 0,0, canvas.width, canvas.height);
}
</script>
</html>


It goes one step better but nothing comes up in the video to take a snapshot of within the browser but when I connect to the webcam from windows, it works. Could you try this at your end?

Also, how would I save the snapped picture.

Sorry if I'm asking too much.

Regards

issah
Re: Using a Webcam with WB24
January 31, 2020 11:38AM
Hi,
I haven't looked at it yet, but this MAY help you: [www.pcsoft.fr]

Regards
Steven Sitas
Re: Using a Webcam with WB24
February 18, 2020 09:01AM
Hi , I get a snapshot from the video with this code .

You have to use the webcomponents though


I am having trouble getting the canvas to save to an image. I would like to be able to take more then one picture and addd them to alooper.

The problem is saving the canvas to an image.

I saw a pcsoft video where they did just what we are talking about. I asked for an example of that but the y donnot react to my question.
It is the combining of javascript and w language that is a problem for me

Pitty for I almoast got what I need

regards

Renko Allard
Author:

Your Email:


Subject:


Spam prevention:
Please, enter the code that you see below in the input field. This is for blocking bots that try to post this form automatically. If the code is hard to read, then just try to guess it right. If you enter the wrong code, a new image is created and you get another chance to enter it right.
Message: