# React Native orientation

**URL:** <https://mediasoup.discourse.group/t/react-native-orientation/1041>\
**Category:** mediasoup libraries\
**Created:** [May 19, 2020, 2:04am UTC](https://mediasoup.discourse.group/t/react-native-orientation/1041 "2020-05-19T02:04:59Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![alejinho](https://avatars.discourse-cdn.com/v4/letter/a/9f8e36/32.png) [@alejinho](https://mediasoup.discourse.group/u/alejinho)\
**Post date:** [May 19, 2020, 2:04am UTC](https://mediasoup.discourse.group/t/react-native-orientation/1041/1 "2020-05-19T02:04:59Z")

</div>

Hi, everyone.

I’m just starting with mediasoup, and have been playing around with the sandbox project but found some problem. Every time some peer subscribes to the video track it look in landscape orientation, and I can not figure out how to make it rotate depending of the orientation.

[This is a dummy project](https://github.com/Alejinho/rnmediasoup-sandbox) where you can find the code that I’m working on, it works with the sandbox-project server.

Any advice or trick to accomplish this?

BTW mediasoup is a really nice piece of software, thanks for sharing. \<3

---

<div class="post-metadata">

**Author:** ![ibc](https://yyz2.discourse-cdn.com/free1/user_avatar/mediasoup.discourse.group/ibc/32/1540_2.png) [@ibc](https://mediasoup.discourse.group/u/ibc)\
**Post date:** [May 19, 2020, 3:07pm UTC](https://mediasoup.discourse.group/t/react-native-orientation/1041/2 "2020-05-19T15:07:35Z")

</div>

This may help, but I don’t know the limitations of React Native when it comes to support that extension:

> **[mediasoup :: Tricks](https://mediasoup.org/documentation/v3/tricks/#rtp-capabilities-filtering)**
>
> Cutting Edge WebRTC Video Conferencing

---

<div class="post-metadata">

**Author:** ![alejinho](https://avatars.discourse-cdn.com/v4/letter/a/9f8e36/32.png) [@alejinho](https://mediasoup.discourse.group/u/alejinho)\
**Post date:** [May 19, 2020, 3:08pm UTC](https://mediasoup.discourse.group/t/react-native-orientation/1041/3 "2020-05-19T15:08:59Z")

</div>

Thanks, I’ll try it.

---

<div class="post-metadata">

**Author:** ![alejinho](https://avatars.discourse-cdn.com/v4/letter/a/9f8e36/32.png) [@alejinho](https://mediasoup.discourse.group/u/alejinho)\
**Post date:** [May 19, 2020, 8:40pm UTC](https://mediasoup.discourse.group/t/react-native-orientation/1041/4 "2020-05-19T20:40:52Z")

</div>

**EDIT: Sorry, my bad, I just need to update the HTML video dimensions. 😰**

Cool, the problem is Firefox, filtering the header extension by the uri `urn:3gpp:video-orientation` will fix the orientation problem but the aspect ratio will not be ok. This is how it looks before and after in the receiver side using Chrome.

 ![índice](https://global.discourse-cdn.com/free1/uploads/mediasoup/original/1X/58ca7710405c40c373ebe09beaaa6280345f1a86.png)

I’ve found some forums talking about this:

- [https://github.com/react-native-webrtc/react-native-webrtc/issues/513](https://github.com/react-native-webrtc/react-native-webrtc/issues/513)
- [https://bugzilla.mozilla.org/show\_bug.cgi?id=1340372](https://bugzilla.mozilla.org/show_bug.cgi?id=1340372)

What would be the best solution?

- The apps must rotate video frames manually before sending them.
- Add some data in the peer object about the orientation, that way the receiver could rotate the video if needed.