I'm using the 'facingMode' constrain in order to switch between the two cameras,
but I'm not able to fully decided whether the user end has an 'environment' camera (back facing camera).. it's not enough to to count the 'videoinput' of the returned promise of enumerateDevices function.
I tried searching for it and all I found was to use the video MediaTrack label and search for containing "facing back" string, which doesnt seem to be constant in all browsers (IOS for instance).
I'm sure there must be a better way :)
A second answer here. The selection of front (facingMode:'user') and back (facingMode:'environment') cameras is an issue for something I'm working on.
It's possible to tell which camera you're using if you have an open .getUserMedia() stream to a camera. stream.getTracks[0].getCapabilities() gives back an object with either a facingMode:'user' or facingMode:'environment' field in it. But you already must have a stream open to the particular device to get this.
Here's what I have discovered using multiple devices in a mobile-device test farm. These are the order of the device entries yielded by .enumerateDevices().
tl;dr: On iOs devices, the front facing camera is the first videoinput device in the list, and the back-facing camera is the second one. On Android devices, the front facing camera or cameras have the string "front" in their device.label values and the back facing camra or cameras have the string "back".
iOS devices
iOS devices running Mobile Safari: the device.label items are all localized to the currently selected national language.
The devices always appear in this order in the device array, with the front camera always appearing as the first device in the array with device.kind:'videoinput'. Here is the list of devices labels I got from every iOS device I tried, auf Deutsch:
audioinput:iPhone Mikrofon
videoinput:Frontkamera
videoinput:Rückkamera
Some iPhones have multiple camera lenses on the back. Nevertheless, the MediaStream APIs in Mobile Safari only show one camera.
You can tell you’re on an iPhone when
navigator.userAgent.indexOf(' iPhone ') >= 0
You can tell you’re on an iPad when
typeof navigator.maxTouchPoints === 'number'
&& navigator.maxTouchPoints > 2
&& typeof navigator.vendor === 'string'
&& navigator.vendor.indexOf('Apple') >= 0
Notice that iPad Safari now lies and claims it's an Intel Mac. It presents this User-Agent string:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.1 Safari/605.1.15
Android devices
Android devices: the `device.label' items are not localized.
The devices I looked at had different device.label lists. But the cameras I found all had either the string front or back in the device.label.
A Pixel 3A running Android 11 has this list of devices.
audioinput:Standard
audioinput:Speakerphone
audioinput:Headset earpiece
videoinput:camera2 1, facing front
videoinput:camera2 0, facing back
audiooutput:Standard
A Samsung SM-A205F running Android 9 has these devices in order.
audioinput:Default
audioinput:Speakerphone
audioinput:Headset earpiece
videoinput:camera2 1, facing front
videoinput:camera2 2, facing front
videoinput:camera2 0, facing back
audiooutput:Default
This one enumerates two different front-facing selfiecams. The first one offers higher resolution than the second one.
A Samsung SM-G925I running Android 6.0.1
audioinput:Default
audioinput:Speakerphone
audioinput:Headset earpiece
videoinput:camera2 1, facing front
videoinput:camera2 0, facing back
audiooutput:Default
And, by the way, the results of .getSupportedConstraints() don't help much: both iOS and Android give facingMode:true.
It's my experience, across a wide variety of mobile devices with English as their default language, that the device.label property you get back from enumerateDevices() contains the string 'front' or 'back' for the user or environment camera. But on some devices the string is in upper case. So you need to check for those strings in a case insensitive way.
Also, enumerateDevices() conceals the label values unless your user has granted permission to access media. In most browsers, the permission is sticky. That is, once a user has granted it to your web site, it stays granted. But on Mobile Safari devices the permission is not sticky: your user must grant it each time your page loads. You get your user to grant permission with a getUserMedia() call.
This code should let you know whether you have front and back cameras.
async function hasFrontBack() {
let result = {hasBack: false, hasFront: false, videoDevices: []}
try {
const stream = await navigator.mediaDevices.getUserMedia(
{video: true, audio: false})
let devices = await navigator.mediaDevices.enumerateDevices()
const videoDevices = devices.filter(device => {
if (device.kind === 'videoinput') {
if (device.label && device.label.length > 0) {
if (device.label.toLowerCase().indexOf('back') >= 0) {
result.hasBack = true
} else if (device.label.toLowerCase().indexOf('front') >= 0) {
result.hasFront = true
} else { /* some other device label ... desktop browser? */ }
}
return true
}
return false
})
result.videoDevices = videoDevices
/* drop stream */
const tracks = stream.getTracks()
if (tracks) {
for (let t = 0; t < tracks.length; t++) tracks[t].stop()
}
return result
}
catch (ex) {
/* log and swallow exception, this is a probe only */
console.error(ex)
return result
}
}
Once you have this result, you can use getUserMedia() again without prompting the user for permission again.
To determine if we are using the mobile back camera, use this after the stream has loaded. Currently Firefox does not support getCapabilities(). Tested on MacOS/iOS/Android, Safari/Chrome/Firefox.
if (stream.getTracks()[0].getCapabilities) {
isBackCamera = stream.getTracks()[0].getCapabilities()?.facingMode?.[0] === 'environment';
}
I found a decent solution, still not perfect but can help.
determine by the MediaStreamTrack applied constraints:
MediaStream.getVideoTracks()[0].getConstraints().facingMode
As long as you are not using 'exact' while using 'facingMode', it won't be guaranteed..
Related
Looking to hide/show a component in a React/Nextjs/tailwind webapp depending on the device that the user is on (e.g. desktop vs tablet vs mobile) since there are certain keys on the keyboard available for desktop but not on table and mobile (e.g. the tab key). Don't want to do it by screen size since this is a device problem (no tab on keyboard) rather than a screen size problem
Initially I thought about getting device type (code referenced from another stackoverflow Q/A), but this seems to fail when the user is on a device such as an ipad and is using the Desktop version for that browser (e.g. Desktop safari and not mobile safari). Is there a better way to handle this such that it can properly check what device the user is on in order to be able to hide/show the react component?
const getDeviceType = () => {
const ua = navigator.userAgent;
if (/(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)) {
return "tablet";
}
if (
/Mobile|iP(hone|od)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
ua
)
) {
return "mobile";
}
return "desktop";
};
In JavaScript you can detect browser with JavaScript using window.navigator
Code example according to https://developer.mozilla.org/en-US/docs/Web/API/Window/navigator would be
var sBrowser, sUsrAg =
navigator.userAgent;
// The order matters here, and this may
report false positives for unlisted
browsers.
if (sUsrAg.indexOf("Firefox") > -1) {
sBrowser = "Mozilla Firefox";
// "Mozilla/5.0 (X11; Ubuntu; Linux
x86_64; rv:61.0) Gecko/20100101
Firefox/61.0"
}
alert("You are using: " + sBrowser);
But for react there's another package you can use that is npm install react-device-detect
Code example would be
import { browserName, browserVersion }
from "react-device-detect"
console.log(`${browserName}
${browserVersion}`);
After detecting browser you just conditionally render whatever you want to show
I am working on a video conferencing app that leverages Amazon Chime. I have followed the npm page of Amazon Chime SDK JS and managed to get the server response and initialized the meetingSession. However, the problem is when I try to get an array of audio output devices, it is an array of length zero on Safari whereas in browsers like Chrome and Firefox, it works just fine, and I get an array of non zero length. How do I solve this?
Here is what I have coded so far:
import {
ConsoleLogger,
DefaultDeviceController,
DefaultMeetingSession,
LogLevel,
MeetingSessionConfiguration
} from 'amazon-chime-sdk-js';
const logger = new ConsoleLogger('MyLogger', LogLevel.INFO);
const deviceController = new DefaultDeviceController(logger);
// You need responses from server-side Chime API. See below for details.
const meetingResponse = /* Server response */;
const attendeeResponse = /* Server response */;
const configuration = new MeetingSessionConfiguration(meetingResponse, attendeeResponse);
const meetingSession = new DefaultMeetingSession(
configuration,
logger,
deviceController
);
const audioInputDevices = await meetingSession.audioVideo.listAudioInputDevices();
const audioOutputDevices = await meetingSession.audioVideo.listAudioOutputDevices();
const videoInputDevices = await meetingSession.audioVideo.listVideoInputDevices();
/* Rest of the code... */
When I log the lengths of the above arrays in the console, the length of audioOutputDevices array is zero
in Safari whereas it is non zero in other browsers.
The output/speaker device selection is not enabled by default in Firefox and Safari. So you have to change the default settings:
The below steps are tested on macOS Catalina (v: 10.15.7)
a) Firefox: This issue is discussed here: https://github.com/bigbluebutton/bigbluebutton/issues/12471
In the url bar type about:config
Search in the searchbar for the property media.setsinkid.enabled and set it to true
Relaunch the browser and test (open the following link in the browser https://webrtc.github.io/samples/src/content/devices/input-output/). You should now see values in the drop down of Audio Output Destination
b) Safari (Tested on version: 14.1.2):
Make sure you see the Develop tab in the top right (if not then enable it "Safari > Preferences > Advanced" and then check "Show Develop menu in menu bar" at the bottom)
Navigate to "Develop > Experimental Features > Allow Speaker Device Selection" and make sure "Allow Speaker Device Selection" is checked
Relaunch the browser and test here https://webrtc.github.io/samples/src/content/devices/input-output/
If you want to inform the user then you can have something like below(pseudo code):
ioDevices = await navigator.mediaDevices.enumerateDevices();
let outputDeviceSelectable = false;
for (let device: ioDevices) {
if (device.kind == "audiooutput") {
outputDeviceSelectable = true;
break;
}
}
if (outputDeviceSelectable == false) {
show a pop up to the user to change the default settings
}
This is a known issue according to the Amazon Chime SDK FAQ: Firefox and Safari have known issues disallowing them from listing audio output devices on these browsers. While clients can continue the meeting using the default device, they will not be able to select devices in meetings.
I have an ionic application for android and IOS, the app display a message when specific action happen.
But i realized that there is a difference in this action if the IOS OS was higher than 11 or less than 10.
So i want to detect IOS' version, if it was less than 10 display this message and if it was higher then don't displau it.
I'm new to ionic, so how can i achive this?
CODE:
function (err) {
if (err == "has no access to assets") {
_this.presentAlert('no access');
}
else if (err == "no image selected") {
_this.presentAlert('nothing selected');
}
});
The first if is where i want to check the device's OS version, if it was less than 11 then display the message.
How to do it?
for version: const currentPlatformVersion = ionic.Platform.version();
if it is ios device const isIOS = ionic.Platform.isIOS();
even this const deviceInformation = ionic.Platform.device(); returns an object with the device that runs the ionic app.
I'm using getUserMedia() to capture a camera stream on iOS 11's Safari. When I get the list of cameras using the MediaDevices API, the labels are blank. Is there a way to reliably determine which camera is pointed in which direction?
navigator.mediaDevices.enumerateDevices().then(function(devices) {
devices.forEach(function(device) {
if(device.kind === 'videoinput') {
console.log(device);
// Labels for both cameras are blank:
// MediaDeviceInfo { deviceId: "123ABC", groupId: "", kind: "videoinput", label: "" }
}
});
});
The docs make it sound like a user may have to grant permissions to give labeled camera data.
It says:
This might produce
videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
or if one or more MediaStreams are active or persistent permissions are granted:
videoinput: FaceTime HD Camera (Built-in)
id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=
audioinput: default (Built-in Microphone)
id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=
To me this implies that the issue might lie in user permissions.
On Samsung Galaxy S2 Android 6.0.1 + Chrome v55, when I getUserMedia on page load, the video track acquired appears live.
When I select the back camera from my camera select, I trigger another time my gUM with constraints to use that exact facing back cameraId, the video track is ended, I have a black rectangle instead of a stream.
var constraints = {
video: {
deviceId: {
exact: defaultVideoDeviceId
}
},
audio: true
};
gUM wrapper
function gUM(constraints, callback) {
console.debug("WebRTC constraints", constraints);
// Stopping streaming before starting the new one
if (window.streams.local) {
window.streams.local.getTracks().forEach(function(track) {
track.stop();
});
}
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => {
console.debug("New MediaStream > Tracks", stream.getTracks());
window.streams.local = stream;
callback && callback(stream);
})
.catch(err => {
console.log("Raised error when capturing:", err);
});
}
If I switch back to front, it acquires a new MediaStream and it plays the video.
I'm facing a similar problem too.
My test is a bit different since I'm trying to make a GUM of the back camera while I have a GUM a media stream active that is using the front camera.
I tested in several android devices and only the Xiaomi MI Mix 2 with the MIUI beta 875 with android 8.1 works. This can be because that rom uses the new camera2 android api, or because the Mi Mix 2 camera hardware allows the usage of both the back and the front camera at the same time.
The annoying thing is that sometimes, on certain devices, the GUM doesn't fail, but hangs indefinitely.
Maybe listening to the MediaStreamTrack.onended event after the track.stop() method call, can help to understand when resources are completely free so as you can try a new GUM with different constraints.
Please let me know if you discovered something.
Simone