 Friends         | I'm looking for those who'd like to work as an English teacher online. -------------------------------------------------------- No relationship or dates. I already have what I need.  programmergirl220: Many developers, myself included, use Stack Overflow when we run into trouble. The link below may shed some light for you //https://stackoverflow.com/questions/27120757/failed-to-execute-createobjecturl-on-url programmergirl220: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Video</title> <style> #vid { border: 1px solid black; } </style> </head> <body> <video id="vid" autoplay="true"></video> <button id="btn" onclick="start()">Start</button> <script src="main.js"></script> </body> </html> video = document.getElementById("vid"; function start() { navigator.webkitGetUserMedia({video:true}, gotStream, function() {}); btn.disabled = true; } function gotStream(stream) { video.src = webkitURL.createObjectURL(stream); }  |
video.src = webkitURL.createObjectURL(stream);
with
video.srcObject = webkitURL.MediaStream;
I get no errors in the console. createObjectURL has been deprecated and replaced with MediaStream.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base target="_blank">
<title>getUserMedia</title>
</head>
<body>
<div id="container">
<video id="gum-local" autoplay playsinline></video>
<button id="showVideo">Open camera</button>
</div>
<script>
const constraints = window.constraints = {
audio: false,
video: true
};
function handleSuccess(stream) {
const video = document.querySelector('video';
const videoTracks = stream.getVideoTracks();
console.log('Got stream with constraints:', constraints);
console.log(`Using video device: ${videoTracks[0].label}`);
window.stream = stream; // make variable available to browser console
video.srcObject = stream;
}
async function init(e) {
try {
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
e.target.disabled = true;
} catch (e) {
handleError(e);
}
}
document.querySelector('#showVideo'.addEventListener('click', e => init(e));
</script>
</body>
</html>