0

我正在尝试实现这个视频会议HTML5 应用程序。我不确定到底发生了什么,但我按照说明进行操作,也许我错过了一些东西......

我复制了 HTML 文件 (index.html),并将套接字 IP 更改为适用于我的服务器的正确 IP:

<!DOCTYPE html>
<html>
<head>
  <title>WebRTC Demo</title>  
</head>
<body>
  <h1>WebRTC Demo using Socket.IO</h1>
  <video id="webrtc-sourcevid" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>
  <button type="button" onclick="startVideo();">Start video</button>
  <button type="button" onclick="stopVideo();">Stop video</button>
  <video id="webrtc-remotevid" autoplay style="width: 320px; height: 240px; border: 1px solid black;"></video>
  <button type="button" onclick="connect();">Connect</button>
  <button type="button" onclick="hangUp();">Hang Up</button>

  <p>Run a node.js server and adapt the address in the code.</p>
  <script src="http://cdn.socket.io/stable/socket.io.js"></script>
  <script>
  // create socket
  var socket = io.connect('localhost:1337/');

  var sourcevid = document.getElementById('webrtc-sourcevid');
  var remotevid = document.getElementById('webrtc-remotevid');
  var localStream = null;
  var peerConn = null;
  var started = false;
  var channelReady = false;
  var mediaConstraints = {'mandatory': {
                          'OfferToReceiveAudio':true, 
                          'OfferToReceiveVideo':true }};
  var isVideoMuted = false;

  // get the local video up
  function startVideo() {
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || window.navigator.mozGetUserMedia || navigator.msGetUserMedia;
      window.URL = window.URL || window.webkitURL;

      navigator.getUserMedia({video: true, audio: true}, successCallback, errorCallback);
      function successCallback(stream) {
          localStream = stream;
          if (sourcevid.mozSrcObject) {
            sourcevid.mozSrcObject = stream;
            sourcevid.play();
          } else {
            try {
              sourcevid.src = window.URL.createObjectURL(stream);
              sourcevid.play();
            } catch(e) {
              console.log("Error setting video src: ", e);
            }
          }
      }
      function errorCallback(error) {
          console.error('An error occurred: [CODE ' + error.code + ']');
          return;
      }
  }

  // stop local video
  function stopVideo() {
    if (sourcevid.mozSrcObject) {
      sourcevid.mozSrcObject.stop();
      sourcevid.src = null;
    } else {
      sourcevid.src = "";
      localStream.stop();
    }
  }

  // send SDP via socket connection
  function setLocalAndSendMessage(sessionDescription) {
    peerConn.setLocalDescription(sessionDescription);
    console.log("Sending: SDP");
    console.log(sessionDescription);
    socket.json.send(sessionDescription);
  }

  function createOfferFailed() {
    console.log("Create Answer failed");
  }

  // start the connection upon user request
  function connect() {
    if (!started && localStream && channelReady) {
      createPeerConnection();
      started = true;
      peerConn.createOffer(setLocalAndSendMessage, createOfferFailed, mediaConstraints);
    } else {
      alert("Local stream not running yet - try again.");
    }
  }

  // stop the connection upon user request
  function hangUp() {
    console.log("Hang up.");    
    socket.json.send({type: "bye"});
    stop();
  }

  function stop() {
    peerConn.close();
    peerConn = null;
    started = false;    
  }

  // socket: channel connected
  socket.on('connect', onChannelOpened)
        .on('message', onMessage);

  function onChannelOpened(evt) {
    console.log('Channel opened.');
    channelReady = true;
  }

  function createAnswerFailed() {
    console.log("Create Answer failed");
  }
  // socket: accept connection request
  function onMessage(evt) {
    if (evt.type === 'offer') {
      console.log("Received offer...")
      if (!started) {
        createPeerConnection();
        started = true;
      }
      console.log('Creating remote session description...' );
      peerConn.setRemoteDescription(new RTCSessionDescription(evt));
      console.log('Sending answer...');
      peerConn.createAnswer(setLocalAndSendMessage, createAnswerFailed, mediaConstraints);

    } else if (evt.type === 'answer' && started) {
      console.log('Received answer...');
      console.log('Setting remote session description...' );
      peerConn.setRemoteDescription(new RTCSessionDescription(evt));

    } else if (evt.type === 'candidate' && started) {
      console.log('Received ICE candidate...');
      var candidate = new RTCIceCandidate({sdpMLineIndex:evt.sdpMLineIndex, sdpMid:evt.sdpMid, candidate:evt.candidate});
      console.log(candidate);
      peerConn.addIceCandidate(candidate);

    } else if (evt.type === 'bye' && started) {
      console.log("Received bye");
      stop();
    }
  }

  function createPeerConnection() {
    console.log("Creating peer connection");
    RTCPeerConnection = webkitRTCPeerConnection || mozRTCPeerConnection;
    var pc_config = {"iceServers":[]};
    try {
      peerConn = new RTCPeerConnection(pc_config);
    } catch (e) {
      console.log("Failed to create PeerConnection, exception: " + e.message);
    }
    // send any ice candidates to the other peer
    peerConn.onicecandidate = function (evt) {
      if (event.candidate) {
        console.log('Sending ICE candidate...');
        console.log(evt.candidate);
        socket.json.send({type: "candidate",
                          sdpMLineIndex: evt.candidate.sdpMLineIndex,
                          sdpMid: evt.candidate.sdpMid,
                          candidate: evt.candidate.candidate});
      } else {
        console.log("End of candidates.");
      }
    };
    console.log('Adding local stream...');
    peerConn.addStream(localStream);

    peerConn.addEventListener("addstream", onRemoteStreamAdded, false);
    peerConn.addEventListener("removestream", onRemoteStreamRemoved, false)

    // when remote adds a stream, hand it on to the local video element
    function onRemoteStreamAdded(event) {
      console.log("Added remote stream");
      remotevid.src = window.URL.createObjectURL(event.stream);
    }

    // when remote removes a stream, remove it from the local video element
    function onRemoteStreamRemoved(event) {
      console.log("Remove remote stream");
      remotevid.src = "";
    }
  }
  </script>
</body>
</html>

以及服务器的 Javascript 文件(server.js)(与上面的端口号相同):

// create the http server and listen on port
var server = require('http').createServer();
var app = server.listen(1337, function() {
  console.log((new Date()) + " Server is listening on port 1337");
});

// create the socket server on the port
var io = require('socket.io').listen(app);


// This callback function is called every time a socket
// tries to connect to the server
io.sockets.on('connection', function(socket) {

    console.log((new Date()) + ' Connection established.');

    // When a user send a SDP message
    // broadcast to all users in the room
    socket.on('message', function(message) {
        console.log((new Date()) + ' Received Message, broadcasting: ' + message);
        socket.broadcast.emit('message', message);
    });

    // When the user hangs up
    // broadcast bye signal to all users in the room
    socket.on('disconnect', function() {
        // close user connection
        console.log((new Date()) + " Peer disconnected.");
        socket.broadcast.emit('user disconnected');
    });

});

我已经安装了 node.js。接下来我安装了 express 和 socket.io:

npm install express
npm install socket.io

然后我用节点运行这个文件来启动服务器。

node server.js

从服务器访问 index.html 会给我这个错误

Uncaught TypeError: Object #<Object> has no method 'connect' 

这是由io.connect('localhost:1337/');server.js 中的 var socket = 行引起的

我已经搜索了这个错误并尝试将 socket.io 文件放在服务器上并将其链接为<script src="/socket.io/socket.io.js"></script>,并没有改变任何东西。

4

1 回答 1

6

在 index.html 中,它必须类似于:

<script src="http://192.168.100.74:8080/socket.io/socket.io.js"></script>

var socket = io.connect('http://' + window.location.host + ':8080/');

我的 app.js:

var server = require('http').createServer();
var app = server.listen(8080);
var io = require('socket.io').listen(app);

io.sockets.on('connection', function(socket) {

    socket.on('message', function(message) {
        socket.broadcast.emit('message', message);
    });
});

项目- |-node_modules- |socket.io |app.js |index.html

希望这可以帮助。我也是这个 webRT 和套接字的新手。

于 2013-03-21T12:46:40.767 回答