I'm taking an image from the webcam and storing it to the server. Everything was working fine until I got the chrome update today. My latest chrome version is:
Version 71.0.3578.80 (64 bit)
This line is throwing an error:
camera.src = window.URL.createObjectURL(stream);
Failed to execute 'createObjectURL' on 'URL': No function was found
that matched the signature provided.
According to this link here. I applied the code
try {
this.srcObject = stream;
} catch (error) {
this.src = window.URL.createObjectURL(stream);
}
Its not displaying the camera feed.
For reference - This jsfiddle code is not working on my chrome anymore.
It's just been removed from the current version of Chrome. I suddenly started getting this error after it updated. I have no idea why it never printed deprecation warnings before today.
Instead of setting the src property to URL.createObjectURL(stream) you're now supposed to set the srcObject property to the stream directly. It seems to be working in Chrome and Firefox.
Source: https://developers.google.com/web/updates/2018/10/chrome-71-deps-rems
Since google update version 71, this issue is generating. I also faced this issue. But now I got the solution to it. Here is the solution:
Replace
videoElement.src = URL.createObjectURL(screenStream);
to
videoElement.srcObject = screenStream;
Have you tried this?
try {
camera.srcObject = stream;
} catch (error) {
camera.src = window.URL.createObjectURL(stream);
}
In chrome, it works fine if you use:
video.srcObject = stream;
Instead of:
this.srcObject = stream;
See printscreen here
Related
Error in detail:
WebAssembly.Memory(): could not allocate memory
at https://*******/ffmpeg-core.js:22:82
at https://*******/ffmpeg.min.js:1:6506
at f (https://*******/ffmpeg.min.js:1:11322)
at Generator._invoke (https://*******/ffmpeg.min.js:1:11110)
at Generator.next (https://*******/ffmpeg.min.js:1:11747)
at i (https://*******/ffmpeg.min.js:1:4295)
at c (https://*******/ffmpeg.min.js:1:4498)
Code for ffmpeg:
const downloadWithFFMPEG = async () =>{
const sourceBuffer = await fetch(recordingURL).then(r => r.arrayBuffer());
await ffmpeg.load();
await ffmpeg.FS(
"writeFile",
"input.webm",
new Uint8Array(sourceBuffer, 0, sourceBuffer.byteLength)
);
await ffmpeg.run("-i", "input.webm", "-c", "copy", "output.mp4")
const output = ffmpeg.FS("readFile", "output.mp4");
var link = document.createElement('a')
link.href = URL.createObjectURL(new Blob([output.buffer], { type: 'video/mp4;codecs=H264' }));
link.download = this.data;
link.click();
recording = false;
}
Brief about problem:
The error only comes for android chrome browser. The same code works fine on pc/laptop chrome.
Have also enabled Webassembly-thread on chrome://flags for android browser as someone suggested me to do it but still same error. Can someone help me?
You're likely getting this error because there is literally not enough memory on the device.
It's a common issue with Wasm applications (or generally any large apps), because mobile devices are much more constrained in terms of hardware - in this case RAM - than desktop.
It might be a chrome bug. I had same issue on my laptop chrome but when I switched to another browser(Microsoft edge) it worked fine. Usually the browser should clear the memory but unfortunately, it is taking time. You may want to try another browser and see if it works.
I want to get a video from the webcam using JS but no footage.
MESSAGE:
DOMException: Could not start video source
App.js
const video = document.getElementById("video");
function startVideo() {
navigator.getUserMedia(
{
video: {}
},
stream => (video.srcObject = stream),
err => console.log(err)
);
}
startVideo();
index.html
...
<body>
<video id="video" width="720" height="540" autoplay muted></video>
</body>
...
thanks for your help
If anyone else is having this problem and nothing else helps. Make sure that your camera is not already claimed/used by a different software/browser.
TLDR: I have tested your code and had to change it a bit:
https://codepen.io/puradawid/pen/PoqxzPQ
It looks like the problem lays here:
navigator.getUserMedia({
video: {}
},
stream => { video.srcObject = stream },
err => console.log(err)
);
Regarding to docs navigator.getUserMedia is deprecated and there is navigator.mediaDevices.getUserMedia that supports it. However, changing that up doesn't solve the correct problem which is your callback functions. This method returns Promise that is controlled by .then(), so changing it allows me to see my face in codepen:
navigator.mediaDevices.getUserMedia({
video: true
}).then(
stream => (video.srcObject = stream),
err => console.log(err)
);
I ran into this problem on certain android devices (Sony XA2) when trying to toggle the camera on a mobile browser because I am calling navigator.mediaDevices.getUserMedia repeatedly on each camera toggle.
The solution that I found was to make sure to stop all the tracks in previous streams that you created.
this.stream.getTracks().forEach(t => {
t.stop();
this.stream.removeTrack(t);
});
Without the previous code you can't seem to toggle camera on certain Android devices: (Demo),
(Code)
The error shown was DOMException: Requested device not found
By stopping previous tracks: you are able to start a new stream:
(Demo)
Code
Note: The following code snippet doesn't seem to execute in stack overflow due to security restrictions, so please use the jsfiddle links.
class Camera {
constructor({ video }) {
this.facingMode = "environment";
this.video = video;
video.onloadedmetadata = () => {
video.play();
};
}
async toggleCamera() {
if (this.facingMode === "environment") {
this.facingMode = "user";
} else {
this.facingMode = "environment";
}
try {
if (this.stream){
/* On some android devices, it is necessary to stop the previous track*/
this.stream.getTracks().forEach(t => t.stop());
}
this.stream = await navigator.mediaDevices.getUserMedia({
video: {
facingMode: this.facingMode,
}
});
} catch (e) {
console.error(e);
}
this.video.srcObject = this.stream;
}
}
const camera = new Camera({
video: document.querySelector("video"),
});
const button = document.querySelector("button");
button.addEventListener('click', () => {
camera.toggleCamera();
});
<button>
Toggle Camera
</button>
<video></video>
In Windows 10 go to settings->privacy->App permission(left side)->Microphone-> enable 'Allow apps to access your microphone'
After that retry with your JS program....It will work!!
If anyone have such an error and you are working on a laptop. You can try bending your laptop monitor in both directions. Sometimes the cable comes loose. This helped in my case.
Also look into Feature-Policy HTTP header, both on the website and on the host web server config, and make sure camera access is allowed.
I have tried all the other solution but nothing is work. Then finally i need to uninstall my camera driver in Device Manager and then scan for hardware changes. Try to run the app again and it's working.
I'm building electron desktop app in windows 10.
electron: 15.3.0
Source video that helped me: https://www.youtube.com/watch?v=XE2ULFlzkxw
I went to the browser settings for camera and noticed that the default camera was showing as "Leap Motion" which is not a standard camera device. I changed to an actual webcam and the problem was solved.
Sometimes this type of error also appears when you try to make a peer-to-peer call system and your tests are done on the same device. The camera is already used by the initiator and the receiver can no longer activate the camera.
I am building an electron in which I need the desktopCapturer api, but I don't fully understand how to use it.
From the api official page (and this example app: https://github.com/hokein/electron-sample-apps/tree/master/desktop-capture) I see that the desktopCapturer only gives me the id's of the sources, not the video streams themselves. For that, I should use navigator.mediaDevices.getUserMedia(). But the constraints object no longer has the mandatory property and because I am using typescript I am getting an error if I try to use it.
I've tried to use the deviceId property instead, but I am getting this error:
Uncaught (in promise) DOMException: Requested device not found (on a device with a webcam I would get the webcam stream instead of that error). Here is my code:
import { desktopCapturer, DesktopCapturerSource } from "electron";
function onLoad(){
desktopCapturer.getSources({
thumbnailSize: {
width: 256,
height: 256,
},
types: ["screen", "window"]
}, (error: Error, srcs: DesktopCapturerSource[]) => {
if (error)
throw error;
let video: HTMLVideoElement | null = document.querySelector("video");
for (let src of srcs)
navigator.mediaDevices.getUserMedia({
video:{
deviceId : src.id
}
}).then((stream:MediaStream)=>{
if(video){
video.srcObject = stream;
video.play();
}
})
})
}
document.addEventListener("DOMContentLoaded", onLoad);
I also tried using navigator.getDisplayMedia(), but I wouldn't get the pop-up prompting to select a source as I would get in Chrome. What should I do to get this working? Thanks in advance!
I found the solution, at least for new since WebRTC is not yet standardized. Copying the navigator object into a variable and casted to any allows the use of the mandatory property on the constraints object since typescript no longer checks for type compatibility
I want to capture video with the webcamera.
And there is the right decision:
window.onload = function () {
var video = document.getElementById('video');
var videoStreamUrl = false;
navigator.getUserMedia({video: true}, function (stream) {
videoStreamUrl = window.URL.createObjectURL(stream);
video.src = videoStreamUrl;
}, function () {
console.log('error');
});
};
but produces an error in the browser:
[Deprecation] URL.createObjectURL with media streams is deprecated and will be removed in M68, around July 2018. Please use HTMLMediaElement.srcObject instead. See https://www.chromestatus.com/features/5618491470118912 for more details.
how to use HTMLMediaElement.srcObject for my purposes ? Thanks for your time!
MediaElement.srcObject should allow Blobs, MediaSources and MediaStreams to be played in the MediaElement without the need to bind these sources in the memory for the lifetime of the document like blobURIs do.
(Currently no browser support anything else than MediaStream though...)
Indeed, when you do URL.createObjectURL(MediaStream), you are telling the browser that it should keep alive this Source until your revoke the blobURI, or until the document dies.
In the case of a LocalMediaStream served from a capturing device (camera or microphone), this also means that the browser has to keep the connection to this device open.
Firefox initiated the deprecation of this feature, one year or so ago, since srcObject can provide the same result in better ways, easier to handle for everyone, and hence Chrome seems to finally follow (not sure what's the specs status about this).
So to use it, simply do
MediaElement.srcObject = MediaStream;
Also note that the API you are using is itself deprecated (and not only in FF), and you shouldn't use it anymore. Indeed, the correct API to capture MediaStreams from user Media is the MediaDevices.getUserMedia one.
This API now returns a Promise which gets resolved to the MediaStream.
So a complete correction of your code would be
var video = document.getElementById('video');
navigator.mediaDevices.getUserMedia({
video: true
})
.then(function(stream) {
video.srcObject = stream;
})
.catch(function(error) {
console.log('error', error);
});
<video id="video"></video>
Or as a fiddle since StackSnippets® overprotected iframe may not deal well with gUM.
I have a web application which is intermittently producing an error when using Chrome 30.0.1599.101 m.
I am using the HTML5 <video /> tag and controlling the src attribute using javascript.
The page which is causing the error sometimes errors on the first video or on the seventh. There is no predictable pattern.
Here is the javascript which handles the src:
var playing = false;
var media = $('#video')[0];
function initModule() {
$.ajax({
url: recap,
type:'HEAD',
error:
function(){
screenNotify('Error!', false, "404: Module video content could not be found." + recap, true);
},
success:
function() {
media.src = recap;
registerListeners(media);
media.load();
}
});
}
function registerListeners(listen) {
listen.addEventListener('ended', hide_recap);
listen.addEventListener('error', mediaError);
}
function mediaError(event) {
screenNotify('Media Error!', false, "Media failed with code: " + event.currentTarget.error.code, true);
}
function play_recap() {
if (!playing) {
playing = true;
media.play();
}
}
function hide_recap() {
if (playing) {
playing = false;
media.pause();
media.currentTime = 0.0;
}
}
Interestingly, there is no error thrown when I call media.load(), instead, you need to look at the network requests to see that the GET has actually produced a result of (failed).
Another thing to note, is this GET status only occurs for videos which reside within this particular folder location: /interactive/vids/recap/. The error does not occur anywhere else within the application.
Finally, the last thing which is strange about this error, is when the application finally attempts to play the video from play_recap(), about 1 second of the video will actually play, followed by an error being thrown on the video element.
The error is MEDIA_ERR_NETWORK however this application is installed locally on a Tomcat server and is running under localhost.
So why is the GET request producing (failed) and the HTML5 <video> element producing a MEDIA_ERR_NETWORK when everything is only ever running on localhost?
I've noticed very similar issue with Chrome 31. I'm getting inconsistently MEDIA_ERR_NETWORK, all other tested browsers work fine.
I haven't found any other solution than just retrying - you could try recreate the video element or just change currentTime - it always helps in my case.