WebRTC local stream disappears on HTML input click

Question

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();
                }
            });
        });
    });

Answer 1

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.