I'm using the following code to get mic audio stream and disable automatic gain control:
const stream = await navigator.mediaDevices.getUserMedia({
audio: {
autoGainControl: false
},
video: false
});
That works fine on destkop, but when I run it within my Android app via WebView, it doesn't. It seems that AGC acts at system level on Android.
Any idea?
Related
I'm having trouble accessing the microphone and camera while using Firefox on windows after running this script on the second time. Chrome/edge is fine
let stream;
try {
document.getElementById('record').onclick = async () => {
stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true});
document.getElementById('video').srcObject = stream;
};
document.getElementById('stop').onclick = () => {
stream.getTracks().forEach(track => track.stop());
document.getElementById('video').srcObject = undefined;
stream = null;
};
} catch (e) {
console.error(e);
}
On the second go stream seams to be legit, it contains video and audio track, but it won't display video correctly whereas chrome and safari deals with it without any issues. Should I treat firefox in a specific way? What could be wrong? I'll add that my camera & microphone is fine + I've granted the permissions
fiddle link to the example code
Closing and reopening browser seam to make the issue go away, until I run that script again. Thanks in advance
Your code is correct. It's just that webcams tend to take a little extra time between when they're closed, and when they're re-opened. It's a big issue for webcams that don't support multiple clients simultaneously.
I've experienced this problem occasionally on Chrome, as well as Firefox.
The best thing to do is handle errors and try again.
using peer.js for stream video on React APP
addVideoStream(video: HTMLVideoElement, stream: MediaStream) {
video.srcObject = stream
video?.addEventListener('loadedmetadata', () => {
video.play()
})
if (this.videoGrid) this.videoGrid.append(video)
}
got this error at 'video.play()'
the request is not allowed by the user agent or the platform in the current context
already I allowed permission for Audio and video on IOS.
this code works well other platforms except IOS.
I have no idea.
If I deploy then I just get black screen on IOS.
how can I fix this?
thanks in advance
the problem was how video tag works in IOS with WebRTC.
used HTTPS environment(production) then add these attributes
if (isMobile && isSafari) {
this.myVideo.playsInline = true
this.myVideo.autoplay = true
}
then it works.
When I use chrome.tabCapture.capture({audio : true, video : true}) for recording tab It mutes my tab sound and recorded video has no sound .The same code works in another pc but I don't know what the problem is.
chrome: Version 87.0.4280.88 (Official Build) (64-bit)
OS: Microsoft Windows 10 Pro Version10.0.17763 Build 17763
When I use extensions from chrome web store I have the same problem
When you start an audio capture it disconnects the stream from the default output (speakers). By creating a secondary MediaStreamSource and connecting it to the default output (AudioContext.destination) you can allow the stream to continue outputting to speakers while being input to your recorder.
var constraints = {
audio: true,
video: true,
};
var context = new AudioContext();
chrome.tabCapture.capture(constraints, function (stream) {
if (stream) {
context.createMediaStreamSource(stream).connect(context.destination);
.......
}
}
Refer to this thread
The video streaming works perfectly well for Android, and Safari in iOS. The problem occurs when we try to use Chrome on iOS or an In-app Browser. I am using Vue as a Single File Component.
My HTML code is as follows:
<video
height="400px"
width="300px"
autoplay
playsinline
/>
My Vue JS code is as follows:
data: () => ({
video: null,
}),
mounted() {
navigator.mediaDevices.getUserMedia({
audio: false,
// Prioritize Rear Camera
video: {facingMode: 'environment'},
})
.then((stream) => {
this.video = document.querySelector('video');
this.video.srcObject = stream;
this.video.tracks = stream.getTracks();
});
}
Any help or alternative methods to solve this would be appreciated. My goal is to start a stream from the camera on the webpage and take a photo on click.
Despite the information here Chrome, Firefox, and Edge for iOS do not support the navigator.mediaDevices property due to the fact that under the hood they all use the built-in WebKit rendering engine which does not provide this capability to third parties. There is a bug filed here which includes some promising discussions about how iOS 13.4 may have partially resolved this.
Until Apple decides to provide this, the only option is to check navigator.mediaDevices for null and catch errors on the promise:
if (navigator.mediaDevices == null) { /* unsupported */ }
else {
navigator.mediaDevices.getUserMedia({})
.then((stream) => {})
.catch((err) => { /* unsupported */ })
}
...and provide users with the appropriate feedback.
I have been using getUserMedia() for WebRtc for a while now but since the latest update of browsers I have not been able to use this. On previous versions worked fine.
Affected browsers' versions
Firefox - 57.0.4 ,
Chrome - 63.0.3239.132
Example code:
navigator.getUserMedia({ "audio": true, "video": false }, function (stream) {
console.log(stream);
localStream = stream;
},logError);
Also check this if anyone is getting this error in google sample code
https://webrtc.github.io/samples/src/content/getusermedia/gum/
Is there any work around for this issue? Need help.
Thanks
I found the solution. In newer versions when we specify the constraints { audio: true, video: true } either of which ever we specify as true that corresponding hardware need to be present. otherwise it will throw DevicesNotFoundError .
Here is the code i used. i don't have a web cam in local machine so specified video as false.
navigator.mediaDevices.getUserMedia({ audio: true, video: false})
.then(function(stream) {
/* use the stream */
})
.catch(function(err) {
/* handle the error */
});