WebRTC實現網頁版多人視訊聊天室
因為產品中要加入網頁中網路會議的功能,這幾天都在倒騰 WebRTC,現在分享下工作成果。
話說 WebRTC
Real Time Communication 簡稱 RTC,是谷歌若干年前收購的一項技術,後來把這項技術應用到瀏覽器中並開源出來,而且搞了一套標準提交給W3C,稱為WebRTC,官方地址是:http://www.webrtc.org/。WebRTC要求瀏覽器內建實時傳輸音視訊的功能,並提供一致的API供JS使用。目前實現這套標準的瀏覽器有:Chrome、FireFox、Opera。微軟雖然也在對WebRTC標準的制定做貢獻,但仍然沒有在任何版本的IE中支援WebRTC,所以,對於IE瀏覽器,不得不安裝Chrome Frame外掛來支援WebRTC;對於Safari瀏覽器,可以使用WebRtc4all這個外掛,地址是:https://code.google.com/p/webrtc4all/。
WebRTC基礎
WebRTC提供了三個API:MediaStream、RTCPeerConnection、RTCDataChannel。 MediaStream 用於獲取本地的 音視訊流。不同的瀏覽器名稱不一樣,但引數一樣,谷歌和Opera是navigator.webkitGetUserMedia,火狐是 navigator.mozGetUserMedia。 RTCPeerConnection:和 getUserMedia 一樣 谷歌和火狐分別會有webkit、moz字首。這個物件主要用於兩個瀏覽器之間建立連線以及傳輸音視訊流。 RTCDataChannel 用於兩個瀏覽器之間傳輸自定義的資料,用這個物件可以實現互發訊息,而不用經過服務端的中轉。WebRTC的實現是建立瀏覽器之間的直接連線,而不需要其他伺服器的中轉,即P2P,這就要求彼此之間需要知道對方的外網地址。但大多數計算機都位於NAT之後,只有少部分主機擁有外網地址,這就要求一種方式可以穿透NAT,STUN和TURN就是這樣的技術。對於STUN和TURN的詳細介紹,可以檢視這裡(http://www.h3c.com.cn/MiniSite/Technology_Circle/Net_Reptile/The_Five/Home/Catalog/201206/747038_97665_0.htm)。
WebRTC會使用預設的或程式指定的SUTN伺服器,獲取指向當前主機的外網地址和埠。谷歌瀏覽器預設的是谷歌域名下的一個STUN,國內可能不大穩定,於是我找到了這個 stunserver.org/ ,連線速度比較快,據說當年飛信就是使用的這個,應該比較可靠。如果信不過第三方的STUN服務,也可以自己搭建一臺,搭建過程也挺簡單。
P2P的建立過程需要依賴服務端中轉外網IP及埠、音視訊裝置配置資訊,所以服務端需要使用可以雙工通訊的手段,比如WebSocket,來實現信令的中轉,稱之為信令伺服器。
WebRTC會話的建立詳解
會話的建立主要有兩個過程:網路資訊的交換、音視訊裝置資訊的交換。以下以 lilei 要和 Lucy 開視訊為例描述這兩個過程。
網路資訊的交換:
lilei首先建立了一個RTCPeerConnection物件,這個物件會自動的去向STUN伺服器詢問自己的外網IP和埠。然後lilei把自己的網路資訊經過信令伺服器中轉後,傳送給lucy。 lucy接收到lilei的網路資訊之後,也建立了一個RTCPeerConnection物件,並把lilei發過來的資訊通過addIceCandidate新增到物件中。 lucy把自己的網路資訊經過信令伺服器的中轉後,傳送給lilei。 lilei接收到資訊後,通過RTCPeerConnection物件的addIceCandidate方法儲存lucy的網路資訊。
音視訊裝置資訊的交換:
lilei通過RTCPeerConnection物件的createOffer方法,獲取本地的音視訊編碼解析度等資訊,通過setLocalDescription新增到RTCPeerConnection中,並把這些資訊經過信令伺服器中轉後傳送給lucy。 lucy接收到lilei發過來的資訊後,使用RTCPeerConnection物件的setRemoteDescription方法儲存。然後通過createAnswer方法獲取自己的音視訊資訊並以同樣的手段傳送給lilei。 lilei接收到lucy的信 息,呼叫setRemoteDescription方法儲存。
以上兩個過程可以是併發的,並無先後順序,但必須得等到兩個過程都完成後,P2P的連線才真正的建立。一旦連線建立,lilei和lucy就可以直接傳送音視訊流,而不需要中轉。WebRTC在獲取本地網路資訊的時候,會先嚐試STUN,如果失敗,則會使用TURN。
WebRTC + Asp.net Web API 實現視訊聊天室
首先使用WebSocket實現信令伺服器部分,在此需要用到微軟開發的用於實現WebSocket的dll (http://www.nuget.org/packages/Microsoft.WebSockets/),以及Json.net。
用於和客戶端互動的會話類程式碼如下:01.
public
class
Session
: WebSocketHandler
02.
{
03.
private
static
WebSocketCollection
sessions =
new
WebSocketCollection();
04.
05.
public
String
UserId { get; set; }
06.
07.
public
override
void
OnOpen()
08.
{
09.
this
.UserId
= Guid.NewGuid().ToString(
'N'
);
10.
var
message =
new
{
type = SignalMessageType.Conect, userId =
this
.UserId
};
11.
sessions.Broadcast(Json.Encode(message));
12.
13.
sessions.Add(
this
);
14.
}
15.
16.
public
override
void
OnMessage(string
msg)
17.
{
18.
var
obj = Json.Decode(msg);
19.
var
messageType = (SignalMessageType)obj.type;
20.
21.
switch
(messageType)
22.
{
23.
case
SignalMessageType.Offer:
24.
case
SignalMessageType.Answer:
25.
case
SignalMessageType.IceCandidate:
26.
var
session = sessions.Cast<Session>().FirstOrDefault(n => n.UserId == obj.userId);
27.
var
message =
new
{
type = messageType, userId =
this
.UserId,
description = obj.description };
28.
session.Send(Json.Encode(message));
29.
break
;
30.
}
31.
}
32.
}
33.
34.
public
enum
SignalMessageType
35.
{
36.
Conect,
37.
DisConnect,
38.
Offer,
39.
Answer,
40.
IceCandidate
41.
相關推薦
WebRTC實現網頁版多人視訊聊天室
因為產品中要加入網頁中網路會議的功能,這幾天都在倒騰 WebRTC,現在分享下工作成果。 話說 WebRTC Real Time Communication 簡稱 RTC,是谷歌若干年前收購的一項技術,後來把這項技術應用到瀏覽器中並開源出來,而且搞了一套標準提交給W3C,稱為WebRTC,官方
FlexAir 開源版-多人視訊聊天室,網路遠端多人視訊會議系統((Flex,Fms3聯合開發))
整個軟體的圖片: 本系統是基於Flex的Air環境開發(air1.5版本),伺服器端使用的是fms3.0(本人現在使用的是fms3.0學習版本(免費)) 介面分為3部分:左,中,右 左邊顯示使用者列表(點使用者頭像聊天,點攝像頭圖片看對方視訊,管理使用者等
C#實現多人視訊聊天
在 《C#實現多人語音聊天》一文釋出後,很多朋友建議我也實現一個視訊聊天室給他們參考一下,其實,視訊聊天室與語音聊天室的原理是差不多的,由於加入了攝像頭、視訊的處理,邏輯會繁雜一些,本文就實現一個簡單的多人視訊聊天系統,讓多個人可以進入同一個房間進行語音視訊溝通。
在Ubuntu上部署一個基於webrtc的多人視訊聊天服務
最近研究webrtc視訊直播技術,網上找了些教程最終都不太能順利跑起來的,可能是文章寫的比較老,使用的一些開源元件已經更新了,有些配置已經不太一樣了,所以按照以前的步驟會有問題。折騰了一陣終於跑起來了,記錄一下。 一個簡單的聊天室html頁面 這個頁面使用simple-webrtc來實現webrtc的通訊,s
Java NIO示例:多人網路聊天室
一個多客戶端聊天室,支援多客戶端聊天,有如下功能: 功能1: 客戶端通過Java NIO連線到服務端,支援多客戶端的連線 功能2:客戶端初次連線時,服務端提示輸入暱稱,如果暱稱已經有人使用,提示重新輸入,如果暱稱唯一,則登入成功,之後傳送訊息都需要按照規定格式帶著
CocosCreator開發筆記(6)-結合Pomelo框架編寫多人線上聊天室教程
測試環境 教程說明 本教程的Demo功能包括: 1、自定義伺服器的IP、埠以及自己的使用者名稱和房間名; 2、同房間任意人聊天或廣播訊息; 3、實時顯示同房間其它人的聊天、上線和下線狀態。 執行截圖如下: 基礎知識和安裝執行
基於Webrtc的多人視訊會議的簡單實現
通過重寫WEBRTC傳輸模組來實現一個簡單的視訊會議,效果如下圖: 說明: 1、畫面1、2、3都是其他手機傳過來的影象,區域網內有點點卡頓,同時軟解3路資料你懂的。 2、聲音比較清晰,服務端沒有做混音處理。 實現原理: 1、服務端是小夥伴用C++配合實現的
Node + H5 + WebSocket + Koa2 實現簡單的多人聊天
接收 var msg ont for document back next bsp 服務器代碼 ( 依賴於 koa2, koa-websocket ) /* 實例化外部依賴 */ let Koa = require("koa2"); let WebSocket = r
快速實現ios手機端多人視訊會議直播(免費)
Rechatsdk為所有基於網際網路的實時通訊需求使用者提供了完整的解決方案,包括實時音訊/視訊互動、原生sdk低延遲廣播,相容第三方rtmp和hls直播方案 解壓後把reechat.framework匯入目標ios工程。 註冊sdk統一回調函式 ReeCha
Python網路程式設計----實現簡單的多人聊天室
還是用UDP,socket作為主體來實現,之前我們已經實現過單對單socket通訊,這次想實現群發功能 原理其實就是一臺伺服器在負責分配轉發資料,來達成廣播的效果,這些思路其實也差不多 但是多人聊天沒有這麼強的規整性,你可能沒等到A的訊息,就要去和B說話了,多執行緒就可以
“兩行”程式碼,實現FaceTime的新多人視訊通話效果
一年一度的 WWDC 開幕了。我們看了來自各個勤勞媒體的回顧與解讀。在這些新功能中,最吸引我們的還是最新更新的 FaceTime。 這次 FaceTime 不僅開始支援群組視訊通話,還可以在視訊通話時,判斷誰在說,並自動放大他的視訊視窗。乍看上去,很是驚豔。不過如果是基於聲網視訊通話
webRtc+websocket多人視訊通話
webRTc+ websocket實現多人視訊通話,目前此demo只支援crome瀏覽器, 版本僅僅支援:ChromeStandalone_46.0.2490.80_Setup.1445829883 tomcat要8,jdk要1.7,不需要資料庫 192.168.1.118
快速實現android手機端多人視訊會議直播(免費)
reechatsdk為所有基於網際網路的實時通訊需求使用者提供了完整的解決方案,包括實時音訊/視訊互動、原生sdk低延遲廣播,相容第三方rtmp和hls直播方案 解壓壓縮包,並把reechat.jar和其他*.so匯入目標android工程(Add as Library
Webrtc 多人視訊會議系統 伺服器 Licode 介紹
WebRTC又稱 web實時通訊,主要是為了擴充套件瀏覽器的功能,使瀏覽器能夠進行實時音視訊通訊,不同的瀏覽器對Webrtc的實現程式碼也許不同,但Google的瀏覽器將Webrtc的實現程式碼開源了,以至於很多人一聽到Webrtc就聯想到Google的開源實現
WebSocket實現多人實時聊天
chat.html: <!DOCTYPE html> <html> <head> <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /> <me
ajax實現簡單的多人聊天
原理:簡單來說就是利用ajax的非同步,ajax每隔一段時間會從後臺獲取資料而不重新整理頁面。 步驟:1。資料庫裡建兩張表,一張使用者表,一張訊息表 isGet表示訊息是否被讀 2.使用java web做後臺,主要使用hibernate和struts2框架,xml資料格
C#實現多人語音聊天
在上一篇文章 實現一個簡單的語音聊天室(多人語音聊天系統)中,我用C#實現了一個簡單的語音聊天室,並給出了原始碼下載。雖然有原始碼,但是很多朋友反映,理解起來還是有些模糊、不夠清楚。現在想來,是因為我忘
socket實現簡單的多人聊天室
服務端Server.java package chatDemo; import java.awt.BorderLayout; import java.io.DataInputStream; import java.io.DataOutputStream; import j
使用WebRTC搭建前端視訊聊天室——信令篇
如果需要搭建例項的話可以參照SkyRTC-demo:github地址 其中使用了兩個庫:SkyRTC(github地址)和SkyRTC-client(github地址) 這兩個庫和demo都是我寫的,如果有bug或是錯誤歡迎指出,我會盡力更正 前面的話 這篇文章講述了WebRTC中所涉及的信令交換以及
使用WebRTC搭建前端視訊聊天室——入門篇
什麼是WebRTC? 眾所周知,瀏覽器本身不支援相互之間直接建立通道進行通訊,都是通過伺服器進行中轉。比如現在有兩個客戶端,甲和乙,他們倆想要通訊,首先需要甲和伺服器、乙和伺服器之間建立通道。甲給乙傳送訊息時,甲先將訊息傳送到伺服器上,伺服器對甲的訊息進行中轉,傳送到乙處,反過來也是一樣。這樣甲與乙之間