使用rails webrtc和HTML5构建视频会议

use*_*824 6 html5 ruby-on-rails video-conferencing webrtc

我需要为我的ruby on rails应用程序构建一个视频会议功能.我找到了html5的教程,使您可以通过浏览器访问您的相机.打开相机后,您可以看到实时摄像机进纸并拍摄快照.代码如下

javascript代码:

  // 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);
Run Code Online (Sandbox Code Playgroud)

HTML代码:

<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">
Run Code Online (Sandbox Code Playgroud)

我需要一种方法来流式传输我看到的服务器中的其他用户的实时视频.我怎么能这样做?网络套接字能让我这样做吗?如果是这样的话?

igo*_*lov 15

你绝对可以做到.

首先,您需要了解WebRTC的工作原理以及它的要求.您需要一个信令服务器(现有服务器,或者您自己编写).如果您决定自己编写,则需要任何类型的客户端 - 服务器 - 客户端体系结构和传输方法(其中之一是websockets).

在websockets(或任何其他传输)上,您需要交换会话描述(一个对等提供,其他对等应答)以建立连接.实际上,信令服务器只是客户端和服务器端的几个监听器,它们只能在建立WebRTC连接之前将信号(相对较小的文本数据块)从一个对等体传递到另一个对等体.

合适的方式

我建议调查这个应用程序的主要代码https://apprtc.appspot.com/(我在这里保存了主要代码https://gist.github.com/igorpavlov/18af35999f8c7838cf21).了解它的工作原理对你来说非常好.

简单的方法

您也可以使用库来调用https://simplewebrtc.com/(www.talky.io适用于此库),但您仍需要信号服务器.

祝好运!