Display a preview of user Camera on a Cordova iOS App.
Camera not working despite using documentation's examples
Here is the output Xcode show me on console:
2020-04-22 17:07:00.278427+0200 DocMeeToo Te虂le虂consultation[956:208097] iosrtcPlugin#getUserMedia()
2020-04-22 17:07:00.278726+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginGetUserMedia#call()
2020-04-22 17:07:00.284718+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginGetUserMedia#call() | video authorization: authorized
2020-04-22 17:07:00.287601+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginGetUserMedia#call() | video requested
2020-04-22 17:07:00.288478+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginGetUserMedia#call() | chosen video constraints: {
}
2020-04-22 17:07:00.318673+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findDevice device:<AVCaptureFigVideoDevice: 0x101f9f240 [Front Camera][com.apple.avfoundation.avcapturedevice.built-in_video:1]>
2020-04-22 17:07:00.319154+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice contraints using default - width:0/640, height:480/480, aspectRatio: 0.000000/0.000000
2020-04-22 17:07:00.319292+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:192, height:144, aspectRatio: 1.333333, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.319387+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:192, height:144, aspectRatio: 1.333333, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.319471+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:352, height:288, aspectRatio: 1.222222, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.319525+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:352, height:288, aspectRatio: 1.222222, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.319571+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:480, height:360, aspectRatio: 1.333333, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.319757+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:480, height:360, aspectRatio: 1.333333, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.319977+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:640, height:480, aspectRatio: 1.333333, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.320292+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:640, height:480, aspectRatio: 1.333333, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.320503+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:640, height:480, aspectRatio: 1.333333, frameRateRanges:2.000000/60.000000
2020-04-22 17:07:00.320670+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:640, height:480, aspectRatio: 1.333333, frameRateRanges:2.000000/60.000000
2020-04-22 17:07:00.320918+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:960, height:540, aspectRatio: 1.777778, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.321004+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:960, height:540, aspectRatio: 1.777778, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.321227+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1024, height:768, aspectRatio: 1.333333, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.321352+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1024, height:768, aspectRatio: 1.333333, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.321683+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1280, height:720, aspectRatio: 1.777778, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.321754+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1280, height:720, aspectRatio: 1.777778, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.321843+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1280, height:720, aspectRatio: 1.777778, frameRateRanges:2.000000/60.000000
2020-04-22 17:07:00.321910+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1280, height:720, aspectRatio: 1.777778, frameRateRanges:2.000000/60.000000
2020-04-22 17:07:00.322099+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1440, height:1080, aspectRatio: 1.333333, frameRateRanges:2.000000/60.000000
2020-04-22 17:07:00.322153+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1440, height:1080, aspectRatio: 1.333333, frameRateRanges:2.000000/60.000000
2020-04-22 17:07:00.322495+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1080, aspectRatio: 1.777778, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.322551+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1080, aspectRatio: 1.777778, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.322619+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1440, aspectRatio: 1.333333, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.322665+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:1920, height:1440, aspectRatio: 1.333333, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.322875+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:3088, height:2320, aspectRatio: 1.331035, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.323185+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice device format - width:3088, height:2320, aspectRatio: 1.331035, frameRateRanges:2.000000/30.000000
2020-04-22 17:07:00.323299+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findFormatForDevice selected format - width:640, height:480, aspectRatio: 1.333333, frameRateRanges:2.000000/60.000000
2020-04-22 17:07:00.323467+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#findDevice deviceFrameRate:15
2020-04-22 17:07:00.323996+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginRTCVideoCaptureController#startCapture Capture started, device:<AVCaptureFigVideoDevice: 0x101f9f240 [Front Camera][com.apple.avfoundation.avcapturedevice.built-in_video:1]>, format:<AVCaptureDeviceFormat: 0x283addea0 'vide'/'420v' 640x 480, { 2- 60 fps}, HRSI:1928x1170, fov:54.653, binned, max zoom:73.12 (upscales @2.44), ISO:23.0-2208.0, SS:0.000013-0.500000>
2020-04-22 17:07:00.325008+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginMediaStream#init()
2020-04-22 17:07:00.325581+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginMediaStreamTrack#init()
2020-04-22 17:07:00.325950+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginMediaStreamTrack#run() [kind:video, id:7F9F3621-5E4F-4351-AC2C-915CDB507EF8]
2020-04-22 17:07:00.326173+0200 DocMeeToo Te虂le虂consultation[956:208097] PluginMediaStream#run()
2020-04-22 17:07:00.327909+0200 DocMeeToo Te虂le虂consultation[956:208097] THREAD WARNING: ['iosrtcPlugin'] took '49.548340' ms. Plugin should use a background thread.
2020-04-22 17:07:00.337844+0200 DocMeeToo Te虂le虂consultation[956:208097] iosrtcPlugin#MediaStream_init()
2020-04-22 17:07:00.337960+0200 DocMeeToo Te虂le虂consultation[956:208097] iosrtcPlugin#MediaStream_init() | ERROR: pluginMediaStream with id=47DE80A7-4741-40DF-A0F4-4D6312E9A3B2 already exist
2020-04-22 17:07:00.338020+0200 DocMeeToo Te虂le虂consultation[956:208097] iosrtcPlugin#MediaStream_setListener()
2020-04-22 17:07:00.338108+0200 DocMeeToo Te虂le虂consultation[956:208097] iosrtcPlugin#MediaStreamTrack_setListener()
2020-04-22 17:07:00.338169+0200 DocMeeToo Te虂le虂consultation[956:208097] getUserMedia.stream [object MediaStream]
2020-04-22 17:07:00.338214+0200 DocMeeToo Te虂le虂consultation[956:208097] getUserMedia.stream.getTracks [object Object]
2020-04-22 17:07:00.338258+0200 DocMeeToo Te虂le虂consultation[956:208343] PluginMediaStream#setListener()
2020-04-22 17:07:00.338591+0200 DocMeeToo Te虂le虂consultation[956:208343] PluginMediaStreamTrack#setListener() [kind:video, id:7F9F3621-5E4F-4351-AC2C-915CDB507EF8]
2020-04-22 17:07:00.846239+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt utility.c:607: Failed to copyDeviceTreeProperty(IODeviceTree:/arm-io soc-generation)
2020-04-22 17:07:00.846696+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt MobileGestalt.c:6119: Failed to get current SOC Generation string
2020-04-22 17:07:00.849457+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt utility.c:607: Failed to copyDeviceTreeProperty(IODeviceTree:/arm-io soc-generation)
2020-04-22 17:07:00.849957+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt utility.c:607: Failed to copyDeviceTreeProperty(IODeviceTree:/arm-io soc-generation)
2020-04-22 17:07:00.850549+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt utility.c:607: Failed to copyDeviceTreeProperty(IODeviceTree:/arm-io soc-generation)
2020-04-22 17:07:00.851127+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt utility.c:607: Failed to copyDeviceTreeProperty(IODeviceTree:/arm-io soc-generation)
2020-04-22 17:07:00.852274+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt utility.c:607: Failed to copyDeviceTreeProperty(IODeviceTree:/arm-io soc-generation)
2020-04-22 17:07:00.853389+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt utility.c:607: Failed to copyDeviceTreeProperty(IODeviceTree:/arm-io soc-generation)
2020-04-22 17:07:00.858765+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt utility.c:607: Failed to copyDeviceTreeProperty(IODeviceTree:/arm-io soc-generation)
2020-04-22 17:07:00.859145+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt MobileGestalt.c:6119: Failed to get current SOC Generation string
2020-04-22 17:07:00.859837+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt utility.c:607: Failed to copyDeviceTreeProperty(IODeviceTree:/arm-io soc-generation)
2020-04-22 17:07:00.860218+0200 DocMeeToo Te虂le虂consultation[956:208626] libMobileGestalt MobileGestalt.c:6119: Failed to get current SOC Generation string
I could not find any relevant information about this error, so I am posting here.
Here is my code:
let globalRegistered = 0;
function setGlobal(): void {
if (globalRegistered === 0) {
console.log('successfully registered global');
// eslint-disable-next-line
(cordova as any).plugins.iosrtc.registerGlobals();
globalRegistered = 1;
}
}
document.addEventListener('deviceready', setGlobal, false);
// eslint-disable-next-line
const previewCamera = (): Promise<any> => navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
}).then((stream): MediaStream => {
console.log('getUserMedia.stream', stream);
console.log('getUserMedia.stream.getTracks', stream.getTracks());
const localStream = stream;
const remoteContainer: HTMLElement | null = document.getElementById('tesuto');
if (remoteContainer) {
(remoteContainer as any).srcObject = localStream;
}
return localStream;
}).catch((e: any): void => {
console.log('pas cool');
console.log(e);
});
previewCamera is called on a onClick button action. Here is it:
<video id="tesuto" />
<Button onClick={previewCamera} variant="primary" block size="lg">Commencer</Button>
Did I miss something ?
Did you also expose the WebRTC Shim in deviceready ?
// Note: This allow this sample to run on any Browser
var cordova = window.cordova;
if (cordova && cordova.plugins && cordova.plugins.iosrtc) {
// Expose WebRTC and GetUserMedia SHIM as Globals (Optional)
// Alternatively WebRTC API will be inside cordova.plugins.iosrtc namespace
cordova.plugins.iosrtc.registerGlobals();
// Enable iosrtc debug (Optional)
cordova.plugins.iosrtc.debug.enable('*', true);
}
Yes , that's what I'm doing on my setGlobal() function, you can check it in the original post.
Sorry i missed it.
Also may be you need a refresh after srcObject:
if (cordova && cordova.plugins && cordova.plugins.iosrtc) {
//cordova.plugins.iosrtc.refreshVideos();
}
Just tested the README usage and it works for me:
const remoteContainer = document.getElementById('video');
VS
<video id="tesuto" />
Bad video ID first i would say
video vs tesuto
globalRegistered is undefined also.
Your errors:
document.getElementById('video'); vs <video id="tesuto" />globalRegistered aka var globalRegistered = 0; vs globalRegistered === 0 This works for me here is the fixed source:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
</head>
<body>
<video id="video" />
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript">
"use strict";
var globalRegistered = 0;
function setGlobal() {
if (globalRegistered === 0) {
console.log('successfully registered global');
// eslint-disable-next-line
cordova.plugins.iosrtc.registerGlobals();
globalRegistered = 1;
}
}
// eslint-disable-next-line
const previewCamera = () => navigator.mediaDevices.getUserMedia({
video: true,
audio: false,
}).then((stream) => {
console.log('getUserMedia.stream', stream);
console.log('getUserMedia.stream.getTracks', stream.getTracks());
const localStream = stream;
const remoteContainer = document.getElementById('video');
if (remoteContainer) {
remoteContainer.srcObject = localStream;
}
return localStream;
}).catch((e) => {
console.log('pas cool');
console.log(e);
});
document.addEventListener('deviceready', function () {
setGlobal();
previewCamera();
}, false);
</script>
</body>
</html>
Result:

Conclusion:
Your at school I can see, Trust 25 years of experience, learn Javascript avoid TypeScript unless you understand Javascript.
Thanks for your help @hthetiot , to be honest I do not want to use TypeScript but my company made this choice before I came on the project so I'm stuck with it for the moment, and removing it from project is on my plans.
Also, I figured out that the <video> id was wrong right after posting here, and changed it to be correct. So I finished up with the same code as you provided.
But despite this, I'm still encoutering the same issue, but I think I know why:
The device I'm using have a microphone issue , a well known issues on iPhone 7, where the audio chipset just break and make every app using microphone working the wrong way.
Please, keep the issue open, until I test it with another device, maybe it could help someone.
Thank you for advices and your time.
@sboudouk come here if you want help http://sylaps.com/r/iosrtc
I cannot keep it open, Unless proven it's an iosrtc issue. join me on Sylaps for live debug.
After meeting with @sboudouk It appear that there is may some improvement on iosrtc at least to catch some error to prevent the application to crash when using enumerateDevice and call an error callback when the device has some issue with GetUserMedia instead of calling succes.
The device had some know hardware issue, I will look more into "Failed to get current SOC Generation string" and collect Sylaps iOS crash logs to report them here.
Congrats to @saghul for helping doctor and patient.