Why XSockets.WebRTC getUserMedia returned undifined?

I'm using Xsocket and Xsocket WebRTC.

Why getUserMedia return undifined?

Here is my consule output:

This appears to be Chrome

This appears to be Chrome

XSockets.WebRTC.latest.js:98

Connection 
Object
ClientGuid: "80e0b08757ef429ea1e87c83e75295f5"
StorageGuid: "893c286b06f443c5b97f19c701fcde13"
clientType: "RFC6455"
__proto__: Object
 default.html:18

event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

MediaStream is added to the PeerConnection undefined

**Here is my full code:**

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.9.0.js"></script>
    <script src="Scripts/XSockets.latest.js"></script>
    <script src="Scripts/adapter.js"></script>
    <script src="Scripts/XSockets.WebRTC.latest.js"></script>

    <script>
        var conn = undefined;
        var webRTC = undefined;

        $(function () {
            ws = new XSockets.WebSocket('ws://127.0.0.1:4502/Generic');


            ws.subscribe(XSockets.Events.open, function (conn) {
                console.log("Connection", conn)
            });

            webRTC = new XSockets.WebRTC(ws, {
                onContextCreated: function (ctx) {
                    console.log("ctx", ctx);
                },
                onContextChange: function (changes) {

                },
                onLocalStream: function (stream) {
                    console.log("stream", stream);
                    attachMediaStream(document.querySelector("#localVideo"), stream);
                },
                onRemoteStream: function (stream) {
                    console.log("stream", stream);
                    attachMediaStream(document.querySelector("#remoteVideo"), stream);
                }
            });



            $('#button-start').on('click', function () {
                webRTC.getUserMedia({audio: true, video: true}, function (result) {
                    console.log("MediaStream is added to the PeerConnection" , result);
                });
            });


        });

    </script>
    <title></title>
</head>
<body>
    <button id="button-start">Start</button>

    <video id="localVideo" autoplay />

    <video id="remoteVideo" autoplay />
</body>
</html>

Solution

I look like you are using an old drprecated version of the XSockets.WebRTC API, i'll try post a quick fix here for you. I recommend you to have a look at this repo at Git ; https://github.com/XSockets/WebRTC

In the code you provided you should move the init of the XSockets.WebRTC() things into the open call back of the broker ; i also notoce that you are using /Generic, that wont work , the controller to use is "Broker" as follows.

    var ws, rtc;
    var myCtx = "1265343559964af892b7ba86205e5927";

    $(function() {
        ws = new XSockets.WebSocket("ws://127.0.0.1:4502/Broker");
        ws.onopen = function(c) {

            rtc = new XSockets.WebRTC(ws);                

            rtc.onpeerconnectioncreated = function(peer) {
                console.log("created a peer", peer);

            };

            rtc.onpeerconnectionlost = function(peer) {
                console.log("lost a peer", peer);

            };


            rtc.oncontextcreated = function(ctx) {
                console.log("ctx", ctx);
            };
            rtc.onlocalstream = function(stream) {
                attachMediaStream(document.querySelector("#myvideo"), stream);
            };

            rtc.getUserMedia(rtc.userMediaConstraints.qvga(false), function() {
                console.log("Yeah, Video");

                // Lets use a static context i.e
                rtc.changeContext(myCtx);

            });

            rtc.onremotestream = function(event) {
                var v = $("<video>").attr("autoplay", "autoplay").appendTo("div");
                attachMediaStream($(v).get(0), event.stream);
            };
        };

    });
</script>

Futher on my .html page contains the following html

<body>
    <div></div>
    <video id="myvideo" autoplay></video>
</body>

Also make sure you include

 <script src="Scripts/jquery-2.1.0.min.js"></script>
<script src="Scripts/XSockets.latest.js"></script>
<script src="Scripts/XSockets.WebRTC.latest.js"></script>

Good luck!