How to access the webcam by javascript
As I stated as comment, I'm confused about your wording. You said, you know that "HTML5" can access the webcam, but you need it by pure Javascript.
Well, in case you don't know, HTML5 introduced the such called WebRTC which is short for Real-Time Communications. Part of that, a new thing called navigator.getUserMedia() navigator.mediaDevices.getUserMedia(constraints)
was introduced as well. That is, an ECMAscript object, which allows you to get access to the users machine WebCam and Microphone devices.
As you can see, the whole show is embedded in the HTML5 rollout / spec, so we cannot really separate the Javascript from the HTML5 here.
Further reading:
- https://developer.mozilla.org/en-US/docs/WebRTC
https://developer.mozilla.org/en-US/docs/WebRTC/navigator.getUserMedia- https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia
Here is a js library that uses flash only in a HTML5 fallback situation:
https://github.com/jhuckaby/webcamjs
From the code samples:
<script src="webcam.js"></script>
<div id="my_camera" style="width:320px; height:240px;"></div>
<div id="my_result"></div>
<script language="JavaScript">
Webcam.attach( '#my_camera' );
function take_snapshot() {
Webcam.snap( function(data_uri) {
document.getElementById('my_result').innerHTML = '<img src="'+data_uri+'"/>';
} );
}
</script>
<a href="javascript:void(take_snapshot())">Take Snapshot</a>
There's this great tutorial from HTML5rocks.
Basically, getUserMedia lets the browsers ask for the permission and then lets you use the camera.
You must be aware that it's still badly supported and that the API might change again, especially if you want to send those streams over internet.