自己做的守望app

守望app是基于WebRTC技术开发的Web实时视频通话应用，可以帮助用户在任何时间、任何地点与他人进行实时的音视频通话。下面，我将详细介绍守望app的实现原理和开发流程。

一、技术架构

守望app的技术架构图如下所示：


整个技术架构分为三大模块：客户端、信令服务器和流媒体服务器。

客户端: 用户通过浏览器打开守望app网页即可使用应用，支持多种浏览器（Chrome、Firefox、Safari等）。通过getUserMedia API获取摄像头和麦克风设备，使用WebRTC技术进行实时音视频通话。

信令服务器：使用WebSocket协议进行通信，主要用于各个客户端之间进行信令交换，建立点对点的连接，完成媒体协商、Candidate交换等工作。

流媒体服务器：用于承载音视频流，支持RTP/RTCP传输协议。通过WebRTC的DataChannel传输媒体流数据，因此，实现了浏览器之间的直接点对点传输，而无需借助流媒体服务器转发数据。

二、开发流程

1.准备工作

准备WebRTC相关知识，并熟悉getUserMedia API、RTCPeerConnection、RTCSessionDescription等WebRTC核心API。

2.获取媒体设备

使用getUserMedia API调用摄像头和麦克风，获取源流数据，可以通过以下代码获取：

``` javascript

navigator.mediaDevices.getUserMedia({audio: true, video: true}).then(gotUserMediaStream).catch(handleError);

```

3.设置信令处理

使用WebSocket连接维护信令服务器。客户端之间通过信令协商流程建立连接，信令服务器的作用主要是转发和处理信令。

4.建立点对点连接

通过RTCPeerConnection建立点对点连接，支持音视频流传输，这里需要了解WebRTC的媒体协商流程和各类Candidate传输协议。可以通过以下代码创建RTCPeerConnection对象：

``` javascript

pc = new RTCPeerConnection(null);

```

5.添加流媒体

通过addStream方法添加音视频流到RTCPeerConnection对象中。

```javascript

pc.addStream(mediaStream);

```

6.发送和接收信令

通过websocket发送和接受信令，包括媒体协商、Candidate交换等。

7.传输数据

通过DataChannel传输媒体数据，在点对点连接建立后，可以通过DataChannel传输媒体流，也可以通过RTCPeerConnection中的addStream方法添加流数据。

```javascript

dc = pc.createDataChannel('chat');

dc.send('message data');

dc.onmessage = function (event) {

// 处理接收的数据

};

```

三、总结

守望app是基于WebRTC技术开发的实时视频通话应用，可以帮助用户实现任何地点、任何时间的实时音视频通信。通过WebSocket和RTCPeerConnection协议，支持点对点连接和数据传输，是一款非常方便实用的视频通话应用。