+2

live stream với gem OpenTok

I. OpenTok là gì?

Opentok là một ứng dụng chat dựa trên nền tảng web, Opentok sẽ dựa vào nền tảng webRTC để gửi các gói tin đa phương tiện qua javascript giúp tạo một streaming để chat hoặc video.

II. Cài đặt gem "opentok" Trước hết bạn vào trang https://dashboard.tokbox.com/ để ăng ký 1 tài khoản. Bạn chỉ viết lấy api_key và app_secret, khi đăng ký 1 tài khoản sẽ miễn phí trong 30 ngày với số giờ đung thử.. nếu bạn dùng quá sẽ tính phí nhe' 😄

Thêm gem "opentok" ,sau đó bundle

gem "opentok"

Tạo 1 controller : rails g controller Rooms

class RoomsController < ApplicationController

  before_filter :config_opentok,:except => [:index]
  def index
    @rooms = Room.where(:public => true)
    @new_room = Room.new
  end

  def create
    session = @opentok.create_session
    params[:room][:session_id] = session.session_id

    @new_room = Room.new room_params

    respond_to do |format|
      if @new_room.save
        format.html { redirect_to("/party/"+@new_room.id.to_s) }
      else
        format.html { render :controller => 'rooms',
          :action => "index" }
      end
    end
  end

  def party
    @room = Room.find(params[:id])

    @tok_token = @opentok.generate_token(@room.session_id)
  end

  private
  def config_opentok
    if @opentok.nil?
     @opentok = OpenTok::OpenTok.new("45784002", "f9157a1c9f021502b3ee44a97d363f7b0c085933")
    end
  end

  def room_params
    params.require(:room).permit(:name, :public, :session_id)
  end

end

Tạo trang index ở view

<div id="newRoom">
  <fieldset>
  <legend>Start a new party room</legend>
<%= form_for(@new_room) do |f| %>
  Party Name: <%= f.text_field :name %><br/><br/>
  Public? <%= f.check_box :public %><br/><br/>

  <%= f.submit %>
<% end %>
</fieldset>
</div>

<fieldset>
  <legend>Existing party rooms</legend>
  <table cellpadding="2" cellspacing="5">
    <tr>
      <th>Name</th>
      <th>Started</th>
    </tr>

    <% @rooms.each do |room| %>
      <tr>
        <td align="center" width="300px"><a href="/party/<%= room.id %>"><%= room.name %></a></td>
        <td><%= room.created_at %></td>
      </tr>
    <% end %>
  </table>
</fieldset>

Và 1 trang party.html , tạm thời mình viết js ngây ở trang này

<div id="invitation"></div>
<div id="videobox">

</div>
<script src="https://static.opentok.com/v2/js/opentok.min.js" type="text/javascript"></script>
<script type="text/javascript">
  var apiKey =  "45784002";
  var sessionId = "<%= @room.session_id %>";
  var token = "<%= @tok_token %>";
  var session;

//  TB.addEventListener('exception', exceptionHandler);

  //Video chat event listeners
  //session.addEventListener('sessionConnected', sessionConnectedHandler);
  //session.addEventListener('streamCreated', streamCreatedHandler);
    //session.addEventListener('streamDestroyed', streamDestroyedHandler);
TB.setLogLevel(TB.DEBUG);
//session.connect(apiKey, token);
   var session = TB.initSession(sessionId);
    session.addEventListener('sessionConnected', sessionConnectedHandler);
    session.addEventListener('streamCreated', streamCreatedHandler);
    session.connect(apiKey, token);
 var publisher;
    function sessionConnectedHandler(event) {
      publisher = TB.initPublisher(apiKey, 'videobox');
      session.publish(publisher);
      // Subscribe to streams that were in the session when we connected
      subscribeToStreams(event.streams);
    }
    function streamCreatedHandler(event) {
      // Subscribe to any new streams that are created
      subscribeToStreams(event.streams);
    }
    function subscribeToStreams(streams) {
      for (var i = 0; i < streams.length; i++) {
        if (streams[i].connection.connectionId == session.connection.connectionId) {
          return;
        }
        var div = document.createElement('div');
        div.setAttribute('id', 'stream' + streams[i].streamId);
        document.body.appendChild(div);
        session.subscribe(streams[i], div.id);
      }
    }
</script>

Cấu hình ở router

resources :rooms
  match '/party/:id', :to => "rooms#party", :as => :party, :via => :get

Sau đây là hỉnh ảnh demo, tại mình dùng trong 1 máy nên join đc 2 màn hình:

Chúc các bạn thành công !!! Link tham khảo: https://railsfornovice.wordpress.com/2013/01/01/video-chatting-in-ruby-on-rails/


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.