We Keep Coding

Firefox navigator.mediaDevices.getUserMedia stream is correct on the first run, on the second run stream is broken and I cannot display video

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.

video.play() occurred unhandled rejection (notallowederror) on IOS

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.

Get actual facingMode of a mediaStreamTrack in Firefox

I want to know the actual facingMode of a media stream track in order to invert (mirror) the image or not depending on whether the active camera is at the back or at the front of a device. If the actual facingMode is "user", the CSS property of the video will be: transform: scaleX(-1); if the facingMode is "environment", I do not invert the image.
This is my piece of code:
navigator.mediaDevices.getUserMedia({ facingMode: "environment", width: { ideal: 4096 } })
.then (function(mediaStream){
video.srcObject = mediaStream;
console.log('facingmode: ' + video.srcObject.getTracks()[0].getSettings().facingMode);
});
In Chrome, everything works as expected: The console shows "environment" or "user", depending on the actually active camera.
In Firefox, the console always shows "undefined" (what is not expected) (same behaviour on computer and on smartphone).
Could someone help me to retrieve the actual facingMode in Firefox too?
Thank you

In Firefox for Android and other clients that still don't provide
MediaTrackSettings.facingMode, a workaround is to inspect the
MediaStreamTrack.label, e.g.:
const isEnvironment =
"environment" == video.srcObject.getVideoTracks()[0].getSettings().facingMode
|| video.srcObject.getVideoTracks()[0].label.indexOf("acing back") !== -1;
Unfortunately, the labels may vary across user agents.
The above snippet works in Firefox Mobile 68. Even in German, the label for the back camera is "Camera 0, Facing back, Orientation 90".

Firefox can return the correct facing mode without problem. I've test it using the following code:
navigator.mediaDevices.getUserMedia({ video: true})
.then(function(stream) {
console.log(stream.getTracks()[0].getSettings().facingMode);
})
.catch(function(err) {
console.log(err)
});
The problem you have is maybe that you haven't authorized the page to use the camera. Go to Preferences -> Permissions -> Camera -> Settings ... and uncheck Block new requests asking to access your camera.

Accesing camera from other devices on webpage

I'll describe my problem briefly. I made a page that access the webcam to shot a picture and then upload it to my server. When I access the page on my localhost, it works perfectly, the problem occurs when I try to access from another device or I access with the IP.. For example: http://localost/Project/Page works well, but http://192.168.0.5/Project/Page doesn't work.
This is the code I used to access te media. The error occurs in the else sentence and throws the alert
navigator.getUserMedia ||
(navigator.getUserMedia = navigator.mozGetUserMedia ||
navigator.webkitGetUserMedia || navigator.msGetUserMedia);
if (navigator.getUserMedia) {
navigator.getUserMedia({ video: true, audio: false }, onSuccess, onError);
} else {
alert('your browser doesn't spport this function');
}
I don't know if the code isn't working or if there is a security policy making my page crash.
Regards

Found a Solution. I had to add a " security exception" to the browser, and it worked. Maybe not the best practice but the cheaper one when you dont have a SSL certificate.

How to stream webcam into mobile browser by using ReactJs?

I have created a simple react app that streams the webcam video stream on the browser. Here's the link to the github project : Basic WebCam Streamer
The code is pretty simple and straightforward :
class AppStreamCam extends React.Component {
constructor(props) {
super(props);
this.streamCamVideo= this.streamCamVideo.bind(this)
}
streamCamVideo() {
var constraints = { audio: true, video: { width: 1280, height: 720 } };
navigator.mediaDevices
.getUserMedia(constraints)
.then(function(mediaStream) {
var video = document.querySelector("video");
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
}); // always check for errors at the end.
}
render() {
return (
<div>
<div id="container">
<video autoPlay={true} id="videoElement" controls></video>
</div>
<br/>
<button onClick={this.streamCamVideo}>Start streaming</button>
</div>
);
}
}
And this is the result :
Once, I click on the button, the webcam turns on and starts streaming into the browser.
Here's my problem:
When I open chrome on my phone and enter the localServer address, and click on the button, the app crashes since obviously the app code is meant to be run from the pc browser so that it may turn the pc webcam.
So when I click on the button from my phone, I understandably get this error:
TypeError: Cannot read property 'getUserMedia' of undefined
My goal is to click on the button from my mobile browser and start streaming the pc webcam on my mobile browser just like on the pc.
However, I do not know from where to start exactly. Any help?

I have solved this issue.
1. Open package.json and paste this inside scripts:
"start": "set HTTPS=true&&react-scripts start"
This should serve the app over https
2. If this gives you this error:
React app error: Failed to construct 'WebSocket': An insecure
WebSocket connection may not be initiated from a page loaded over
HTTPS
Open
node_modules/react-dev-utils/webpackHotDevClient.js
And paste this code inside the definition of the connection:
protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
This is apparently a bug in react-sripts that hasn't been solved yet. If https protocol is being used we should use WebSockets over SSL/TLS (WSS) protocol instead of WebSockets (WS). You can learn more about it here:
NOTE: This will not stream your pc webcam into your phone but rather the phone's camera.