WebRTC是谷歌的开源的实时视频音频聊天技术，支持跨平台，Nat穿透技术（Stun，Turn，Ice）,在部分支持Html5的浏览器里集成了这个功能。
至目前为止支持的PC浏览器有：Chrome 31+，opera 19+，FireFox 26+
至目前为止支持的Android浏览器有：Chrome，opera，FireFox
IE所有版本均不支持！！
IPhone手机暂不支持！！
整个WebRtc里面已经封装好了视频音频采集和传输，你需要做的就是使用任何可以实现WebSocket的语言来开发一套信令服务器
信令服务器负责用户拨号控制，可以集成用户验证等功能来验证用户身份等等，需要为WebRTC做的只有传递协议数据，将一边的传递给另一边，让两边互相了解对方的浏览器视频音频解码类型，版本情况，内外网情况等等，
需要使用的有：vs
```javascript
chrome
一个公网IP
CentOS
turnserver（https://code.google.com/p/rfc5766-turn-server/）
(这个版本集成了stun和turn，不需要分别再安装了)
需要使用的库：Fleck：一个.net的WebSocket库，百度可以搜得到。
LitJson：一个小巧的Json解析库。
IWebSocketConnection类默认没有Args属性，是我后来修改源码添加的。
下面是我自己写的一个简单的WebRTC服务端，也就是信令服务器
```javascript
using Fleck;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Text;
using System.Reflection;
using LitJson;
namespace WebRtc
{
public class Work
{
public Dictionary<string, IWebSocketConnection> ClientList =
new Dictionary<string, IWebSocketConnection>();
public string Id = null;
public IWebSocketConnection Master = null;
public string WorkName = null;
public void start()
{
foreach (WebSocketConnection suser in ClientList.Values)
{
foreach (WebSocketConnection duser in ClientList.Values)
{
if (suser == duser) continue;
JsonData jd = JsonHelper.GetJson("conn", "main");
jd["wname"] = this.Id;
jd["duser"] = duser.Args["username"].ToString();
jd["suser"] = suser.Args["username"].ToString();
jd["type"] = "start";
suser.Send(jd.ToJson());
}
}
}
}
public class Str
{
public const string Falid = "falid";
public const string Success = "success";
public const string Exist = "exist";
}
public class Command
{
public const string CreateWork = "createWork";
public const string Login = "login";
public const string Join = "join";
public const string Sec = "sec";
public const string Conn = "conn";
public const string Start = "start";
}
class WebRTCServer : IDisposable
{
public Dictionary<string, Work> WorkList =
new Dictionary<string, Work>(); //声明会议室列表
public Dictionary<string, IWebSocketConnection> UserList =
new Dictionary<string, IWebSocketConnection>(); //声明已登录的用户列表
private WebSocketServer server; //声明WebSocket服务类
public WebRTCServer(int port) : this("ws://0.0.0.0:" + port) { }
public WebRTCServer(string URL)
{
server = new WebSocketServer(URL);
server.Start(socket =>
{
socket.OnMessage = message =>
{
OnReceive(socket, message);
};
socket.OnClose = () =>
{
OnDisconnect(socket);
};
});
}
private void OnConnected(IWebSocketConnection context)
{
}
private void OnDisconnect(IWebSocketConnection context)
{
if (UserList.Count == 0) return;
string key = null;
foreach (string i in UserList.Keys)
if (UserList[i] == context) key = i;
if (key != null) UserList.Remove(key);
key = null;
foreach (string i in WorkList.Keys)
{
foreach(string u in WorkList[i].ClientList.Keys)
if (WorkList[i].ClientList[u] == context) key = u;
if (key != null) WorkList[i].ClientList.Remove(key);
}
key = null;
foreach (string i in WorkList.Keys)
{
if (WorkList[i].Master == context)
key = i;
}
if (key != null) WorkList.Remove(key);
context = null;
}
private void OnReceive(IWebSocketConnection context,string msg)
{
if (!msg.Contains("command")) return; //如果没有命令字符跳出
JsonData jd = JsonMapper.ToObject(msg);
string command = jd["command"].ToString();
if (!UserList.ContainsValue(context)) //判断是否登录
{
switch (command) //未登录情况下的处理
{
case Command.Login : //登录处理
try
{
string username = jd["username"].ToString();
context.Args.Add("username", username);
UserList.Add(username, context);
context.Send(JsonHelper.GetJsonStr(
Command.Login,
null,
Str.Success));
}
catch { context.Send(JsonHelper.GetJsonStr(
Command.Login,
null,
Str.Falid)); }
break;
default: //未登录情况下的默认处理
context.Send(JsonHelper.GetJsonStr(
Command.Sec,
null,
Str.Falid));
break;
}
}
else
{
switch (command) //登录之后的处理
{
case Command.CreateWork: //创建聊天室，这里是工作
try
{
string wname = jd["wname"].ToString();
if (!WorkList.ContainsKey(wname))
{
WorkList.Add(wname,
new Work() {
Master = context,
Id = wname,
WorkName = wname }
);
context.Send(JsonHelper.GetJsonStr(
Command.CreateWork,
wname,
Str.Success));
}
else
context.Send(JsonHelper.GetJsonStr(
Command.CreateWork,
wname,
Str.Exist));
}
catch {
context.Send(JsonHelper.GetJsonStr(
Command.CreateWork,
null,
Str.Falid));
}
break;
case Command.Join: //用户加入
try
{
string wname = jd["wname"].ToString();
string username = jd["username"].ToString();
if (!WorkList[wname].ClientList.ContainsKey(username))
{
WorkList[wname].ClientList.Add(username, context);
context.Send(JsonHelper.GetJsonStr(
Command.Join,
wname,
Str.Success));
}
else
context.Send(JsonHelper.GetJsonStr(
Command.Join,
wname,
Str.Exist));
}
catch {
context.Send(JsonHelper.GetJsonStr(
Command.Join,
null,
Str.Falid));
}
break;
case Command.Start: //正式开始，发起连接
try
{
string wname = jd["wname"].ToString();
if (WorkList[wname].Master == context)
{
WorkList[wname].start();
}
else {
context.Send(JsonHelper.GetJsonStr(
Command.Sec,
null,
Str.Falid));
}
}
catch {
context.Send(JsonHelper.GetJsonStr(
Command.Start,
null,
Str.Falid));
}
break;
case Command.Conn: //WebRtc命令转发
try
{
string dname = jd["duser"].ToString();
UserList[dname].Send(msg);
}
catch { }
break;
}
}
}
public void Dispose()
{
try
{
foreach (IWebSocketConnection i in UserList.Values)
{
i.Close();
}
server.Dispose();
UserList.Clear();
WorkList.Clear();
}
catch { }
}
}
public class JsonHelper
{
public static JsonData GetJson(string command, string ret)
{
JsonData jd = new JsonData();
jd["command"] = command;
jd["ret"] = ret;
return jd;
}
public static string GetJsonStr(string command, string data, string ret)
{
JsonData jd = new JsonData();
jd["command"] = command;
jd["data"] = data;
jd["ret"] = ret;
return jd.ToJson();
}
}
}
下面是网页端的Js代码，算是客户端，rtc_main.js
var socket;
var PeerConnection = (window.PeerConnection ||
window.webkitPeerConnection00 ||
window.webkitRTCPeerConnection ||
window.mozRTCPeerConnection);
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
var localstream = null;
var rpc = new Array();
var dpc = new Array();
var vrpc = new Array();
var camer_stream = {audio:true, video:{
mandatory: {
maxWidth: 640,
maxHeight: 360
}
}}
var rconn_count = 1;
var servers = {"iceServers":
[
{"url":"stun:1.1.1.1"}, //这里1.1.1.1对应你的公网IP
{"url":"turn:1.1.1.1?transport=tcp",
"credential":"user",
"username":"passwd"},
]
};
window.onload = function() {
console.log("获取本地视频源...");
navigator.getUserMedia(camer_stream, getUMsuccess, function() {});
}
function getUMsuccess(stream){
console.log("获取本地视频源成功！");
vid1.src = webkitURL.createObjectURL(stream); //本地视频显示
localstream = stream; //本地流
}
function connect () {
socket = new WebSocket("ws://" + server.value + ":8889");
setSocketEvents(socket); //设置WebSocket监听事件
}
function setSocketEvents(Socket) {
Socket.onopen = function() { //连接成功处理方法
console.log("Socket已连接！");
send(JSON.stringify({"command":"login", "username":username.value}))
};
Socket.onmessage = function(Message) { //接收信息处理方法
var obj = JSON.parse(Message.data);
var command = obj.command;
switch(command)
{
case "createWork" : {
if (obj.ret == "success") console.log("创建会议室成功！");
else if(obj.ret == "exist") console.log("会议室已存在！");
else console.log("创建会议室失败！");
break;
}
case "login" : {
obj.ret == "success" ?
console.log("登录成功！") :
console.log("登录失败！");
break;
}
case "join" : {
obj.ret == "success" ?
console.log("加入会议室成功！") :
console.log("加入会议室失败！");
break;
}
case "sec" : {
console.log("没有权限！");
break;
}
case "conn" : {
Conn(obj);
break;
}
default : {
console.log(Message.data);
}
}
};
Socket.onclose = function() {
console.log("Socket连接已断开！");
}
}
function createWork() {
console.log("创建会议室:" + work.value);
var obj = JSON.stringify({"command":"createWork",
"wname":work.value});
send(obj);
}
function join() {
console.log("加入会议室:" + work.value);
var obj = JSON.stringify({"command":"join",
"wname":work.value,
"username":username.value});
send(obj);
}
function startwork(){
console.log("会议开始:" + work.value);
var obj = JSON.stringify({"command":"start",
"wname":work.value});
send(obj);
}
function Conn(jd){
/////////////////////////
// 发起端代码 //
/////////////////////////
if (jd.ret == "main")
{
if (jd.type=="start"){
console.log("发起连接:wname:" + jd.wname +
",sname:" + jd.suser +
",dname:" + jd.duser);
rpc[jd.duser] = new webkitRTCPeerConnection(servers);
var trpc = rpc[jd.duser];
vrpc[jd.duser] = ++rconn_count;
trpc.addStream(localstream);
trpc.onaddstream = function(e){
try{
document.getElementById('vid' + vrpc[jd.duser]).src
= webkitURL.createObjectURL(e.stream);
console.log("连接远程媒体成功！");
}catch(ex){
console.log("连接远程媒体失败！",ex);
}
};
trpc.onicecandidate = function(event){
if (event.candidate) {
var obj = JSON.stringify({
"command":"conn",
"type":"ice_data",
"suser":jd.suser,
"duser":jd.duser,
"wname":jd.wname,
"ret":"msg",
"data":JSON.stringify(event.candidate)
});
send(obj);
}
};
trpc.createOffer(function(desc){
trpc.setLocalDescription(desc);
var obj = JSON.stringify({
"command":"conn",
"type":"offer",
"suser":jd.suser,
"duser":jd.duser,
"wname":jd.wname,
"ret":"msg",
"data":JSON.stringify(desc)
});
send(obj);
});
}else if(jd.type=="answer"){
rpc[jd.suser].setRemoteDescription(
new RTCSessionDescription(JSON.parse(jd.data))
);
}else if(jd.type=="ice_data"){
console.log("main_candidate",jd.data);
rpc[jd.suser].addIceCandidate(
new RTCIceCandidate(JSON.parse(jd.data))
);
}
/////////////////////////
// 接收端代码 //
/////////////////////////
}else if(jd.ret == "msg"){
if (jd.type=="offer"){
console.log("接受连接:wname:" + jd.wname +
",sname:" + jd.suser +
",dname:" + jd.duser);
dpc[jd.suser] = new webkitRTCPeerConnection(servers);
var trpc = dpc[jd.suser];
trpc.setRemoteDescription(
new RTCSessionDescription(JSON.parse(jd.data))
);
trpc.addStream(localstream);
trpc.onicecandidate = function(event){
if (event.candidate) {
var obj = JSON.stringify({
"command":"conn",
"type":"ice_data",
"suser":jd.duser,
"duser":jd.suser,
"wname":jd.wname,
"ret":"main",
"data":JSON.stringify(event.candidate)
});
send(obj);
}
};
trpc.createAnswer(function(desc){
trpc.setLocalDescription(desc);
var obj = JSON.stringify({
"command":"conn",
"type":"answer",
"suser":jd.duser,
"duser":jd.suser,
"wname":jd.wname,
"ret":"main",
"data":JSON.stringify(desc)
});
send(obj);
});
}else if(jd.type=="ice_data"){
console.log("client_candidate",jd.data);
dpc[jd.suser].addIceCandidate(
new RTCIceCandidate(JSON.parse(jd.data))
);
}
}
}
function send(data){
try{
socket.send(data);
}catch(ex){
console.log("消息发送失败！");
}
}
网页前台代码。。。很简陋,vid可无限扩展
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>视频会议</title>
<link rel="stylesheet" href="css/main.css" />
<style>
div#container {
max-width: 90%;
}
video {
margin: 0 0.5em 1.5em 0;
}
@media screen and (min-width: 800px) {
video {
width: 45%;
}
}
</style>
<script src="js/rtc_main.js"></script>
</head>
<body>
<div id="container">
<video id="vid1" width="640" height="480" autoplay></video>
<video id="vid2" width="640" height="480" autoplay></video>
<div>
<input type="text" id="server" size="30" value='1.1.1.1'/>
<input type="text" id="work" size="30" value='work1'/>
<input type="text" id="username" size="30" value='user1'/>
<button id="btn1" onclick="connect()">连接服务器</button>
<button id="btn2" onclick="createWork()">创建工作区</button>
<button id="btn3" onclick="join()">连接到工作区</button>
<button id="btn4" onclick="startwork()">开始会议</button>
</div>
</div>
</body>
</html>
main.css
a {
color: #77aaff;
text-decoration: none;
}
a:hover {
color: #88bbff;
text-decoration: underline;
}
a#viewSource {
display: block;
margin: 1.3em 0 0 0;
border-top: 1px solid #999;
padding: 1em 0 0 0;
}
#server{
margin: 0 0.5em 0 0;
width: 7.5em;
color: #aaa;
}
div#links a {
display: block;
line-height: 1.3em;
margin: 0 0 1.5em 0;
}
@media screen and (min-width: 1000px) {
/ hack! to detect non-touch devices /
div#links a {
line-height: 0.8em;
}
}
audio {
max-width: 100%;
}
body {
background: #9999;
font-family: Arial, sans-serif;
padding: 20px;
word-break: break-word;
}
button {
margin: 0 0.5em 0 0;
width: 9em;
height: 5em;
}
button[disabled] {
color: #aaa;
}
code {
font-family: 'Courier New', monospace;
letter-spacing: -0.1em;
}
div#container {
background: #000;
margin: 0 auto 0 auto;
max-width: 40em;
padding: 1em 1.5em 1.3em 1.5em;
}
div#links {
padding: 0.5em 0 0 0;
}
h1 {
border-bottom: 1px solid #aaa;
color: white;
font-family: Arial, sans-serif;
margin: 0 0 0.8em 0;
padding: 0 0 0.4em 0;
}
h2 {
color: #ccc;
font-family: Arial, sans-serif;
margin: 1.8em 0 0.6em 0;
}
html {
/* avoid annoying page width change
when moving from the home page */
overflow-y: scroll;
}
img {
border: none;
max-width: 100%;
}
p {
color: #eee;
line-height: 1.6em;
}
p#data {
border-top: 1px dotted #666;
font-family: Courier New, monospace;
line-height: 1.3em;
max-height: 800px;
overflow-y: auto;
padding: 1em 0 0 0;
}
p.borderBelow {
border-bottom: 1px solid #aaa;
padding: 0 0 20px 0;
}
video {
background: #222;
width: 100%;
}
@media screen and (min-width: 800px) {
video {
}
}
@media screen and (max-width: 800px) {
video {
}
}
下面是Linux配置Stun和Turn服务端
先下载依赖包libevent编译安装
wget https://cloud.github.com/downloads/libevent/libevent/libevent-2.0.21-stable.tar.gz
tar -xvf libevent-2.0.21-stable.tar.gz
cd libevent*
./configure
make && make install
再下载服务端turnserver编译安装
wget http://turnserver.open-sys.org/downloads/v3.2.3.96/turnserver-3.2.3.96.tar.gz
tar -xvf turnserver-3.2.3.96.tar.gz
cd turnserver*
./configure
make && make install
修改服务端配置文件
cd /usr/local/etc/
cp -p turnserver.conf.default turnserver.conf
cp -p turnuserdb.conf.default turnuserdb.conf
vi turnserver.conf
查找修改以下内容，保存退出。
listening-device=eth1 服务器监听哪块网卡
listening-ip=1.1.1.1 服务器监听哪一个IP 这里1.1.1.1对应你的公网IP
其他选项根据情况设置，有详细的解释
下一步生成用户Key，用来验证用户，(不包含中括号)
turnadmin -k -u [用户名] -r [登录域(例:baidu.com)] -p [密码]
这个命令会产生一个0x开头的字符串，这便是用户的Key。
然后把用户名和Key保存在turnuserdb.conf里
vi turnuserdb.conf
下面是写入内容，保存退出。
[用户名]:[Key]
现在服务器配置完成，可启动服务了。直接运行turnserver即可。
客户端访问测试。
时间： 2024-10-05 17:31:55