Capturer (iPhone camera) not provided to TVIVideoCapturer for TwilioVideo iOS SDK - ios

Question

I am getting an error where my TwilioVideo module, which expects a Capturer (camera or microphone), is not receiving that input. This error started happening after we switched to Cocoapods for the installation of the SDK and the PureLayout UI library. Previously we had manually installed all these dependencies into XCode.
I am developing a React Native iOS 0.40.0 version, with react-native-cli version 1.0.0. I am using XCode Version 8.2.1 (8C1002), with the iPhone 6 simulator running on iOS 10.2. I am using Cocoapods version 1.2.0. I am using TwilioVideo SDK version 1.0.0-beta5. There is also a 1.0.0-beta6 version, which I have tried as well (with the same result). Reverting to version 1.0.0-beta4 does remove the error, which suggests to me a problem with the way I have implemented registering the audio and video tracks.
Here is my Podfile:
source 'https://github.com/CocoaPods/Specs'
source 'https://github.com/twilio/cocoapod-specs'
target 'MyApp' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
# Pods for MyApp
pod 'TwilioVideo', '1.0.0-beta5'
pod 'PureLayout', '~> 3.0'
target 'MapleNativeProviderTests' do
inherit! :search_paths
# Pods for testing
end
end
I have implemented a TwilioVideo module in XCode based on this repository: react-native-twilio-video-webrtc. He recently updated the repository to work for React Native 0.40.0, which changed the import syntax for XCode. I have tried both with the old import syntax and the new import syntax, and I continue to get the following error when I try to mount my video component:
Here is the documentation for the TwilioVideo SDK. This is the TVIVideoCapturer.
I made a modification to the react-native-twilio-video-webrtc, which is essentially just a thin wrapper for the TwilioVideo SDK using RCT_EXPORT_METHOD to expose key API methods. The library initializes the audio and video tracks in the init method, which causes some annoying behaviours to do with event listeners not receiving callbacks when the application starts. So I moved these tracks to a custom, publicly exposed RCT_EXPORT_METHOD called initialize. This I call from a specific view in the application, which mounts the video and initializes the camera/microphone inputs.
My implementation of TWVideoModule.m is:
#import "TWVideoModule.h"
static NSString* roomDidConnect = #"roomDidConnect";
static NSString* roomDidDisconnect = #"roomDidDisconnect";
static NSString* roomDidFailToConnect = #"roomDidFailToConnect";
static NSString* roomParticipantDidConnect = #"roomParticipantDidConnect";
static NSString* roomParticipantDidDisconnect = #"roomParticipantDidDisconnect";
static NSString* participantAddedVideoTrack = #"participantAddedVideoTrack";
static NSString* participantRemovedVideoTrack = #"participantRemovedVideoTrack";
static NSString* participantAddedAudioTrack = #"participantAddedAudioTrack";
static NSString* participantRemovedAudioTrack = #"participantRemovedAudioTrack";
static NSString* participantEnabledTrack = #"participantEnabledTrack";
static NSString* participantDisabledTrack = #"participantDisabledTrack";
static NSString* cameraDidStart = #"cameraDidStart";
static NSString* cameraWasInterrupted = #"cameraWasInterrupted";
static NSString* cameraDidStopRunning = #"cameraDidStopRunning";
#interface TWVideoModule () <TVIParticipantDelegate, TVIRoomDelegate, TVIVideoTrackDelegate, TVICameraCapturerDelegate>
#end
#implementation TWVideoModule
#synthesize bridge = _bridge;
RCT_EXPORT_MODULE();
- (dispatch_queue_t)methodQueue
{
return dispatch_get_main_queue();
}
- (NSArray<NSString *> *)supportedEvents
{
return #[roomDidConnect,
roomDidDisconnect,
roomDidFailToConnect,
roomParticipantDidConnect,
roomParticipantDidDisconnect,
participantAddedVideoTrack,
participantRemovedVideoTrack,
participantAddedAudioTrack,
participantRemovedAudioTrack,
participantEnabledTrack,
participantDisabledTrack,
cameraDidStopRunning,
cameraDidStart,
cameraWasInterrupted];
}
- (instancetype)init
{
self = [super init];
if (self) {
UIView* remoteMediaView = [[UIView alloc] init];
//remoteMediaView.backgroundColor = [UIColor blueColor];
//remoteMediaView.translatesAutoresizingMaskIntoConstraints = NO;
self.remoteMediaView = remoteMediaView;
UIView* previewView = [[UIView alloc] init];
//previewView.backgroundColor = [UIColor yellowColor];
//previewView.translatesAutoresizingMaskIntoConstraints = NO;
self.previewView = previewView;
}
return self;
}
- (void)dealloc
{
[self.remoteMediaView removeFromSuperview];
self.remoteMediaView = nil;
[self.previewView removeFromSuperview];
self.previewView = nil;
self.participant = nil;
self.localMedia = nil;
self.camera = nil;
self.localVideoTrack = nil;
self.videoClient = nil;
self.room = nil;
}
RCT_EXPORT_METHOD(initialize) {
self.localMedia = [[TVILocalMedia alloc] init];
self.camera = [[TVICameraCapturer alloc] init];
NSLog(#"Camera %#", self.camera);
self.camera.delegate = self;
self.localVideoTrack = [self.localMedia addVideoTrack:YES
capturer:self.camera
constraints:[self videoConstraints]
error:nil];
self.localAudioTrack = [self.localMedia addAudioTrack:YES];
if (!self.localVideoTrack) {
NSLog(#"Failed to add video track");
} else {
// Attach view to video track for local preview
[self.localVideoTrack attach:self.previewView];
}
}
The rest of this file pertains to adding and removing tracks and joining/disconnecting from the Twilio channel, so I have not included it. I also have TWVideoPreviewManager and TWRemotePreviewManager, which simply provide UIViews for the media objects for local and remote video streams.
My TwilioVideoComponent.js component is:
import React, { Component, PropTypes } from 'react'
import {
NativeModules,
NativeEventEmitter
} from 'react-native';
import {
View,
} from 'native-base';
const {TWVideoModule} = NativeModules;
class TwilioVideoComponent extends Component {
state = {};
static propTypes = {
onRoomDidConnect: PropTypes.func,
onRoomDidDisconnect: PropTypes.func,
onRoomDidFailToConnect: PropTypes.func,
onRoomParticipantDidConnect: PropTypes.func,
onRoomParticipantDidDisconnect: PropTypes.func,
onParticipantAddedVideoTrack: PropTypes.func,
onParticipantRemovedVideoTrack: PropTypes.func,
onParticipantAddedAudioTrack: PropTypes.func,
onParticipantRemovedAudioTrack: PropTypes.func,
onParticipantEnabledTrack: PropTypes.func,
onParticipantDisabledTrack: PropTypes.func,
onCameraDidStart: PropTypes.func,
onCameraWasInterrupted: PropTypes.func,
onCameraDidStopRunning: PropTypes.func,
...View.propTypes,
};
_subscriptions = [];
constructor(props) {
super(props);
this.flipCamera = this.flipCamera.bind(this);
this.startCall = this.startCall.bind(this);
this.endCall = this.endCall.bind(this);
this._eventEmitter = new NativeEventEmitter(TWVideoModule)
}
//
// Methods
/**
* Initializes camera and microphone tracks
*/
initializeVideo() {
TWVideoModule.initialize();
}
flipCamera() {
TWVideoModule.flipCamera();
}
startCall({roomName, accessToken}) {
TWVideoModule.startCallWithAccessToken(accessToken, roomName);
}
endCall() {
TWVideoModule.disconnect();
}
toggleVideo() {
TWVideoModule.toggleVideo();
}
toggleAudio() {
TWVideoModule.toggleAudio();
}
_unregisterEvents() {
this._subscriptions.forEach(e => e.remove());
this._subscriptions = []
}
_registerEvents() {
this._subscriptions = [
this._eventEmitter.addListener('roomDidConnect', (data) => {
if (this.props.onRoomDidConnect) {
this.props.onRoomDidConnect(data)
}
}),
this._eventEmitter.addListener('roomDidDisconnect', (data) => {
if (this.props.onRoomDidDisconnect) {
this.props.onRoomDidDisconnect(data)
}
}),
this._eventEmitter.addListener('roomDidFailToConnect', (data) => {
if (this.props.onRoomDidFailToConnect) {
this.props.onRoomDidFailToConnect(data)
}
}),
this._eventEmitter.addListener('roomParticipantDidConnect', (data) => {
if (this.props.onRoomParticipantDidConnect) {
this.props.onRoomParticipantDidConnect(data)
}
}),
this._eventEmitter.addListener('roomParticipantDidDisconnect', (data) => {
if (this.props.onRoomParticipantDidDisconnect) {
this.props.onRoomParticipantDidDisconnect(data)
}
}),
this._eventEmitter.addListener('participantAddedVideoTrack', (data) => {
if (this.props.onParticipantAddedVideoTrack) {
this.props.onParticipantAddedVideoTrack(data)
}
}),
this._eventEmitter.addListener('participantRemovedVideoTrack', (data) => {
if (this.props.onParticipantRemovedVideoTrack) {
this.props.onParticipantRemovedVideoTrack(data)
}
}),
this._eventEmitter.addListener('participantAddedAudioTrack', (data) => {
if (this.props.onParticipantAddedAudioTrack) {
this.props.onParticipantAddedAudioTrack(data)
}
}),
this._eventEmitter.addListener('participantRemovedAudioTrack', (data) => {
if (this.props.onParticipantRemovedAudioTrack) {
this.props.onParticipantRemovedAudioTrack(data)
}
}),
this._eventEmitter.addListener('participantEnabledTrack', (data) => {
if (this.props.onParticipantEnabledTrack) {
this.props.onParticipantEnabledTrack(data)
}
}),
this._eventEmitter.addListener('participantDisabledTrack', (data) => {
if (this.props.onParticipantDisabledTrack) {
this.props.onParticipantDisabledTrack(data)
}
}),
this._eventEmitter.addListener('cameraDidStart', (data) => {
if (this.props.onCameraDidStart) {
this.props.onCameraDidStart(data)
}
}),
this._eventEmitter.addListener('cameraWasInterrupted', (data) => {
if (this.props.onCameraWasInterrupted) {
this.props.onCameraWasInterrupted(data)
}
}),
this._eventEmitter.addListener('cameraDidStopRunning', (data) => {
if (this.props.onCameraDidStopRunning) {
this.props.onCameraDidStopRunning(data)
}
})
]
}
componentWillMount() {
this._eventEmitter.addListener('cameraDidStart', (data) => {
if (this.props.onCameraDidStart) {
this.props.onCameraDidStart(data)
}
});
this._registerEvents()
}
componentWillUnmount() {
this._unregisterEvents()
}
render() {
return this.props.children || null
}
}
export default TwilioVideoComponent;
I'm not sure how to modify the XCode to have compatibility with the TwilioVideo beta5 API. Any help would be appreciated.

Answer 1

In your podfile, look for # use_frameworks! and remove the #.