alongubkin / phonertc

WebRTC for Cordova apps - No longer active
http://phonertc.io
Apache License 2.0
867 stars 305 forks source link

Hi, My App crashes whenever I start the video call app-browser & app-app. #125

Open tjsas1 opened 9 years ago

tjsas1 commented 9 years ago

Hi,

I am blessed to find this Plugin because it is really a good help. But I can't manage to make it work in such a way app-browser and app-app (at least on my side using Android) communication will run.

What it does are as follows:

Environment:

  1. Phonegap/Cordova
  2. Plugin - com.dooble.phonertc Plugin - org.apache.cordova.console Plugin - org.apache.cordova.device
  3. Browser - Version 39.0.2171.95 m
  4. App - Android 4.4.2

Hope you can help me with this.

You may see may code below:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <style type="text/css">
            .call {
                color: red;
                cursor: pointer;
            }

            .container {
                width: 500px;
                height: 500px;
            }

            .divVideos {
                width: 300px;
                height: 300px;
                background-color: gold;
                position: relative;
            }
        </style>
        <title>Hello World</title>
    </head>
    <body>
        <div class="app">
            <h1>PhoneRTC</h1>
            <ul id='clients'>

            </ul>
        </div>
        <div id="host"></div>
        <div class="container">
            <div id="divVideos">
                SOMETHIMG
            </div>

        </div>
        <h2 id="divConnectionStatus">Connection Status</h2>
        <h2 id="divIncoming">Waiting...</h2>

        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
        <script type="text/javascript" src="js/signalr.js"></script>

        <script type="text/javascript">
            document.addEventListener('deviceready', PhoneRTCInit, false);
            var xhost = "";
            var xclient = "";
            var session = null;
            var duplicates = [];
            var con;
            var proxy;

            function phonertc(host) {
                var config = {
                    isInitiator : host,
                    turn : {
                        host : "turn:mytrunserver.com:3478?transport=tcp",
                        username : "username",
                        password : "password"
                    },
                    streams : {
                        audio : true,
                        video : true
                    }
                };

                session = new cordova.plugins.phonertc.Session(config);

                cordova.plugins.phonertc.setVideoView({
                    container : document.getElementById('divVideos'),
                    local : {
                        position : [0, 0],
                        size : [200, 200]
                    }
                });

                session.on('sendMessage', function(data) {
                    console.log("Send Message");
                    proxy.invoke("CallDataSend", xclient, JSON.stringify(data));
                });

                session.on('answer', function() {
                    console.log("Answer");
                });

                session.on('disconnect', function() {
                    //session.close();
                    console.log("Close");
                });

                //session.call();
            }

            function PhoneRTCInit() {
                con = $.hubConnection("http://mySignalRwebsite.com");
                proxy = con.createHubProxy("rtcHub");

                //connection handling
                con.stateChanged(function(change) {
                    if (change.newState == $.signalR.connectionState.disconnected) {
                        $("#divConnectionStatus").html("(Disconnected)");
                    } else if (change.newState === $.signalR.connectionState.reconnecting) {
                        $("#divConnectionStatus").html("(Reconnecting)");
                    } else if (change.newState === $.signalR.connectionState.connected) {
                        $("#divConnectionStatus").html("(Connected)");
                    } else if (change.newState === $.signalR.connectionState.connecting) {
                        $("#divConnectionStatus").html("(Connecting)");
                    }

                });

                //client user defined events
                proxy.on("Joined", function(username) {
                    var item = '<li data-username="' + username + '" class="call">' + username + '</li>';
                    $("#clients").append(item);
                });

                proxy.on("ClientInitializeCall", function(cHost) {
                    xclient = cHost;
                    $("#divIncoming").text("Incoming caller : " + xclient);
                    phonertc(false);
                    setTimeout(function() {
                        proxy.invoke("CallHasBeenInitialized", xclient);
                    }, 1500);
                });

                proxy.on("CallHasBeenInitialized", function() {
                    if (session == null) {
                        phonertc(true);
                    }
                    setTimeout(function() {
                        cordova.plugins.phonertc.showVideoView();
                    }, 1500);
                });

                proxy.on("CallDataRecieve", function(data) {
                    //console.log("CallDataRecieve");
                    if (duplicates.indexOf(data) < 0) {
                        console.log("Received");
                        if (session == null) {
                            phonertc(true);
                        }
                        session.receiveMessage($.parseJSON(data));
                        duplicates.push(data);
                    }
                });

                con.start({
                    transport : 'longPolling'
                }).done(function() {
                    //get username
                    xhost = (Math.random().toString(36).substring(7));
                    $("#host").text(xhost);
                    //call init
                    proxy.invoke("Join", xhost).done(function() {

                        $("body").delegate(".call", "click", function() {
                            $(".app").hide();
                            xclient = $(this).attr("data-username");
                            //notify for call
                            proxy.invoke("ClientInitializeCall", xclient, xhost).done(function() {
                                //console.log("Call has been placed");

                            }).fail(function() {
                                //console.log("Failed to place a call");
                                $(".app").show();
                            });
                        });

                    });

                }).fail(function() {
                    $("#divConnectionStatus").text("(Connection Failed)");
                });
            }

        </script>
    </body>
</html>

God Bless!

DerekV commented 9 years ago

I had this happen to me as well using some code a lot like this, but it worked once I set a height and width on the div for the video container like <div id="divVideos" style="width: 300px; height: 300px;"></div>

Also solves a problem with one-way video on ios. See http://stackoverflow.com/questions/27403534/phonertc-on-ios-video-only-works-one-way/29396439#29396439