WebRTC网页视频聊天(包含stun部署及SSL证书申请方法)

使用WebRTC实现一个简单的网页聊天室

效果图大概是这样,因为不想曝光,放一个网图

WebRTC网页视频聊天(包含stun部署及SSL证书申请方法)_第1张图片

直接上页面和源码

index.html




  
  
  
  
  


  
复制URL发送给对方,复制到浏览器即可通话

js 

//产生随机数
if (!location.hash) {
  location.hash = Math.floor(Math.random() * 0xFFFFFF).toString(16);
}
//获取房间号
const roomHash = location.hash.substring(1);

//放置自己的频道id
const drone = new ScaleDrone('yiS12Ts5RdNhebyM');
//房间名必须以'observable-'开头
const roomName = 'observable-' + roomHash;
//使用谷歌的stun服务,也可以自己部署
const configuration = {
  iceServers: [{
    urls: 'stun:stun.l.google.com:19302'
  }]
};
let room;
let pc;


function onSuccess() {};
function onError(error) {
  console.error(error);
};

drone.on('open', error => {
  if (error) {
    return console.error(error);
  }
  room = drone.subscribe(roomName);
  room.on('open', error => {
    if (error) {
      onError(error);
    }
  });
  //我们连接到房间后会收到一个'members'数组,代表房间里的成员
  //这个时候信令服务已经就绪
  room.on('members', members => {
    console.log('MEMBERS', members);
    // 如果是第二个进入房间的人,就会创建offer
    const isOfferer = members.length === 2;
    startWebRTC(isOfferer);
  });
});

//通过scaledrone发送信令
function sendMessage(message) {
  drone.publish({
    room: roomName,
    message
  });
}

function startWebRTC(isOfferer) {
  pc = new RTCPeerConnection(configuration);

  //当本地ICE Agent需要通过信号服务器发送消息到其他端时,会触发icecandidate事件回调

  pc.onicecandidate = event => {
    if (event.candidate) {
      sendMessage({'candidate': event.candidate});
    }
  };

  //如果是第二个进入的人,就在negotiationneded事件后创建sdp
  if (isOfferer) {

    pc.onnegotiationneeded = () => {

      pc.createOffer().then(localDescCreated).catch(onError);
    }
  }

  //当远程数据流到达时将数据流装载到video中
  pc.ontrack = event => {
    const stream = event.streams[0];
    if (!remoteVideo.srcObject || remoteVideo.srcObject.id !== stream.id) {
      remoteVideo.srcObject = stream;
    }
  };
  //获取本地媒体流
  navigator.mediaDevices.getUserMedia({
    audio: true,
    video: true,
  }).then(stream => {
    //将本地捕获的视频流装载到本地video中
    localVideo.srcObject = stream;
    //将本地流加入RTCPeerConnection 实例中 发送到其他端
    stream.getTracks().forEach(track => pc.addTrack(track, stream));
  }, onError);

  //从Scaledrone监听信令数据
  room.on('data', (message, client) => {
    //自己发送的消息不处理
    if (client.id === drone.clientId) {
      return;
    }

    if (message.sdp) {
      //设置远程sdp, 在offer 或者 answer后
      pc.setRemoteDescription(new RTCSessionDescription(message.sdp), () => {
        //当收到offer 后就接听
        if (pc.remoteDescription.type === 'offer') {
          pc.createAnswer().then(localDescCreated).catch(onError);
        }
      }, onError);
    } else if (message.candidate) {
      //增加新的 ICE canidatet 到本地的链接中
      pc.addIceCandidate(
        new RTCIceCandidate(message.candidate), onSuccess, onError
      );
    }
  });
}

function localDescCreated(desc) {
  pc.setLocalDescription(
    desc,
    () => sendMessage({'sdp': pc.localDescription}),
    onError
  );
}

本例子是参考webrtc-tutorial-simple-video-chat做的。

遇到的问题

问题有两个

一、stun服务器需要部署

这个问题我用的是网上公开的stun服务器,但缺点是stun服务器响应比较慢.,如果有需求可以自己在服务器上部署一个,这就不多说了。

 

放一段安装和配置的说明,有兴趣的可以试一下

1. coturn 的底层网络部分依赖libevent.  所以需要先安装libevent2, 地址在此 http://libevent.org/

2. coturn的安装很简单. configure make make install 三部曲就完事了. 

3. coturn的文档说明挺详细的. 但比较多. 我只是大概说明下. 

更具体的说明可以看 源码目录下的README.turnserver README.turnadmin README.turnutils

 

在bin目录下生成六个可执行文件

turnadmin turnutils_peer turnutils_stunclient
turnserver turnutils_rfc5769check turnutils_uclient

turnserver 就是我们需要的服务器. 

turnadmin 用来管理账户. 

turnutils_stunclient 用于测试stun服务

turnutils_uclient 用于测试turn服务. 模拟多个UDP,TCP,TLS or DTLS 类型的客户端

 

example 目录主要是示范如何配置和使用turn. 包含一些测试用例. 

example/etc 下是pem证书和conf配置文件

example/var/db 下是sqlite的db库. 用于示范数据库的格式.

coturn 支持三种配置. 命令行, conf文件和数据库. 数据库支持sqlite, mysql, postgresql, MongoDB, redis.

 

examples\scripts 下一些测试用例: 

loadbalance 示范如何进行负载均衡.  设置一个master turn server 然后配置若干个slave turn server. 

longtermsecure 示范如何使用long-term 验证

longtermsecuredb 与 longtermsecure 类似, 不过是从数据库配置

shorttermsecure 示范如何使用short-term验证. 

restapi 示范了web方面的使用. 

 

stun 定义了两种验证方式. 

Long-Term Credential
Short-Term Credential

具体可以参考stun标准 http://tools.ietf.org/html/rfc5389#section-15.4

但是对于webrtc而言. 仅支持long-term . 

 

http://www.ietf.org/proceedings/87/slides/slides-87-behave-10.pdf
TURN REST Server API

这个PDF 描述了. turn服务器和客户端的交互流程.

二、从服务器打开报错

Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)

对,就是这个错误,一般自己的服务器都是http访问,一般浏览器不会允许不安全的网站调用摄像头,这个时候只能把访问更改为https访问。

部署https需要申请证SSL证书,这里推荐Let's Encrypt证书申请,比较好用。

 

 

你可能感兴趣的:(WebRTC网页视频聊天(包含stun部署及SSL证书申请方法))