守望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协议，支持点对点连接和数据传输，是一款非常方便实用的视频通话应用。
