JSFiddle - React, Tailwind, and code Playground

by harsh dand

HTML

<div id="mainDiv">
<h1><code>getUserMedia()</code> very simple demo</h1>
<p>With this example, we simply call <code>getUserMedia()</code> and display
the received stream inside an HTML5 <video> element</p>
<p>View page source to access both HTML and JavaScript code...</p>
<video autoplay></video>
</div>

JavaScript

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
|| navigator.mozGetUserMedia || navigator.ieGetUserMedia
// Use constraints to ask for a video-only MediaStream:
var constraints = {audio: false, video: true};
var video = document.querySelector("video");
// Callback to be called in case of success...
function successCallback(stream) {
// Note: make the returned stream available to console for inspection
window.stream = stream;
    
    if (window.URL) {
// Chrome case: URL.createObjectURL() converts a MediaStream to a blob URL
video.src = window.URL.createObjectURL(stream);
} else {
// Firefox and Opera: the src of the video can be set directly from the stream
video.src = stream;
}
// We're all set. Let's just play the video out!
video.play();
}
// Callback to be called in case of failures...
function errorCallback(error){
console.log("navigator.getUserMedia error: ", error);
}
// Main action: just call getUserMedia() on the navigator object
navigator.getUserMedia(constraints, successCallback, errorCallback);