Display Your Webcam 002 - 005 Explained
- Internal Links:
- External Links:
- Display Webcam Stream 006
- 006 displays the Video Controls, ie: Pause, amount of time not paused, Mic stays on Mute, Full Screen option.
Original Code
- Go to Top
- The html, css, and javaScript code is below
- I had to change the angle brackets around the html tags to parenthesis so the code will display instead of run (executed).
(!DOCTYPE html)
(html)
(head)
(meta charset="utf-8")
(title)Display Webcam Stream(/title)
(style)
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
(/style)
(/head)
(body)
(div id="container")
(video autoplay="true" id="videoElement")
(/video)
(/div)
(script)
var video = document.querySelector("#videoElement");
if (navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true })
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (err0r) {
console.log("Something went wrong!");
});
}
(/script)
(/body)
(/html)
Reserved Words we are looking into.
- Go to Top
- HTML's video
- JavaScript's navigator, mediadevices, getUserMedia
- JavaScript's .catch
HTML's video
- W3Schools | HTML Media | HTML Video element, is used to show a video on a web page
- W3Schools | HTML Tags | HTML <video> Tag is used to embed video content in a document, such as a movie clip or other video streams
- W3Schools | HTML Reference | HTML Global Attributes | "id" specifies a unique id for an element
- developer.mozilla.org | References > HTML > Elements > <video> the Video Embed element
JavaScript's navigator
- W3Schools | JavaScript | Window Navigator | Window Navigator contains information about the browser
- developer.mozilla.org | JavaScript | Navigator | Navigator the Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.
JavaScript's mediadevices
- developer.mozilla.org | JavaScript | References > Web APIs > MediaDevices
- The MediaDevices interface provides access to connected media input devices like cameras and microphones, as well as screen sharing.
- In essence, it lets you obtain access to any hardware source of media data.
- developer.mozilla.org | JavaScript | References > Web APIs > MediaDevices > MediaDevices.getUserMedia()
- The MediaDevices.getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.
- This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
- webrtc.org | Get started > Media devices |
Getting started with media devices.
- When developing for the web, the WebRTC standard provides APIs for accessing cameras and microphones connected to the computer or smartphone.
- These devices are commonly referred to as Media Devices and can be accessed with JavaScript through the navigator.mediaDevices object, which implements the MediaDevices interface.
JavaScript's getUserMedia
- developer.mozilla.org | JavaScript | References > Web APIs > MediaDevices > MediaDevices.getUserMedia()
- The MediaDevices.getUserMedia() method prompts the user for permission to use a media input which produces a MediaStream with tracks containing the requested types of media.
- This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
- flaviocopes.com | JavaScript | getusermedia
- The MediaDevices object exposed by navigator.mediaDevices gives us the getUserMedia method.
- www.geeksforgeeks.org | JavaScript | Web API WebRTC.getUserMedia() Method
- The MediaDevices.getUserMedia() is a part of the webRTC media capture API and is used to get access to the camera and the microphone connected to the user device (user computer, smartphone, etc.) from the browser.
- When getUserMedia() is invoked, the browser asks for permission from the user to use the media inputs (camera or microphone or both) connected to the user device.
JavaScript's .catch
Reserve