4

I am trying to build a video chat web api using html and javascript. So far I found this code that accesses the microphones and webcam on the client's device and displays the video and audio on that client's screen. Here is that code: 

<html>
<head>

<script>

navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

if (navigator.getUserMedia) {
   navigator.getUserMedia({ audio: true, video: { width: 1280, height: 720 } },
      function(stream) {
         var video = document.querySelector('video');
         video.src = window.URL.createObjectURL(stream);
         video.onloadedmetadata = function(e) {
           video.play();
         };
      },
      function(err) {
         console.log("The following error occurred: " + err.name);
      }
   );
} else {
   console.log("getUserMedia not supported");
}

</script>
</head>

<body>

<video></video>

</body>
</html>

For the video chat web app to work the video and audio data will have to be sent back to the server where the server can process that data and send it to the other clients computer where both people can have a video chat. I have done some research and I believe that websockets might be my best bet for sending that video and audio data to the server and for the server to send to the other clients computer. I want to be able to make the websocket using both serverside and client side javascript. when I did some research I found some code that explains how to create a websocket connection and then how to send the server some data. here is the code I found for that:

  var ws = new WebSocket("ws://localhost:9998/echo");

           ws.onopen = function()
           {
              // Web Socket is connected, send data using send()
              ws.send("Message to send");
              alert("Message is sent...");
           };

What I don't understand is how the server can receive that data using server side javascript. I also don't understand how the server side javascript is supposed to send that data to client side javascript on the other client computer via a websocket. I would extremely appreciate all ideas, source code, and links on how to send streaming video and audio data to a server, then for the server to receive the data using server side javascript, and then for the server to send that data to another clients computer. Similarly, I would like to know if websockets are a good way of completing this task, and if not, what ways would you suggest.

Thank you for your time!

Isaac Singer
  • 89
  • 2
  • 5

2 Answers2

1

I think that you might benefit from using a media server like Kurento. You can check the tutorials, with nodejs server-side implementation, here. They use websockets for communication between server-side and clients, and expanding any of the tutorials will be quite easy for you.

The server-side javascript code is what is called, in the media world, the signalling server. That piece of code is in charge of routing the calls, connecting and registering users, authentication and so on. It is also in charge of controlling how the media is exchanged, but not in the actual media exchange. The media flows between clients and the media server.

Disclaimer: I'm part of the Kurento team.

igracia
  • 3,543
  • 1
  • 18
  • 23
1

There is no good solution for this issue. Browser can't do this without plug-in (flash, java) just by html5 and java-script.

Only api I found is WebRTC: https://webrtc.org/start/ http://web-engineering.info/node/57 they are trying to solve this problem and provide solution without additional software, but for now it is still experimental, not a standard.

Tom
  • 1,387
  • 3
  • 19
  • 30