building video conferencing with rails webrtc and HTML5
Asked Answered
E

1

6

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?

Endue answered 21/2, 2015 at 17:36 Comment(0)
A
16

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!

Article answered 22/2, 2015 at 0:29 Comment(3)
Did the answer help you?Article
yes it helps a lot. Thanks for this answer and library.Jaenicke
You link is not working apprtc.appspot.com can you give us new one or other way to learn webrtc in rails app Error: Page not found The requested URL was not found on this server.Dairyman

© 2022 - 2024 — McMap. All rights reserved.