修改WebRTC应用程序

时间:2018-02-07 18:05:34

标签: javascript node.js websocket webrtc econnreset

我正在尝试构建WebRTC应用程序并使用书中的示例来测试它。 现在我试图修改它,但它不能以某种方式工作...... 我收到了消息:

  

{错误:读取ECONNRESET      at _errnoException(util.js:1022:11)      在TCP.onread(net.js:615:25)代码:' ECONNRESET',错误:' ECONNRESET',系统调用:'读' }

为了安装WebSocketServer,我使用了以下代码:

var WebSocketServer = require('ws').Server,
wss = new WebSocketServer({ port: 8888 }),
users = {};

wss.on('connection', function (connection) {
connection.on('message', function (message) {
var data;

try {
  data = JSON.parse(message);
} catch (e) {
  console.log("Error parsing JSON");
  data = {};
}

switch (data.type) {
  case "login":
    console.log("User logged in as", data.name);
    if (users[data.name]) {
      sendTo(connection, {
        type: "login",
        success: false
      });
    } else {
      users[data.name] = connection;
      connection.name = data.name;
      sendTo(connection, {
        type: "login",
        success: true
      });
    }

    break;
  case "offer":
    console.log("Sending offer to", data.name);
    var conn = users[data.name];

    if (conn != null) {
      connection.otherName = data.name;
      sendTo(conn, {
        type: "offer",
        offer: data.offer,
        name: connection.name
      });
    }

    break;
  case "answer":
    console.log("Sending answer to", data.name);
    var conn = users[data.name];

    if (conn != null) {
      connection.otherName = data.name;
      sendTo(conn, {
        type: "answer",
        answer: data.answer
      });
    }

    break;
  case "candidate":
    console.log("Sending candidate to", data.name);
    var conn = users[data.name];

    if (conn != null) {
      sendTo(conn, {
        type: "candidate",
        candidate: data.candidate
      });
    }

    break;
  case "leave":
    console.log("Disconnecting user from", data.name);
    var conn = users[data.name];
    conn.otherName = null;

    if (conn != null) {
      sendTo(conn, {
        type: "leave"
      });
    }

    break;
  default:
    sendTo(connection, {
      type: "error",
      message: "Unrecognized command: " + data.type
    });

    break;
}
});

connection.on('close', function () {
if (connection.name) {
  delete users[connection.name];

  if (connection.otherName) {
    console.log("Disconnecting user from", connection.otherName);
    var conn = users[connection.otherName];
    conn.otherName = null;

    if (conn != null) {
      sendTo(conn, {
        type: "leave"
      });
    }
  }
}
});
});

function sendTo(conn, message) {
conn.send(JSON.stringify(message));
}

wss.on('listening', function () {
console.log("Server started...");
});
process.on('uncaughtException', function (err) {
console.log(err);
}); 

以下html代码可以正常工作:

 ...
<?php
echo '
 <div id="login-page" class="page">
 <h2>Login As</h2>
  <input type="hidden" id="username" value="' . $username . '" />
  <button id="login">Login</button>
  </div>
  <div id="call-page" class="page">
  <div id="videochat">
  <video id="yours" autoplay></video>
  <video id="theirs" autoplay></video>
  </div>
  <input type="text" id="their-username" />
  <button id="call">Call</button>
  <button id="hang-up">Hang Up</button>
  </div>
  </div>
  <script src="client.js"></script>
  </body>
  </html>    
';
?>
...

...和client.js:

var connection = new WebSocket('ws://localhost:8888'),
name = "";

var loginPage = document.getElementById('login-page'),
usernameInput = document.getElementById('username'),
loginButton = document.getElementById('login'),
callPage = document.getElementById('call-page'),
theirUsernameInput = document.getElementById('their-username'),
callButton = document.getElementById('call'),
hangUpButton = document.getElementById('hang-up');

callPage.style.display = "none";

// Login when the user clicks the button
loginButton.addEventListener("click", function (event) {
name = usernameInput.value;

if (name.length > 0) {
send({
  type: "login",
  name: name
});
}
});

connection.onopen = function () {
console.log("Connected");
};

// Handle all messages through this callback
connection.onmessage = function (message) {
console.log("Got message", message.data);

var data = JSON.parse(message.data);

switch(data.type) {
case "login":
  onLogin(data.success);
  break;
case "offer":
  onOffer(data.offer, data.name);
  break;
case "answer":
  onAnswer(data.answer);
  break;
case "candidate":
  onCandidate(data.candidate);
  break;
case "leave":
  onLeave();
  break;
default:
  break;
}
};

connection.onerror = function (err) {
console.log("Got error", err);
};

// Alias for sending messages in JSON format
function send(message) {
if (connectedUser) {
message.name = connectedUser;
}

connection.send(JSON.stringify(message));
};

function onLogin(success) {
if (success === false) {
alert("Login unsuccessful, please try a different name.");
} else {
loginPage.style.display = "none";
callPage.style.display = "block";

// Get the plumbing ready for a call
startConnection();
}
};

callButton.addEventListener("click", function () {
var theirUsername = theirUsernameInput.value;

if (theirUsername.length > 0) {
startPeerConnection(theirUsername);
}
});

hangUpButton.addEventListener("click", function () {
send({
type: "leave"
});

onLeave();
});

function onOffer(offer, name) {
connectedUser = name;
yourConnection.setRemoteDescription(new RTCSessionDescription(offer));

yourConnection.createAnswer(function (answer) {
yourConnection.setLocalDescription(answer);
send({
  type: "answer",
  answer: answer
});
}, function (error) {
alert("An error has occurred");
});
}

function onAnswer(answer) {
yourConnection.setRemoteDescription(new RTCSessionDescription(answer));
};

function onCandidate(candidate) {
yourConnection.addIceCandidate(new RTCIceCandidate(candidate));
};

function onLeave() {
connectedUser = null;
theirVideo.src = null;
yourConnection.close();
yourConnection.onicecandidate = null;
yourConnection.onaddstream = null;
setupPeerConnection(stream);
};

function hasUserMedia() {
navigator.getUserMedia = navigator.getUserMedia || 
navigator.webkitGetUserMedia || navigator.mozGetUserMedia || 
navigator.msGetUserMedia;
return !!navigator.getUserMedia;
};

function hasRTCPeerConnection() {
window.RTCPeerConnection = window.RTCPeerConnection || 
window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
window.RTCSessionDescription = window.RTCSessionDescription || 
window.webkitRTCSessionDescription || window.mozRTCSessionDescription;
window.RTCIceCandidate = window.RTCIceCandidate || 
window.webkitRTCIceCandidate || window.mozRTCIceCandidate;
return !!window.RTCPeerConnection;
};

var yourVideo = document.querySelector('#yours'),
theirVideo = document.querySelector('#theirs'),
yourConnection, connectedUser, stream;

function startConnection() {
if (hasUserMedia()) {
navigator.getUserMedia({ video: true, audio: false }, function (myStream) {
  stream = myStream;
  yourVideo.src = window.URL.createObjectURL(stream);

  if (hasRTCPeerConnection()) {
    setupPeerConnection(stream);
  } else {
    alert("Sorry, your browser does not support WebRTC.");
  }
}, function (error) {
  console.log(error);
});
} else {
alert("Sorry, your browser does not support WebRTC.");
}
};

function setupPeerConnection(stream) {
var configuration = { };
yourConnection = new RTCPeerConnection(configuration);

// Setup stream listening
yourConnection.addStream(stream);
yourConnection.onaddstream = function (e) {
theirVideo.src = window.URL.createObjectURL(e.stream);
};

// Setup ice handling
yourConnection.onicecandidate = function (event) {
if (event.candidate) {
  send({
    type: "candidate",
    candidate: event.candidate
  });
}
};
};

function startPeerConnection(user) {
connectedUser = user;

// Begin the offer
yourConnection.createOffer(function (offer) {
send({
type: "offer",
offer: offer
});
yourConnection.setLocalDescription(offer);
}, function (error) {
alert("An error has occurred.");
});
};

我尝试将其与其他网络应用程序结合使用。 $ username来自它。

现在,如果我尝试通过简单地退出登录页面来自动化登录过程,将UsernameInput设置为$ username并自动登录,我就会收到错误...

我希望有人可以帮助我...

提前致谢,

Jakob77

1 个答案:

答案 0 :(得分:0)

我在WebRTC上使用了Google CodeLab示例,它对我有用。

GitHub上的

Here is代码和there it is解释了。