Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

building video conferencing with rails webrtc and HTML5

I need to build a video conference feature for my ruby on rails application. I came across a tutorial for html5 that enables you to have access to your camera through the browser. Once the camera is turned on you can see live video camera feed and take snap shots.the code is below

javascript code:

  // Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
  // Grab elements, create settings, etc.
  var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    video = document.getElementById("video"),
    videoObj = { "video": true },
    errBack = function(error) {
      console.log("Video capture error: ", error.code); 
    };

  // Put video listeners into place
  if(navigator.getUserMedia) { // Standard
    navigator.getUserMedia(videoObj, function(stream) {
      video.src = stream;
      video.play();
    }, errBack);
  } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
    navigator.webkitGetUserMedia(videoObj, function(stream){
      video.src = window.webkitURL.createObjectURL(stream);
      video.play();
    }, errBack);
  }
  else if(navigator.mozGetUserMedia) { // Firefox-prefixed
    navigator.mozGetUserMedia(videoObj, function(stream){
      video.src = window.URL.createObjectURL(stream);
      video.play();
    }, errBack);

  }

// Trigger photo take
document.getElementById("snap").addEventListener("click", function(e) {
  context.drawImage(video, 0, 0, 640, 480);
});

}, false);

html code:

<h1>New video</h1>

<!--<%= render 'form' %>-->
 <video id="video" width="640" height="480" autoplay></video>
   <button id="snap">Snap Photo</button>
   <canvas id="canvas" width="640" height="480"></canvas>
  <div class="actions">

I need a way to stream that live video feed that Im seeing to another user within my server. How could I do this? Would web sockets enable me to do this? If so how?

like image 774
user3266824 Avatar asked Feb 21 '15 17:02

user3266824


1 Answers

You can definitely do it.

First of all, you need to understand how WebRTC works and what does it require. You need a signalling server (existing one, or you write your own). If you decide to write your own, you need any kind of client-server-client architecture and transport method (one of them is websockets).

Over websockets (or any other transport) you need to exchange session descriptions (one peer offers, other peer answers) to establish a connection. Actually, signalling server is only several listeners on both client and server sides, which just pass signals (comparably small chunks of text data) from one peer to another before they can establish a WebRTC connection.

Proper way

I suggest to investigate the main code of this app https://apprtc.appspot.com/ (I saved main code here https://gist.github.com/igorpavlov/18af35999f8c7838cf21). Understanding how it works will be very nice for you.

Easy way

You can also use libraries to make calls like https://simplewebrtc.com/ (www.talky.io works on this library), but you still need a signalling server.

Good luck!

like image 157
igorpavlov Avatar answered Nov 09 '22 18:11

igorpavlov