Video Display Issues on iOS

[rsnay]

When using this module in an app on iOS and Android, the local preview video view is distorted or weirdly transformed on iOS. As shown in this screenshot, the highlighted <PreviewVideoView> on the iPhone on the right does not show everything that the camera actually captures, but the Android device on the left shows the entire frame of the video the iOS device is transmitting. (The same amount of my hand should be visible in both)

I'm using this code on iOS, which should show or "contain" the entire preview video frame, but it does not:

<PreviewVideoView
	style={{width: 100, height: 177, position: 'absolute', bottom: 15, right: 15, zIndex: 10 }}
	deviceId={videoMedia.videoStream.captureDevice}
	objectFit="contain"
/>

Additionally, the video transmitted by the iOS device is rotated 90 degrees, which should not happen. As shown above, the light (white bar) in the video should be at the top in all 4 video views, since both devices are in the same orientation looking at the same thing.

How can these issues be resolved? Thanks!

[florindumitru]

Same for me, did you find any solution ?

[mtzfactory]

Hi, can you share an example on how to use PreviewVideoView and RemoteVideoView components please? I would like to have the video call feature in my app...

[rsnay]

@mtzfactory It's been a while since I've used this, but here was the code I previously had. The style attributes will need to be changed, but hopefully it’s helpful.

// Get video media from call
const videoMedia = call.getMedia().find((media) => media['type'] === 'PJMEDIA_TYPE_VIDEO')

// Render these
<RemoteVideoView
  style={{ position: 'absolute', width: 320, height: 480, top: 0, bottom: 0, left: 0, right: 0, backgroundColor: "#ccccff" }}
  windowId={videoMedia.videoStream.windowId}
  objectFit="contain"
/>
<PreviewVideoView
  style={{ position: 'absolute', bottom: -10, right: 10, width: 135, height: 135, justifyContent: 'flex-end', alignItems: 'flex-end', alignSelf : 'stretch' }}
  deviceId={videoMedia.videoStream.captureDevice}
  objectFit="cover"
/>

[Soliy0u]

@mtzfactory It's been a while since I've used this, but here was the code I previously had. The style attributes will need to be changed, but hopefully it’s helpful.

// Get video media from call
const videoMedia = call.getMedia().find((media) => media['type'] === 'PJMEDIA_TYPE_VIDEO')

// Render these
<RemoteVideoView
  style={{ position: 'absolute', width: 320, height: 480, top: 0, bottom: 0, left: 0, right: 0, backgroundColor: "#ccccff" }}
  windowId={videoMedia.videoStream.windowId}
  objectFit="contain"
/>
<PreviewVideoView
  style={{ position: 'absolute', bottom: -10, right: 10, width: 135, height: 135, justifyContent: 'flex-end', alignItems: 'flex-end', alignSelf : 'stretch' }}
  deviceId={videoMedia.videoStream.captureDevice}
  objectFit="cover"
/>

I have problem when make video call: this is my log when call changed: {"_id":3,"_callId":"iH6YtbchyMwMN47hq6v.DXcLRSCyWSEc","_accountId":2,"_localContact":"sip:[email protected]:59864;transport=TCP;app-id=vn.myapp.pro;pn-voip-tok=1d64d90266cb4856c9bf2ef299cf3ee4e0dddad39a7320732c4f9b965d0dcf82259;pn-im-tok=53750ee643926b1546041a491ba2b7b9bf99f131f77906968f68fde7456a8436;ob","_localUri":"100 sip:100@test","_remoteContact":"sip:[email protected]:5060;transport=tcp","_remoteUri":"sip:102@test","_state":"PJSIP_INV_STATE_CONNECTING","_stateText":"CONNECTING","_held":false,"_muted":false,"_speaker":false,"_connectDuration":-1,"_totalDuration":8,"_remoteOfferer":0,"_remoteAudioCount":0,"_remoteVideoCount":0,"_remoteNumber":"102","_remoteName":null,"_audioCount":1,"_videoCount":1,"_lastStatusCode":"PJSIP_SC_OK","_lastReason":"OK","_media":[{"status":"PJSUA_CALL_MEDIA_ACTIVE","dir":"PJMEDIA_DIR_ENCODING_DECODING","videoStream":{"captureDevice":0,"windowId":1},"audioStream":{"confSlot":1},"type":"PJMEDIA_TYPE_AUDIO"},{"status":"PJSUA_CALL_MEDIA_NONE","dir":"PJMEDIA_DIR_NONE","videoStream":{"captureDevice":-3,"windowId":-1},"audioStream":{"confSlot":-1},"type":"PJMEDIA_TYPE_VIDEO"}],"_provisionalMedia":[{"status":"PJSUA_CALL_MEDIA_ACTIVE","dir":"PJMEDIA_DIR_ENCODING_DECODING","videoStream":{"captureDevice":0,"windowId":1},"audioStream":{"confSlot":1},"type":"PJMEDIA_TYPE_AUDIO"},{"status":"PJSUA_CALL_MEDIA_NONE","dir":"PJMEDIA_DIR_NONE","videoStream":{"captureDevice":-3,"windowId":-1},"audioStream":{"confSlot":-1},"type":"PJMEDIA_TYPE_VIDEO"}],"_constructionTime":1592466505,"_sipNumber":"","_uuid":"e140f38a-5a20-41e6-b1ff-b633f2s231d51af","_roundTripTime":{"max":"25","avg":"22","min":"19"}} with PJMEDIA_TYPE_VIDEO, data is {"captureDevice":-3,"windowId":-1}. I can't show remote video or local video. My JS code: renderVideoRemote = () => { let videoMedia = call.getMedia().find((media) => media['type'] === 'PJMEDIA_TYPE_VIDEO'); return ( <View> <RemoteVideoView style={{ position: 'absolute', zIndex:100, width: 320, height: 480, top: 0, bottom: 0, left: 0, right: 0}} windowId={videoMedia.videoStream.windowId} objectFit="contain" /> <PreviewVideoView style={{ position: 'absolute', zIndex:100, bottom: -10, right: 10, width: 135, height: 135, justifyContent: 'flex-end', alignItems: 'flex-end', alignSelf : 'stretch' }} deviceId={videoMedia.videoStream.captureDevice} // deviceId ={3} objectFit="cover" /> </View> ) } Please help me, thank you so much!!!

[pistonsky]

Same here! No idea how to make those video calls working. Absolutely no docs around it, I'm trying to read the source code, but with no success. Please help!

And when I do call.getMedia() - it returns []