0

The WebRTC stream seems to all be working fine at first with everyone in the conference. Unfortunately, when you click on certain HTML elements the local stream video disappears.

You are still able to see the remote users and remote users can both see/hear you but you are unable to see yourself.

Once the local stream has disappeared, destroying and re-initializing the connection/WebRTC widget won't make the local video reappear. The browser needs to be refreshed but clicking on the HTML element causes the same problem to appear again.

There are no javascript errors and the only thing on the HTML element is a focus event which sets a local variable (it's not doing anything crazy).

Is there anything I can do to stop this?

    goinstant.connect(url, function(err, connection) {
        if (err) {
            throw err;
        }

        var room = connection.room("new_room_id");

        room.join(function(err) {
            room.self().key("displayName").set("my_username");

            var stun = {
                url: 'stun:stun.l.google.com:19302'
            };

            var turn = {
                url: 'turn:numb.viagenie.ca',
                username: 'turn@username.com',
                credential: 'password'
            };

            that._webrtc = new goinstant.widgets.WebRTC({
                room: room,
                autoStart: true,
                peerConnectionConfig: {
                    iceServers: [stun, turn]
                }
            });

            webrtc.initialize(function(err) {
                if (err) {
                    console.log("Error starting video: " + err);
                }
                else {
                    $(".gi-webrtc").draggable();
                }
            });
        });
    });
JumpJumpSlash
  • 13
  • 3
  • Only can say anything after view your code, So post your code first. – Suman Bogati Mar 30 '14 at 03:20
  • I've added the code I use to set up the connection. The app is build using backbone.js – JumpJumpSlash Mar 30 '14 at 22:02
  • We tried reproducing this locally with jQuery#draggable but was unsuccessful. Is there a live demo of your app that we can use for debugging this issue? – GoInstant Support Mar 31 '14 at 18:49
  • Most definitely! Here's a link to a board that you can debug on http://gamestorming-10443.onmodulus.net/board/533acfb6c32f5e000000000d – JumpJumpSlash Apr 01 '14 at 14:46
  • If you try removing the class 'gi-stream' from the video element like so $('.gi-local video').attr('class', '') this stops happening. Is it possible that you have some code that interacts with the video element via its className when you click the chat textarea? – GoInstant Support Apr 03 '14 at 13:59
  • Update. The problem is caused by the "-webkit-transform: scaleX(-1)" style. This causes the video element to not render when you click the textarea, appears to be a bug with webkit-transform on a video element. – GoInstant Support Apr 03 '14 at 14:19

1 Answers1

0

This occurs when you click on a textarea on the page.

Removing the "-webkit-transform: scaleX(-1)" style from the video in the HTML stops this from occurring.

JumpJumpSlash
  • 13
  • 3