1057145 - [Loop]The Camera feed is shifted to the right during a video call

Status: RESOLVED FIXED

(Firefox OS Graveyard :: Gaia::Loop, defect)

Description

[Jayme Mercado [:JMercado] (Inactive 3/4/2016)]

Attachment: Device A.png

Description:
When a user centers themselves in the preview at the bottom of the screen, the feed sent to the other device shows them on the far right.


Repro Steps:
1) Update a Flame to 20140821030000 on two devices
2) Set up Loop on both devices
3) Have one device video call another
4) Center the video previews on both devices


Actual:
Both devices show the other feed as shifted to the right.


Expected:
The video feeds are centered on the other device.

Environmental Variables:
Device: Flame 2.0 (319 MB)
Build ID: 20140821030000
Gaia: ed257456c512c3b345f5a89e9211581e7ae0f1c0
Gecko: 6329352ca531b977979451e77e5862af485388b2
Version: 32.0 (2.0)
Firmware Version: 165
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Loop version: 8c71431


Repro frequency: 100%
See attached: screenshots

Comment 1

[Jayme Mercado [:JMercado] (Inactive 3/4/2016)]

This issue does occur on 2.1 Flame, 2.0 Flame on the v123 base, 2.0 Flame (512 MB) on the v165 base and 2.0 OpenC.
The video feeds are shifted to the right on the receiving device.

Environmental Variables:
Device: Flame Master
BuildID: 20140821040201
Gaia: 3584b2723412ed3299c6761f465885d80651c87e
Gecko: dac8b4a0bd7c
Version: 34.0a1 (Master) 
Firmware Version: v123
User Agent: Mozilla/5.0 (Mobile; rv:34.0) Gecko/34.0 Firefox/34.0

Environmental Variables:
Device: Flame 2.0
BuildID: 20140821000201
Gaia: 60cedd4aa6ba408174bcd20a7bf774e73f927674
Gecko: 45eca5871dd0
Version: 32.0 (2.0) 
Firmware Version: v123
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Environmental Variables:
Device: Flame 2.0 (512 MB)
Build ID: 20140821030000
Gaia: ed257456c512c3b345f5a89e9211581e7ae0f1c0
Gecko: 6329352ca531b977979451e77e5862af485388b2
Version: 32.0 (2.0)
Firmware Version: 165
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Environmental Variables:
Device: Open_C 2.0
BuildID: 20140821000201
Gaia: 60cedd4aa6ba408174bcd20a7bf774e73f927674
Gecko: 45eca5871dd0
Version: 32.0 (2.0) 
Firmware Version: P821A10V1.0.0B06_LOG_DL
User Agent: Mozilla/5.0 (Mobile; rv:32.0) Gecko/32.0 Firefox/32.0

Comment 2

[Jayme Mercado [:JMercado] (Inactive 3/4/2016)]

Attachment: Device B.png

Comment 3

[Jayme Mercado [:JMercado] (Inactive 3/4/2016)]

The 2.0 Flame on the v123 base in comment 1 is on 319 MB.

Comment 4

[KTucker [:KTucker][Inactive 3/4/2016]]

Please include a logcat for this issue.

Comment 5

[Jayme Mercado [:JMercado] (Inactive 3/4/2016)]

Attachment: Shifted camera logcat.txt

Comment 6

[KTucker [:KTucker][Inactive 3/4/2016]]

Massimo, can you take look at this issue and weigh in on whether or not this should be nominated as a blocker?

Comment 7

[Maria Angeles Oteo (:oteo)]

We don't think this should be a blocker

Comment 8

[Mark Banner (:standard8)]

Attachment: Desktop to Flame

I just tried a Desktop - Flame call using the latest loop master (via link sharing). Here's the screenshot that I get.

You can see that the flame device only shows a small proportion of my local camera, and its so far off centre that my face isn't even on the screen.

This is using a Flame 2.2 build (35.0a1), build id 20140918040210, with a Mac Book Pro with a Logitech 1080p HD camera (I forget the model).

Comment 9

[Maria Angeles Oteo (:oteo)]

Testing a call between Desktop and Flame, the camera feed is left to the right even more than in the screenshot attached by Mark.
So changing the severity of the bug to blocker due to the Desktop-FirefoxOS scenario.

Comment 11

[José Antonio Olivera Ortega [:jaoo]]

Update: We are blocked here and need some help from our friends at Tokbox. Song is having a look. I hope we can keep us updated about his progress.

Comment 12

[song]

I think I have identified the problem. In call_screen/style/oncall.css I noticed that you are changing the css of opentok elements. This causes unexpected behavior and is very hard to debug, I'd advise against it: https://github.com/mozilla-b2g/firefoxos-loop-client/blob/master/app/call_screen/style/oncall.css#L737

I have successfully reproduced the bug in this sample code: http://jsbin.com/joxeju/5/edit
The easiest fix is to remove lines to style OT_video-container: https://github.com/mozilla-b2g/firefoxos-loop-client/blob/master/app/call_screen/style/oncall.css#L737
 
If you want the stream to fill a parent element, the best practice is to apply your css to ONLY the parent element (that you created). Then when you call session.subscribe, pass in the following properties: {insertMode: 'append', width: "100%", height: "100%"}

This will create an OpenTok element that fills up your parent element and you won't need to touch any of opentok elements (video and .OT_video-container)

Comment 13

[Maria Angeles Oteo (:oteo)]

Cristian, as Borja is on PTO, could you have look at what song describes in comment 12?

Comment 14

[song]

Attachment: fixed centering issue

Comment 15

[song]

Fixed the bug and created a pull request: https://github.com/mozilla-b2g/firefoxos-loop-client/pull/260

Picture of fix working: https://bug1057145.bugzilla.mozilla.org/attachment.cgi?id=8513098

Comment 16

[José Antonio Olivera Ortega [:jaoo]]

Wow, it works as expected. Thank you Song. We'll review the change and land this today!

Comment 17

[José Antonio Olivera Ortega [:jaoo]]

Attachment: Pointer to Github PR https://github.com/mozilla-b2g/firefoxos-loop-client/pull/260

Comment 18

[Cristian Rodriguez (:crdlc)]

seems there is a patch here

Comment 19

[Cristian Rodriguez (:crdlc)]

Comment on attachment 8513280 [details] [review]
Pointer to Github PR https://github.com/mozilla-b2g/firefoxos-loop-client/pull/260

LGTM and it works like a charm. Left a comment, please address before merging, thanks a lot, good job

Comment 20

[José Antonio Olivera Ortega [:jaoo]]

Landed on master branch at:

https://github.com/mozilla-b2g/firefoxos-loop-client/commit/6dd3cf9575e6155958437825239c9cc6cecd5262

Comment 21

[José Antonio Olivera Ortega [:jaoo]]

Landed on 1.1 branch at:

https://github.com/mozilla-b2g/firefoxos-loop-client/commit/d2c9881f2cc8496fc3aaaea160ef6019aad5ea94