Home
>
WinDev Forum
>
Topic
Using a Webcam with WB24
Posted by mixgh
|
Using a Webcam with WB24 October 28, 2019 12:32AM |
Registered: 7 years ago Posts: 93 |
|
Re: Using a Webcam with WB24 November 10, 2019 10:38PM |
Registered: 7 years ago Posts: 169 |
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.
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 |
Registered: 7 years ago Posts: 93 |
|
Re: Using a Webcam with WB24 January 30, 2020 08:08PM |
Registered: 7 years ago Posts: 93 |
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> <button onclick="snapshot();">Take Snapshot</button>
</p>
<video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video><p>
Screenshots : <p>
<canvas id="myCanvas" width="400" height="350"></canvas>
</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
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> <button onclick="snapshot();">Take Snapshot</button>
</p>
<video onclick="snapshot(this);" width=400 height=400 id="video" controls autoplay></video><p>
Screenshots : <p>
<canvas id="myCanvas" width="400" height="350"></canvas>
</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 |
Registered: 7 years ago Posts: 276 |
|
Re: Using a Webcam with WB24 February 18, 2020 09:01AM |
Registered: 7 years ago Posts: 26 |
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
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
|
Re: Using a Webcam with WB24 February 28, 2020 11:46AM |
Registered: 7 years ago Posts: 93 |
|
Re: Using a Webcam with WB24 February 28, 2020 11:47AM |
Registered: 7 years ago Posts: 93 |