莫兮是我

webRTC- LearningWebRTC-读书笔记

LearningWebRTC 目录

文章目录

前言
- 前提
- 推荐阅读
总结
1. 开启WebRTC之旅
- 在WebRTC平台传输音频和视频
- WebRTC的应用
2. 获取用户媒体
- 配置静态服务器
- 媒体流页面
- - 注意
- 媒体流的方法- getUserMedia API
- - API处理方法
  - 限制视频捕捉
  - - 推荐阅读
    - 应用实例
  - 多设备处理
- 创建一个拍照
- 修改媒体流
3. 创建简单的WebRTC应用
- 本章内容
- 理解`UDP`传输协议和实时传输
- WebRTC API
- RTCPeerConnection对象
- 信号传递和交涉
- 会话描述协议-SDP
- 清晰的路线到用户
- `STUN`
- `TURN`
- `ICE`
- WebRTC应用
- - `RTCPeerConnection`
  - - `index.html`
    - `main.js`
    - 执行状态流程图
    - 捕获用户的摄像头
    - `RTCPeerConnection`对象
    - 建立`SDP Offer`和返回
    - 寻找`ICE`候选路径
    - 加入流和打磨
    - 增加`css`样式
  - 代码总结
4. 创建信令服务器
- 涵盖内容
- 构建信令服务器
- `WebSockets`
- - `server.js`
- 识别用户
- 存储对象
- `login`登录
- 发起通话
- 呼叫应答
- 处理`ICE`候选路径
- 呼叫挂断
- 完整的信令服务器
- `websocket`困境
- 代替技术 - `XMPP, SIP`
5. 连接客户端
- 涵盖内容
- 连接
- 创建页面
- - `index.html`
- 获取一个连接
- 登录
- 开始对等连接
- 发起通话
- 检测通信
- 挂断电话
- 总结
6. `WebRTC`发送数据
- 涵盖内容给
- 流控制传输协议和数据传输
- `RTCDataChannel`对象
- - `ondatachannel`事件
- 数据通道选项 - `dataChannelOptions`对象
- 发送数据
- 加密安全
- 添加文字聊天
- - `index.html`
  - `main.js`
  - 消息框样式
- 应用
7. 文件共享
- 使用文件`API`拾取文件
- - `index.html`
- 点对点连接和数据管道
- 获取对文件的引用
- 文件分块
- 文件分块可读
- 文件读取和发送
- 在接收端组合文件块
- 文件自动下载
- 向用户展示进度
- 总结
8. 高安全性和大规模优化
- 保护信令服务器
- - 使用编码
  - `OAuth`提供器
- 移动设备
- 网格网络
- 测试带宽

前言

适合HTML和JavaScript构建Web应用程序的有经验者
打算利用用户间音频和视频交流力量来构建新的应用程序
通过在用户之间转移高性能数据来实现应用程序
本书是写给新入门的网络工程师
实时通信的内部工作原理

前提

掌握编程概念和网络基础
sample:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning WebRTC - Chapter 4: Creating a RTCPeerCOnnection</title>
</head>
<body>
    <div id="container">
        <video id="yours" autoplay></video>
        <video id="theirs" autoplay></video>
    </div>

    <script src="main.js"></script>
</body>
</html>

总结

获取用户媒体
RTCPeerConnection, ICE, SDP, offer, answer
STUN信令服务器
完整连接项目
传输数据
性能和安全

未来方向：

点对点通信
点对点传输数据
服务器安全
游戏服务器更新对点通信

1. 开启WebRTC之旅

本章基础知识：

音频和视频领域的发展现状
WebRTC对音视频领域的影响
WebRTC主要特性及使用方法

在WebRTC平台传输音频和视频

需要考虑：
- 连接断开
- 数据丢失
- NAT穿透
API:
- 捕捉摄像头和麦克风
- 音视频解码
- 传输层
- 会话管理

音频和视频的编解码：codec(多媒体数字信号编解码器)
内置的编解码器：H.264, Opus, iSAC, VP8
WebRTC借鉴了其他传输层(AJAX, WebSockets)
会话管理：通常称为信令，负责在浏览器中建立并管理多个连接

WebRTC的应用

核心：在两个浏览器之间建立起来的一条点对点连接
可以应用在：文件共享、文本聊天、多人游戏、货币流通
连接低延迟、高性能，使用底层协议来提供高速性能，从而加速数据在网络间的流动，实现在短时间内传输大量的数据

2. 获取用户媒体

主要内容：

如何访问媒体设备
如何约束媒体流
如何处理多种设备
如何修改流数据

配置静态服务器

npm install -g node-static
static指定端口

媒体流页面

sample:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning WebRTC - Chapter 2: Get User Mediatitle>
head>
<body>
    <video autoplay>video>
    <script src="main.js">script>
body>
html>

// 函数
function hasUserMedia() {
    return !!(navigator.getUserMedia
            || navigator.webkitGetUserMedia
            || navigator.mozGetUserMedia
            || navigator.msGetUserMedia);
}

if(hasUserMedia()){
    navigator.getUserMedia = navigator.getUserMedia
                            || navigator.webkitGetUserMedia
                            || navigator.mozGetUserMedia
                            || navigator.msGetUserMedia;
    navigator.getUserMedia({
        video: true,
        audio: true
    }, stream => {
        let video = document.querySelector('video');
        try {
            video.src = window.URL.createObjectURL(stream);
        } catch(error){
            video.srcObject = stream;
        }
    }, err => {
        console.log(err);
    });
} else {
    alert("抱歉，你的浏览器不支持 getUserMedia");
}

// 类
class UserMedia {
    constructor() {
        this.hasUserMedia = !!(navigator.getUserMedia
            || navigator.webkitGetUserMedia
            || navigator.mozGetUserMedia
            || navigator.msGetUserMedia);
    }

    getMedia(tag){
        if(this.hasUserMedia){
            navigator.getUserMedia = navigator.getUserMedia
                || navigator.webkitGetUserMedia
                || navigator.mozGetUserMedia
                || navigator.msGetUserMedia;
            
            navigator.getUserMedia({
                video: true,
                audio: true
            }, stream => {
                let video = document.querySelector(tag);
                try {
                    video.src = window.URL.createObjectURL(stream);
                } catch(error){
                    video.srcObject = stream;
                }
            }, err => {                
                console.log(err);
                return err;
            });
        }else {
            alert("版本不支持");
            return;
        }
    }
}

let media = new UserMedia();
media.getMedia('video');

通过window.URL.createObjectURL将流加载到该元素中
不能接收JS作为参数，只能通过一些字符串来换取视频流
函数在获取流对象后，会将它转换成一个本地的URL，这样标签就能从这个地址获取流数据

注意

元素中应该包含一个autoplay属性，表示自动播放
从摄像头获取stream对象并导入页面上的视频元素这个过程，如果用C/C++是非常繁琐的

媒体流的方法- getUserMedia API

API处理方法

navigator.getUserMedia({video: false, audio: true}, function (stream){
	// 视频流里不包含视频
})

限制视频捕捉

应用实例

长宽比sample:

function hasUserMedia() {
    return !!(navigator.getUserMedia
            || navigator.webkitGetUserMedia
            || navigator.mozGetUserMedia
            || navigator.msGetUserMedia);
}

if(hasUserMedia()){
    navigator.getUserMedia = navigator.getUserMedia
                            || navigator.webkitGetUserMedia
                            || navigator.mozGetUserMedia
                            || navigator.msGetUserMedia;
    navigator.getUserMedia({
        video: {
            mandatory: {
                minAspectRatio: 1.777,
                maxAspectRatio: 1.778,
                minWidth: 640,
                maxHeight: 480
            }
        },
        audio: false
    }, function (stream) {
        let video = document.querySelector('video');
        try {
            video.src = window.URL.createObjectURL(stream);
        } catch(error){
            video.srcObject = stream;
        }
    }, function (err) {
        console.log(err);
    });
} else {
    alert("抱歉，你的浏览器不支持 getUserMedia");
}

移动端使用

let constraints = {
    video: {
        mandatory: {
            minWidth: 640,
            minHeight: 480
        }
    },
    audio: false
};

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i
    .test(navigator.userAgent)){
        constraints = {
            video: {
                mandatory: {
                    minWidth: 480,
                    minHeight: 320,
                    maxWidth: 1024,
                    maxHeight: 768
                }
            },
            audio: false
        };
    }

navigator.getUserMedia(constraints, stream => {
    let video = document.querySelector('video');
    try{
        video.src = window.URL.createObjectURL(stream);
    }catch(error){
        video.srcObject = stream;
    }
}, err => {
    console.log(err);
});

限制配置，决定着webRTC应用的性能

多设备处理

设备上接驳多台摄像头和麦克风
暴露了MediaSourceTrack的API
MediaStreamTrack.getSources已经弃用，现在用navigator.mediaDevices.enumerateDevices().then(function(sources))

navigator.mediaDevices.enumerateDevices().then(sources => {
    let audioSource = null;
    let videoSource = null;

    for(let i = 0; i < sources.length; ++i){
        let source = sources[i];
        if(source.kind === 'audio'){
            console.log("发现麦克风:", source.label, source.id);
            audioSource = source.id;
        } else if(source.kind === "video"){
            console.log("发现摄像头:", source.label, source.id);
            videoSource = source.id;
        } else {
            console.log("发现未知资源:", source);
        }
    }

    let constraints = {
        audio: {
            optional: [{sourceId: audioSource}]
        },
        video: {
            optional: [{sourceId: videoSource}]
        }
    };

    navigator.getUserMedia(constraints, stream => {
        let video = document.querySelector('video');
        try{
            video.src = window.URL.createObjectURL(stream);
        }catch(error){
            video.srcObject = stream;
        }
    },
        error => console.log(`出现错误${error}`)
    );
});

创建一个拍照

canvas可以绘制线条、图形和图片，可以制作游戏


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning WebRTC - Chapter 2: Get User Mediatitle>
    <style>

        video, canvas{
            border: 1px solid gray;
            width: 480px;
            height: 320px;
        }
    style>
head>
<body>
    <video autoplay>video>    
    <canvas>canvas>
    <button id="capture">Capturebutton>
    <script src="photobooth.js">script>
body>
html>

function hasUserMedia() {
    return !!(navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia);
}

if(hasUserMedia()){
    navigator.getUserMedia = navigator.getUserMedia
                        || navigator.webkitGetUserMedia
                        || navigator.mozGetUserMedia
                        || navigator.msContentScript;
    
    let video = document.querySelector('video');
    let canvas = document.querySelector('canvas');
    let streaming = false;

    navigator.getUserMedia({
        video: true,
        audio: false
    }, stream => {
        streaming = true;
        try{
            video.src = window.URL.createObjectURL(stream);
        }catch(error){
            video.srcObject = stream;
        }
    }, err => console.log(err)
    );

    document.querySelector('#capture').addEventListener('click',
        event => {
            if(streaming){
                canvas.width = video.clientWidth;
                canvas.height = video.clientHeight;
                
                let context = canvas.getContext('2d');
                context.drawImage(video, 0, 0);
            }
        }
    );
} else {
    alert("对不起，您的浏览器不支持");
}

修改媒体流

图片滤镜
添加css样式

.grayscale {
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -ms-filter: grayscale(1);
    -o-filter: grayscale(1);
    filter: grayscale(1);
}

.sepia {
    -webkit-filter: sepia(1);
    -moz-filter: sepia(1);
    -ms-filter: sepia(1);
    -o-filter: sepia(1);
    filter: sepia(1);    
}

.invert {
    -webkit-filter: invert(1);
    -moz-filter: invert(1);
    -ms-filter: invert(1);
    -o-filter: invert(1);
    filter: invert(1);
}

js增加滤镜功能：

function hasUserMedia() {
    return !!(navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia);
}

if(hasUserMedia()){
    navigator.getUserMedia = navigator.getUserMedia
                        || navigator.webkitGetUserMedia
                        || navigator.mozGetUserMedia
                        || navigator.msContentScript;
    
    let video = document.querySelector('video');
    let canvas = document.querySelector('canvas');
    let streaming = false;

    navigator.getUserMedia({
        video: true,
        audio: false
    }, stream => {
        streaming = true;
        try{
            video.src = window.URL.createObjectURL(stream);
        }catch(error){
            video.srcObject = stream;
        }
    }, err => console.log(err)
    );

    document.querySelector('#capture').addEventListener('click',
        event => {
            if(streaming){
                canvas.width = video.clientWidth;
                canvas.height = video.clientHeight;
                
                let context = canvas.getContext('2d');
                context.drawImage(video, 0, 0);
            }
        }
    );

    let filters = ['', 'grayscale', 'sepia', 'invert'];
    let currentFilter = 0;

    document.querySelector('video').addEventListener('click', 
        event => {
            if(streaming){
                canvas.width = video.clientWidth;
                canvas.height = video.clientHeight;
                let context = canvas.getContext('2d');

                context.drawImage(video, 0, 0);
                currentFilter++;
                if(currentFilter > filters.length - 1)  currentFilter = 0;
                canvas.className = filters[currentFilter];
            }
        }
    );
} else {
    alert("对不起，您的浏览器不支持");
}

图片添加文字

context.fillStyle = "white";
context.fillText("Hello World!", 10, 10);

3. 创建简单的WebRTC应用

开发任何WebRTC应用的首个步骤就是创建RTCPeerConnection
成功创建一个RTCPeerConnection的前提，就是需要理解浏览器创建对等连接的内部工作原理

本章内容

理解UDP传输协议和实时传输
在本地与其他用户发送信令和交涉
在Web上找到其他用户和NAT穿透
创建RTCPeerConnection

理解`UDP`传输协议和实时传输

实时传输要求双方间有快速的连接速度。

典型的网络连接：需要将音频和视频放到同一帧中，并以40-60帧的速度发送给另一个用户
因为允许数据丢失，人脑会对丢失的帧自动补成，所以UDP更适合，创建高性能应用
TCP不适合游戏中的流数据，游戏不需要可靠，只需要快
UDP传输不保证的事情：

不保证数据发送或接收的先后顺序
不保证每一个数据包都能够传送到接收端
不跟踪每个数据包的状态

WebRTC API

主要技术：

RTCPeerConnection对象
信号传递和交涉
会话描述协议-SDP
交互式连接建立-ICE

RTCPeerConnection对象

API的主入口

初始化一个连接他人以及传送流媒体信息
负责与另一个用户建立UDP连接
功能：
- 维护浏览器内会话和对等连接的状态
- 对等连接建立

实例化对象：

let myConnection = new RTCPeerConnection(configuration);
myConnection.onaddstream = stream => console.log(stream);

信号传递和交涉

网络地址：IP地址和端口号组成
发送信令的过程：

对等连接创建潜在的候选列表
选择用户连接
信令层通知用户连接，是否接受或拒绝
连接接收后的通知
交换电脑硬件和软件信息
交换位置信息
连接成功或失败

会话描述协议-SDP

用户需要传出信息指明视频解码器，何种网络。
SDP是基于字符串的二进制数据对象：=\n

sample:

let configuration = {
    bundlePolicy: "max-compat"
};
let myConnection = new RTCPeerConnection(configuration);
myConnection.onaddstream = function(stream) {
    console.log(stream);
};

清晰的路线到用户

为了保证网络安全

使用的多种技术：

NAT会话穿透技术 - STUN
中继技术穿透NAT - TURN
交互式连接建立 - ICE

典型的WebRTC连接过程的架构：

找到ip

`STUN`

发请求给服务器，服务器再转发

使用STUN协议需要由一个支持STUN协议的服务器

建立高质量的WebRTC应用实际上需要多个服务器，需要提供一套STUN和TURN服务器

`TURN`

客户端在对等连接的双方之间增加一个转播
资源消耗多
需要从TURN服务器去下载、处理并重定向每一个用户发送过来的数据包

`ICE`

STUN和TURN结合后的标准
每一个ICE候选路径都是通过STUN和TURN来找到的

WebRTC应用

创建一个RTCPeerConnection
创建DSP offer和回应
为双方找到ICE候选路径
创建一个成功的WebRTC连接

`RTCPeerConnection`

`index.html`


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning WebRTCtitle>
head>
<body>
    <div id="container">
        <video id="yours" autoplay>video>
        <video id="theirs" autoplay>video>
    div>
    <script src="./main.js">script>
    
body>
html>

`main.js`

hasUserMedia()
hasRTCPeerConnection()：确保能够使用

function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia
                        || navigator.webkitGetUserMedia
                        || navigator.mozGetUserMedia
                        || navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection
                            || window.webkitRTCPeerConnection
                            || window.mozRTCPeerConnection;
    return !!window.RTCPeerConnection;
}

执行状态流程图

从用户得到媒体流
建立对等连接
一方创建offer，另一方做准备。offer和返回都是发送信令过程中的一部分
找到合适的端口和IP组合进行链接，成功后开始共享信息

捕获用户的摄像头

let yourVideo = document.querySelector("#yours");
let theirVideo = document.querySelector("#theirs");
let yourConnection, theirConnection;

if(hasUserMedia()){
    navigator.getUserMedia({
        video: true,
        audio: false
    }, stream => {
        
            try{
                yourVideo.src = window.URL.createObjectURL(stream);
            }catch(error){
                yourVideo.srcObject = stream;
            }


        if(hasRTCPeerConnection()){
            startPeerConnection(stream);
        } else {
            alert("你的浏览器不支持webRTC");
        }
    }, error => {
        alert("你的浏览器不支持WebRtc");
    });
}

`RTCPeerConnection`对象

建立SCP offer和返回，为双方寻找ICE候选路径

function startPeerConnection(stream) {
    let configuration = {
        {
        	"iceServers": [{"url": "stun:127.0.0.1:9876"}]
    	}
    };

	yourConnection = new webkitRTCPeerConnection(configuration);
	theirConnection = new webkitRTCPeerConnection(configuration);
};

建立`SDP Offer`和返回

执行offer和返回answer这个过程以构成对等连接

function startPeerConnection(stream) {
    let configuration = {
        "iceServers": [
            {"url": "stun:127.0.0.1:9876"}
        ]
    };

    yourConnection = new webkitRTCPeerConnection(configuration);
    theirConnection = new webkitRTCPeerConnection(configuration);

    // 开始offer
    yourConnection.createOffer(offer => {
        yourConnection.setLocalDescription(offer);
        theirConnection.setRemoteDescription(offer);

        theirConnection.createAnswer(offer => {
            theirConnection.setLocalDescription(offer);
            yourConnection.setRemoteDescription(offer);
        });
    });    
}

由于通信双方在同一个浏览器窗口中，确保用户收到offer时不用执行多次异步操作，实现offer/answer机制

寻找`ICE`候选路径

连接用户不在同一个浏览器中时，将需要一个服务器。由于要跨多个浏览器窗口执行，将发生许多同步操作，会导致环境不稳定
建立对等连接的最后一部分是，在双方间传递ICE候选路径，以便相互连接

function startPeerConnection(stream) {
    let configuration = {
        "iceServers": [
            {"url": "stun:127.0.0.1:9876"}
        ]
    };

    yourConnection = new webkitRTCPeerConnection(configuration);
    theirConnection = new webkitRTCPeerConnection(configuration);

    // 创建ICE处理
    yourConnection.onicecandidate = event => {
        if(event.candidate){
            theirConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    theirConnection.onicecandidate = event => {
        if(event.candidate){
            yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    // 开始offer
    yourConnection.createOffer(offer => {
        yourConnection.setLocalDescription(offer);
        theirConnection.setRemoteDescription(offer);

        theirConnection.createAnswer(offer => {
            theirConnection.setLocalDescription(offer);
            yourConnection.setRemoteDescription(offer);
        });
    });
}

全部是事件驱动
寻找ICE候选路径是异步的
浏览器会不停地搜寻，直到尽可能多的创建良好且稳定的对等连接的候选路径
当我们从theirConnection中获取ICE候选路径时，需要将路径加入到yourConnections中。当另一方跟我们不在同一个网络时，这些数据会横跨整个互联网

加入流和打磨

调用onaddstream来通知用户，流已经被加入

// 监听流的创建
yourConnection.addStream(stream);
theirConnection.onaddstream = function(e) {
    theirVideo.src = window.URL.createObjectURL(e.stream);
};

//修改后
stream.getTracks().forEach(track => {
    yourConnection.addTrack(track, stream);
    theirConnection.onTrack = event => {
        try{
            theirVideo.src = window.URL.createObjectURL(event.stream);
        }catch(error){
            theirVideo.srcObject = event.stream;
        }

    };
});

增加`css`样式

body {
    background-color: #3D6DF2;
    margin-top: 15px;
}

video {
    background: black;
    border: 1px solid gray;
}

#container {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 500px;
    height: 500px;    
}

#yours {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 15px;
    right: 15px;
}

#theirs {
    width: 500px;
    height: 500px;
}body {
    background-color: #3D6DF2;
    margin-top: 15px;
}

video {
    background: black;
    border: 1px solid gray;
}

#container {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 500px;
    height: 500px;    
}

#yours {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 15px;
    right: 15px;
}

#theirs {
    width: 500px;
    height: 500px;
}

代码总结

index.html


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Learning WebRTCtitle>
    <link rel="stylesheet" href="./style.css" type="text/css">
head>
<body>
    <div id="container">
        <video id="yours" autoplay>video>
        <video id="theirs" autoplay>video>
    div>
    <script src="./main.js">script>
    
body>
html>

style.css

body {
    background-color: #3D6DF2;
    margin-top: 15px;
}

video {
    background: black;
    border: 1px solid gray;
}

#container {
    position: relative;
    display: block;
    margin: 0 auto;
    width: 500px;
    height: 500px;    
}

#yours {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 15px;
    right: 15px;
}

#theirs {
    width: 500px;
    height: 500px;
}

main.js

function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia
                        || navigator.webkitGetUserMedia
                        || navigator.mozGetUserMedia
                        || navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection
                            || window.webkitRTCPeerConnection
                            || window.mozRTCPeerConnection;
    return !!window.RTCPeerConnection;
}

function startPeerConnection(stream) {
    let configuration = {
        "iceServers": [
            {"url": "stun:127.0.0.1:9876"}
        ]
    };

    yourConnection = new webkitRTCPeerConnection(configuration);
    theirConnection = new webkitRTCPeerConnection(configuration);

    // 创建ICE处理
    yourConnection.onicecandidate = event => {
        if(event.candidate){
            theirConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    theirConnection.onicecandidate = event => {
        if(event.candidate){
            yourConnection.addIceCandidate(new RTCIceCandidate(event.candidate));
        }
    };

    // 开始offer
    yourConnection.createOffer(offer => {
        yourConnection.setLocalDescription(offer);
        theirConnection.setRemoteDescription(offer);

        theirConnection.createAnswer(offer => {
            theirConnection.setLocalDescription(offer);
            yourConnection.setRemoteDescription(offer);
        });
    });

    // 监听流创建
    stream.getTracks().forEach(track => {
        yourConnection.addTrack(track, stream);
        theirConnection.onTrack = event => {
            try{
                theirVideo.src = window.URL.createObjectURL(event.stream);
            }catch(error){
                theirVideo.srcObject = event.stream;
            }

        };
    });
    
}

let yourVideo = document.querySelector("#yours");
let theirVideo = document.querySelector("#theirs");
let yourConnection, theirConnection;

if(hasUserMedia()){
    navigator.getUserMedia({
        video: true,
        audio: false
    }, stream => {
        
            try{
                yourVideo.src = window.URL.createObjectURL(stream);
            }catch(error){
                yourVideo.srcObject = stream;
            }


        if(hasRTCPeerConnection()){
            startPeerConnection(stream);
        } else {
            alert("你的浏览器不支持webRTC");
        }
    }, error => {
        alert("你的浏览器不支持WebRtc");
    });
}

4. 创建信令服务器

创建完整的WebRTC应用，需要抛开客户端的开发，转而为服务端的开发

涵盖内容

Node.js
WebSocket
识别用户
发起和应答WebRTC通话
处理ICE候选路径的传送
挂断通话

构建信令服务器

将不在同一个电脑中的两个用户连接起来
服务器的目的是通过网络传输代替原先的信令机制
对多个用户做出回应：
- 允许一方用户呼叫另一方从而在双方间建立WebRTC连接
- 一旦用户呼叫了另一方，服务器将会在双方间传递请求，应答和ICE候选路径

流程：

服务器建立连接时的信息流
登陆服务器开始，登录向服务器端发送一个字符串形式的用户标识，确保没有被使用
登录进入，开始呼叫，通过使用对方的标识码发送请求
发送离开信息来终止连接
此流程主要用来作为互相发送信息的通道

注意：

由于发送信令的实现没有任何规则，可以使用任意协议、技术或者模式

`WebSockets`

建立WebRTC连接所需的步骤必须是实时的，最好使用WebSockets，不能使用WebRTC对等连接实时传递消息
Socket以字符串和二进制码方式双向发送信息
完全依赖于WebSocket框架：Meteor JavaScript framework
npm安装websocket：npm install ws
wscat：npm install wscat

`server.js`

const WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({port: 8888});

wss.on("connection", connection => {
    console.log("User connected");

    connection.on("message", message => {
        console.log("Got message:", message);
    });

    connection.send("hello world!")
});

监听服务器端的connection事件，当用户与服务器建立websocket连接时，会调用此，并有连接方的所有信息
安装wscat进行测试：npm install -g ws, wscat -c ws://localhost:8888，或者前端测试


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<body>
    <script>
        let websocket = new WebSocket("ws://localhost:8888");

    script>
body>
html>

识别用户

典型的网络应用中，服务器需要一种方法来识别连接的用户
遵循唯一规则，让每一个用户有一个字符串形式的标识，即用户名

仅需一个id来标识

const WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({port: 8888});

wss.on("connection", connection => {
    console.log("User connected");

    connection.on("message", message => {
        // console.log("Got message:", message);
        let data;

        try{
            data = JSON.parse(message);
        }catch(e) {
            console.log(e);
            data = {};
        }
    });

    connection.send("hello world!")
});

由于websocket只允许字符和二进制数据，用JSON格式的结构化消息

存储对象

用哈希图存储数据，在JS中叫对象

const WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({port: 8888}),
      users = {};
wss.on("connection", connection => {
    console.log("User connected");

    connection.on("message", message => {
        // console.log("Got message:", message);
        let data;

        try{
            data = JSON.parse(message);
        }catch(e) {
            console.log(e);
            data = {};
        }
    });

    connection.send("hello world!")
});

`login`登录

用户发送login类型信息才能登录
客户端发送每一个信息增加type字段

服务器端：

const WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({port: 8888}),
    users = {};

wss.on("connection", connection => {
    console.log("User connected");

    connection.on("message", message => {
        // console.log("Got message:", message);
        let data;

        try{
            data = JSON.parse(message);
        }catch(e) {
            console.log(e);
            data = {};
        }


        switch(data.type) {
            case "login":
                console.log("User logged in as", data.name);
                if(users[data.name]) {
                    sendTo(connection, {
                        type: "login",
                        success: false
                    });
                }else {
                    users[data.name] = connection;
                    connection.name = data.name;
                    sendTo(connection, {
                        type: "login",
                        success: true
                    });
                }
                break;
                
            default:
                sendTo(connection, {
                    type: "error",
                    message: "Unrecognized command: " + data.type;
                });

                break;
        }
    });

    connection.send("hello world!")
});

function sendTo(conn, message) {
    conn.send(JSON.stringify(message));
}

如果有用户登录ID，就拒绝

断开收尾：

const WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({port: 8888}),
    users = {};

wss.on("connection", connection => {
    console.log("User connected");

    connection.on("message", message => {
        // console.log("Got message:", message);
        let data;

        try{
            data = JSON.parse(message);
        }catch(e) {
            console.log(e);
            data = {};
        }


        switch(data.type) {
            case "login":
                console.log("User logged in as", data.name);
                if(users[data.name]) {
                    sendTo(connection, {
                        type: "login",
                        success: false
                    });
                }else {
                    users[data.name] = connection;
                    connection.name = data.name;
                    sendTo(connection, {
                        type: "login",
                        success: true
                    });
                }
                break;
                
            default:
                sendTo(connection, {
                    type: "error",
                    message: "Unrecognized command: " + data.type
                });

                break;
        }
    });

});

wss.on("close", function(){
    if(connection.name){
        delete users[connection.name];
    }
});

function sendTo(conn, message) {
    conn.send(JSON.stringify(message));
}

测试数据：{"type": "login", "name": "foo"}

发起通话

创建offer处理器，用户用来呼叫另一方
呼叫初始化的过程和WebRTC的offer分开最好，但此处结合

case "offer":
    console.log("sending offer to:", data.name);
    let conn = users[data.name];

    if(conn != null){
        connection.otherName = data.name;
        sendTo(conn, {
            type: "offer",
            offer: data.offer,
            name: connection.name
        });
    }
    break;

讲解：

首先获取试图呼叫用户的connection对象
检查另一用户是否在服务器上，若存在则发送offer
此方法使用于任何双方间的呼叫技术
缺少错误失败处理

呼叫应答

应答：服务器仅将消息作为answer传递给另一方

case "answer":
    console.log("sending answer to:", data.name);
    let conn = users[data.name];

    if(conn != null){
        connection.otherName = data.name;
        sendTo(conn, {
            type: "answer",
            answer: data.answer
        })
    }
    break;

如果一个用户先发送answer而非offer，将会扰乱服务器的实现
但实现了webRTC的RTCPeerConnection的createOffer和createAnswer

测试：

# 1
{"type": "login", "name": "UserA"}
# 2
{"type": "login", "name": "UserB"}
# 1
{"type": "offer", "name": "UserB", "offer": "hello"}
# 2
{"type": "answer", "name": "UserA", "answer": "hello to you too!"}

处理`ICE`候选路径

WebRTC信令的最后一部分是在用户间处理ICE候选路径
使用之前的技术在用户间传递消息。但此类消息的不同在于,每一个用户可能都需要发送多次,且在双方用户间会以任何顺序发送

添加candidate处理器：

case "candidate":
    console.log("sending to", data.name);
    conn = users[data.name];
    if(conn != null){
        sendTo(conn, {
            type: "candidate",
            candidate: data.candidate
        });
    }
    break;

由于通信已经建立，不需要在函数里添加另一方用户的名字类似于offer, answer，在双方间传递消息

# 1
{"type": "login", "name": "UserA"}
# 2
{"type": "login", "name": "UserB"}
# 1
{"type": "offer", "name": "UserB", "offer": "hello"}
# 2
{"type": "answer", "name": "UserA", "answer": "hello to you too!"}
# 1
{"type": "candidate", "name": "userA", "candidate": "test"}

呼叫挂断

用户从另一方断开，从而可以呼叫其他用户
通知服务器断开用户引用

case "leave":
    console.log("Disconnected user from ", data.name);
    conn = users[data.name];
    conn.otherName = null;

    if(conn != null){
        sendTo(conn, {
            type: "leave"
        });
    }
    break;

这段代码也会通知另一个用户leave事件的触发，这样可以对等地断开对等连接
当用户从信令服务器掉线时，我们也需要做响应的处理，不再提供服务，结束通话

wss.on("close", function(){
    if(connection.name){
        delete users[connection.name];

        if(connection.otherName) {
            console.log("Disconnected,",connection.otherName);
            let conn = users[connection.otherName];
            conn.otherName = null;

            if(conn != null){
                sendTo(conn,{
                    type: "leave"
                });
            }
        }
    }
});

完整的信令服务器

const WebSocketServer = require('ws').Server,
    wss = new WebSocketServer({port: 8888}),
    users = {};

wss.on("connection", connection => {
    console.log("User connected");

    connection.on("message", message => {
        // console.log("Got message:", message);
        let data, conn;

        try{
            data = JSON.parse(message);
        }catch(e) {
            console.log(e);
            data = {};
        }


        switch(data.type) {
            case "login":
                console.log("User logged in as", data.name);
                if(users[data.name]) {
                    sendTo(connection, {
                        type: "login",
                        success: false
                    });
                }else {
                    users[data.name] = connection;
                    connection.name = data.name;
                    sendTo(connection, {
                        type: "login",
                        success: true
                    });
                }
                break;
            
            case "offer":
                console.log("sending offer to:", data.name);
                conn = users[data.name];

                if(conn != null){
                    connection.otherName = data.name;
                    sendTo(conn, {
                        type: "offer",
                        offer: data.offer,
                        name: connection.name
                    });
                }
                break;

            case "answer":
                console.log("sending answer to:", data.name);
                conn = users[data.name];

                if(conn != null){
                    connection.otherName = data.name;
                    sendTo(conn, {
                        type: "answer",
                        answer: data.answer
                    })
                }
                break;

            case "candidate":
                console.log("sending to", data.name);
                conn = users[data.name];

                if(conn != null){
                    sendTo(conn, {
                        type: "candidate",
                        candidate: data.candidate
                    });
                }
                break;
            
            case "leave":
                console.log("Disconnected user from ", data.name);
                conn = users[data.name];
                conn.otherName = null;

                if(conn != null){
                    sendTo(conn, {
                        type: "leave"
                    });
                }
                break;
                
            default:
                sendTo(connection, {
                    type: "error",
                    message: "Unrecognized command: " + data.type
                });

                break;
        }
    });

});

wss.on("close", function(){
    if(connection.name){
        delete users[connection.name];

        if(connection.otherName) {
            console.log("Disconnected,",connection.otherName);
            let conn = users[connection.otherName];
            conn.otherName = null;

            if(conn != null){
                sendTo(conn,{
                    type: "leave"
                });
            }
        }
    }
});

wss.on("listening", () => {
    console.log("Server started...");
});

function sendTo(conn, message) {
    conn.send(JSON.stringify(message));
}

websocket支持SSL，可以启用wss://

`websocket`困境

防火墙问题
在代理设置下非常不稳定
webrtc延时导致消息处理混乱

代替技术 - `XMPP, SIP`

XMPP
SIP

5. 连接客户端

涵盖内容

从客户端获取到服务器的连接
识别各个连接端的用户
两个远程用户发起通话
结束通话

连接

包含两个页面：输入用户名，呼叫其他用户

创建页面

`index.html`


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>
<style>
    body{
        background-color: #3D6DF2;
        margin-top: 15px;
        font-family: sans-serif;
        color: white;
    }

    video {
        background: black;
        border: 1px solid gray;
    }

    .page {
        position: relative;
        display: block;
        margin: 0 auto;
        width: 500px;
        height: 500px;
    }

    #yours{
        width: 150px;
        height: 150px;
        position: absolute;
        top: 15px;
        right: 15px;
    }

    #theirs {
        width: 500px;
        height: 500px;
    }
style>
<body>
    <div id="login-page" class="page">
        <h2>Login Ash2>
        <input type="text" id="username">
        <button id="login">Loginbutton>
    div>

    <div id="call-page" class="page">
        <video id="yours" autoplay>video>
        <video id="theirs" autoplay>video>

        <input type="text" id="their-username">
        <button id="call">Callbutton>
        <button id="hang-up">Hang Upbutton>
    div>
body>
<script src="client.js">script>
html>

获取一个连接

与信令服务器创建连接

let name,
    connectedUser;

let connection = new WebSocket('ws://localhost:8888');

connection.onopen = function() {
    console.log("Connected");
};

connection.onmessage = function(message){
    console.log("Got message", message.data);

    let data = JSON.parse(message.data);

    switch(data.type){
        case "login":
            onLogin(data.success);
            break;
        case "offer":
            onOffer(data.offer, data.name);
            break;
        case "answer":
            onAnswer(data.answer);
            break;
        case "candidate":
            onCandidate(data.candidate);
            break;
        case "leave":
            onLeave();
            break;
        default:
            break;
    }
};

connection.onerror = function(err) {
    console.log(err);
}

function send(message) {
    if(connectedUser) {
        message.name = connectedUser;
    }

    connection.send(JSON.stringify(message));
}

let loginPage = document.querySelector('#login-page'),
    usernameInput = document.querySelector('#username'),
    loginButton = document.querySelector('#login'),
    callPage = document.querySelector('#call-page'),
    theirUsernameInput = document.querySelector('#theirusername'),
    callButton = document.querySelector('#call'),
    hangUpButton = document.querySelector('#hang-up');

callPage.style.display = 'none';

loginButton.addEventListener('click', event=>{
    name = usernameInput.value;

    if(name.length > 0){
        send({
            type: "login",
            name: name
        });
    }
});

function onLogin(success) {
    if(success === false){
        alert("Login unsuccessfully, please try a different name.");
    }else {
        loginPage.style.display = 'none';
        callPage.style.display = 'block';
    }

    // 准备好通话的通道
    startConnection();

}

开始对等连接

从相机中获取视频流
验证用户的浏览器是否支持WebRTC
创建RTCPeerConnection对象

let yourVideo = document.querySelector('#yours'),
    theirVideo = document.querySelector('#theirs'),
    yourConnection,
    connectedUser,
    stream;

function startConnection() {
    if(hasUserMedia()){
        navigator.getUserMedia({
            video: true,
            audio: true
        },
        myStream => {
            stream = myStream;
            
            try{
                yourVideo.src = window.URL.createObjectURL(stream);
            }catch(e){
                yourVideo.srcObject = stream;
            }

            if(hasRTCPeerConnection()){
                setupPeerConnection(stream);
            }else{
                alert("不支持webRTC");
            }
        },
        error => {
            console.log(error);
        }
        );
    }else{
        alert("不支持webRTC");
    }
}

function setupPeerConnection(stream) {
    let configuration = {
        "iceServers":[
            {"url":"stun:localhost:8888"}
        ]
    };

    yourConnection = new RTCPeerConnection(configuration);

    // 设置流量监听
    yourConnection.addStream(stream);
    yourConnection.onaddstream = function(e) {
        try{
            theirVideo.src = window.URL.createObjectURL(e.stream);
        }catch(e){
            theirVideo.srcObject = stream;
        }
    };

    yourConnection.onicecandidate = function(event) {
        if(event.candidate){
            send({
                type: "candidate",
                candidate: event.candidate
            });
        }
    };
}

function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia
                        || navigator.webkitGetUserMedia
                        || navigator.mozGetUserMedia
                        || navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection
                            || window.webkitRTCPeerConnection
                            || window.mozRTCPeerConnection;

    window.RTCSessionDescription = window.RTCSessionDescription
                            || window.webkitRTCSessionDescription
                            || window.mozRTCSessionDescription;
    
    window.RTCIceCandidate = window.RTCIceCandidate
                            || window.webkitRTCIceCandidate
                            || window.mozeRTCIceCandidate;

    return !!window.RTCPeerConnection;
}

发起通话

setLocalDescription()：更改与连接关联的本地描述。此说明指定连接的本地端的属性，包括媒体格式。
setRemoteDescription()：将指定的会话描述设置为远程对等方的当前提供或应答。描述指定连接远端的属性，包括媒体格式。
addIceCandidate()：通过信令信道从远程对等方接收新的ICE候选，它通过调用将新接收的候选发送到浏览器的ICE代理

callButton.addEventListener('click', function(){
    let theirUsername = theirUsernameInput.value;

    if(theirUsername.length > 0){
        startPeerConnection(theirUsername);
    }
});

function startPeerConnection(user) {
    connectedUser = user;

    // offer
    yourConnection.createOffer(offer=>{
        send({
            type: "offer",
            offer: offer
        });
        yourConnection.setLocalDescription(offer);
    },
    err => {
        alert("An error has occurred");
    });
}

function onOffer(offer, name) {
    connectedUser = name;
    yourConnection.setRemoteDescription(new RTCSessionDescription(offer));

    yourConnection.createAnswer(function(answer){
        yourConnection.setLocalDescription(answer);

        send({
            type: "answer",
            answer: answer
        });
    },
    err =>{
        alert("An error");
    }
    );
}

function onAnswer(answer){
    yourConnection.setRemoteDescription(new RTCSessionDescription(answer));
}

function onCandidate(candidate){
    yourConnection.addIceCandidate(new RTCIceCandidate(candidate));
}

检测通信

调试实时应用困难在：许多事件发生在同一时刻，要完整描述某一时刻发生了什么很难
Chrome中View->Developer->Developer Tools可以看到webSocket得通信状态

挂断电话

通知其他用户关闭通话
销毁本地连接，允许进行新的通话

过程：

通知服务器，断开连接
通知RTCPeerConnection关闭，停止发送数据流给其他用户
再次设置，连接实例设置为打开状态，以接受新的通话

hangUpButton.addEventListener("click", ()=>{
    send({
        type: "leave"
    });

    onLeave();
});

function onLeave() {
    connectedUser = null;
    theirVideo.srcObject = null;
    yourConnection.close();
    yourConnection.onicecandidate = null;
    yourConnection.onaddstream = null;
    setupPeerConnection(stream);
}

总结

全部代码整合

// 变量声明
let name,
    connectedUser;

let connection = new WebSocket('ws://localhost:8888');

let yourVideo = document.querySelector('#yours'),
    theirVideo = document.querySelector('#theirs'),
    yourConnection,
    stream;

let loginPage = document.querySelector('#login-page'),
    usernameInput = document.querySelector('#username'),
    loginButton = document.querySelector('#login'),
    callPage = document.querySelector('#call-page'),
    theirUsernameInput = document.querySelector('#their-username'),
    callButton = document.querySelector('#call'),
    hangUpButton = document.querySelector('#hang-up');

callPage.style.display = 'none';

// 点击按钮登录
loginButton.addEventListener('click', event=>{
    name = usernameInput.value;

    if(name.length > 0){
        send({
            type: "login",
            name: name
        });
    }
});

// websocket 连接
connection.onopen = function() {
    console.log("Connected");
};

// 监听websocket信息
connection.onmessage = function(message){
    console.log("Got message", message.data);

    let data = JSON.parse(message.data);

    switch(data.type){
        case "login":
            onLogin(data.success);
            break;
        case "offer":
            onOffer(data.offer, data.name);
            break;
        case "answer":
            onAnswer(data.answer);
            break;
        case "candidate":
            onCandidate(data.candidate);
            break;
        case "leave":
            onLeave();
            break;
        default:
            break;
    }
};

// websocket报错信息
connection.onerror = function(err) {
    console.log(err);
}

// Alia 以JSON格式发送信息
function send(message) {
    if(connectedUser) {
        message.name = connectedUser;
    }

    connection.send(JSON.stringify(message));
}

function onLogin(success) {
    if(success === false){
        alert("Login unsuccessfully, please try a different name.");
    }else {
        loginPage.style.display = 'none';
        callPage.style.display = 'block';
    }

    // 准备好通话的通道
    startConnection();
}

// call呼叫
callButton.addEventListener('click', function(){
    let theirUsername = theirUsernameInput.value;

    if(theirUsername.length > 0){
        startPeerConnection(theirUsername);
    }
});

// 挂断
hangUpButton.addEventListener("click", ()=>{
    send({
        type: "leave"
    });

    onLeave();
});

function onOffer(offer, name) {
    connectedUser = name;
    yourConnection.setRemoteDescription(new RTCSessionDescription(offer));

    yourConnection.createAnswer(function(answer){
        yourConnection.setLocalDescription(answer);

        send({
            type: "answer",
            answer: answer
        });
    },
    err =>{
        alert("An error");
    }
    );
}

function onAnswer(answer){
    yourConnection.setRemoteDescription(new RTCSessionDescription(answer));
}

function onCandidate(candidate){
    yourConnection.addIceCandidate(new RTCIceCandidate(candidate));
}


function onLeave() {
    connectedUser = null;
    theirVideo.srcObject = null;
    yourConnection.close();
    yourConnection.onicecandidate = null;
    yourConnection.onaddstream = null;
    setupPeerConnection(stream);
}


// 函数的polyfill
function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia
                        || navigator.webkitGetUserMedia
                        || navigator.mozGetUserMedia
                        || navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection
                            || window.webkitRTCPeerConnection
                            || window.mozRTCPeerConnection;

    window.RTCSessionDescription = window.RTCSessionDescription
                            || window.webkitRTCSessionDescription
                            || window.mozRTCSessionDescription;
    
    window.RTCIceCandidate = window.RTCIceCandidate
                            || window.webkitRTCIceCandidate
                            || window.mozeRTCIceCandidate;

    return !!window.RTCPeerConnection;
}

// 开始连接
function startConnection() {
    if(hasUserMedia()){
        navigator.getUserMedia({
            video: true,
            audio: false
        },
        myStream => {
            stream = myStream;
            
            try{
                yourVideo.src = window.URL.createObjectURL(stream);
            }catch(e){
                yourVideo.srcObject = stream;
            }

            if(hasRTCPeerConnection()){
                setupPeerConnection(stream);
            }else{
                alert("不支持webRTC");
            }
        },
        error => {
            console.log(error);
        }
        );
    }else{
        alert("不支持webRTC");
    }
}

// 
function setupPeerConnection(stream) {
    let configuration = {
        "iceServers":[
            {"url":"stun:localhost:8888"}
        ]
    };

    yourConnection = new RTCPeerConnection(configuration);

    // 设置流量监听
    yourConnection.addStream(stream);
    yourConnection.onaddstream = function(e) {
        try{
            theirVideo.src = window.URL.createObjectURL(e.stream);
        }catch(e){
            theirVideo.srcObject = stream;
        }
    };
    // 设置ICE处理事件
    yourConnection.onicecandidate = function(event) {
        if(event.candidate){
            send({
                type: "candidate",
                candidate: event.candidate
            });
        }
    };
}

// 开始创建offer
function startPeerConnection(user) {
    connectedUser = user;

    // offer
    yourConnection.createOffer(offer=>{
        send({
            type: "offer",
            offer: offer
        });
        yourConnection.setLocalDescription(offer);
    },
    err => {
        alert("An error has occurred");
    });
}

6. `WebRTC`发送数据

除了视频和音频，还有任意数据的传输

涵盖内容给

如何理解数据通道适应webRTC难题
如何在对等连接中创建一个数据通道对象
加密和安全问题
数据通道的潜在用例

流控制传输协议和数据传输

对等连接中传输数据，使用严格的TCP，AJAX和WebSocket对高性能是种考验
流控制传输协议(SCTP)，位于UDP上

堆栈图：

SCTP特点：

传输层的安全性，基于DTLS层
传输层可以运行在可靠的或不可靠的模式中
传输层可以担保或者无担保数据包顺序
数据是面向消息进行传播的，允许消息分解传输，在接收端重组
传输层支持流量和阻塞协议
解决了TCP问题，利用了UDP的传输能力

规范：

使用了多个端点，把消息分解成多个块进行发送数据
- 端点：在两个IP位置之间定义任意数据的连接
- 消息：任意从应用发送到SCTP层的数据
- 块：正准备通过电缆传输的数据包，表示消息的一部分

`RTCDataChannel`对象

let peerConnection = new RTCPeerConnection();

//建立对等连接使用信号
let dataChannel = peerConnection.createDataChannel("myLabel",
    dataChannelOptions);

数据通道存在的状态：

连接中：数据通道等待一个连接
开启：连接已经被建立，可以进行通信
关闭中：通道正在被销毁
关闭：通道关闭，无法进行通信

`ondatachannel`事件

dataChannel.onerror = function (error) {
    console.log("Data channel error:", error);
};

dataChannel.onmessage = function (event) {
    console.log("Data channel message:", event.data);
}

dataChannel.onopen = function () {
    console.log("Data channel opened, ready to send message!");
    dataChannel.send("Hello World!");
}

dataChannel.onclose = function () {
    console.log("Data channel has been closed");
}

数据通道和WebSocket相似

数据通道选项 - `dataChannelOptions`对象

let dataChannelOptions = {
    reliable: false,
    maxRetransmitTime: 3000
};

这些配置使应用在UDP或TCP的优势之间进行变化
- reliable, ordered的设置为true像TCP，false像UDP
reliable：设置消息传递是否进行担保
ordered：设置消息的接受是否需要按照发送时的顺序
maxRetransmitTime：设置消息发送失败时，多久重新发送
maxRetransmit：设置消息发送失败时，最多重发次数
protocol：设置强制使用其他子协议
negotiated：设置开发人员是否有责任在两边创建数据通道，还是浏览器自动完成这个步骤
id：设置通道的唯一标识，在多通道时进行区分

发送数据

数据通道的send像websocket的send
支持的数据类型：
- String
- Blob
- ArrayBuffer
- ArrayBufferView

dataChannel.onmessage = function (event) {
    console.log("Data channel message:", event.data);

    let data = event.data;

    if (data instanceof Blob){

    }else if (data instanceof ArrayBuffer) {

    }else if (data instanceof ArrayBufferView){

    }else {
    //    string
    }
}

加密安全

WebRTC运行时，对于所有协议的实现，都会强制执行加密功能
浏览器的每一个对等连接，都自动处于高的安全级别中
使用DTLS

添加文字聊天

`index.html`


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div id="call-page" class="page">
    <video id="yours" autoplay>video>
    <video id="theirs" autoplay>video>
    <input type="text" id="their-username">
    <button id="call">Callbutton>
    <button id="hang-up">Hang Upbutton>

    <input type="text" id="message">
    <button id="send">Sendbutton>
    <div id="received">div>
div>
body>
<script src="main.js">script>
html>

`main.js`

let yourConnection = new RTCPeerConnection(),
    received = document.getElementById("received");


function openDataChannel() {
    let dataChannelOptions = {
        reliable: true
    };

    dataChannel = yourConnection.createDataChannel("myLabel", dataChannelOptions);

    dataChannel.onerror = function (error){
        console.log("Data Channel Error: ", error);
    }

    dataChannel.onmessage = function (event) {
        console.log("Got Data Channel Message: ", event.data);

        received.innerHTML += "recv: " + event.data + "
";
        received.scrollTop = received.scrollHeight;
    };

    dataChannel.onopen = function () {
        dataChannel.send(name + "has connected.");
    };

    dataChannel.onclose = function (){
        console.log("The data channel is closed");
    };
}

添加：{optional: [{RtpDataChannels: true}]}

添加事件侦听器：

//绑定文本输入框和消息接收区
let sendButton = document.getElementById('send'),
    messageInput = document.getElementById('message');

sendButton.addEventListener('click', event => {
    let val = messageInput.value;
    received.innerHTML += "send: " + val + "
";
    received.scrollTop = received.scrollHeight;
    dataChannel.send(val);
});

消息框样式

#received {
    display: block;
    width: 480px;
    height: 100px;
    background: white;
    padding: 10px;
    margin-top: 10px;
    color: black;
    overflow: scroll;
}

应用

DTLS支持用户之间传输任何类型的数据
游戏点对点通信
游戏更新借助点对点通信
- 基于流的文件共享网络，减少了昂贵的中心服务器
- 趋于为用户之间进行大数据传输

点对点游戏的网络布局：

用户间使用webRTC连接来传输这些文件，替代昂贵的大型网络内容分发系统(CDN)

7. 文件共享

拥有点对点的数据传输能力并且与文件API相结合
利用WebRTC的Data Channel以及文件API来构造一个简易的文件共享应用
- 主要在两个用户(peer)间共享数据的应用
- 该应用的基本要求是实时性，两个用户必须同时在页面上，以共享一个文件

步骤：

用户A打开页面，输入一个唯一的ID号
用户B打开同样的页面，输入与A相同的ID号
两个用户使用RTCPeerConnection实现互联
一旦链接建立，其中一个用户能选择一个本地文件用于共享
另一个用户会在文件共享时收到通知，共享的文件可以通过链接传输到对方的计算机并且能下载

从浏览器拾取文件，将文件分块并仅使用RTCPeerConnection API来传送给另一个用户

使用文件`API`拾取文件

`index.html`


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body{
            background-color: #404040;
            margin-top: 15px;
            font-family: sans-serif;
            color: white;
        }

        .thumb {
            height: 75px;
            border: 1px solid #000;
            margin: 10px 5px 0 0;
        }

        .page{
            position: relative;
            display: block;
            margin: 0 auto;
            width: 500px;
            height: 500px;
        }

        #byte_content {
            margin: 5px 0;
            max-height: 100px;
            overflow-y: auto;
            overflow-x: hidden;
        }

        #byte_range {
            margin-top: 5px;
        }
    style>
head>
<body>
<div id="login-page" class="page">
    <h2>Login Ash2>
    <input type="text" id="username">
    <button id="login">Loginbutton>
div>

<div id="share-page" class="page">
    <h2>File Sharingh2>
    <input type="text" id="their-username">
    <button id="connect">Connectbutton>
    <div id="ready">Ready!div>

    <br>
    <br>

    <input type="file" id="files" name="file"> Read bytes:
    <button id="send">Sendbutton>
div>
body>
<script src="client.js">script>
html>

点对点连接和数据管道

let name,
    connectedUser,
    connection = new WebSocket('ws://localhost:8888');

connection.onopen = function () {
    console.log("Connected");
};

//处理所有消息
connection.onmessage = function (message) {
    console.log("Got message:", message.data);

    let data = JSON.parse(message.data);

    switch (data.type){
        case "login":
            onLogin(data.success);
            break;
        case "offer":
            onOffer(data.offer, data.name);
            break;
        case "answer":
            onAnswer(data.answer);
            break;
        case "candidate":
            onCandidate(data.candidate);
            break;
        case "leave":
            onLeave();
            break;
        default:
            break;
    }
};

//处理错误
connection.onerror = function (err) {
    console.log("Got error:", err);
}

//JSON形式发送消息
function send(message){
    if (connectedUser){
        message.name = connectedUser;
    }

    connection.send(JSON.stringify(message));
}

let loginPage = document.querySelector('#login-page'),
    usernameInput = document.querySelector('#username'),
    loginButton = document.querySelector('#login'),
    theirUsernameInput = document.querySelector('#their-username'),
    connectButton = document.querySelector('#connect'),
    sharePage = document.querySelector('#share-page'),
    sendButton = document.querySelector('#send'),
    readyText = document.querySelector('#ready'),
    statusText = document.querySelector('#status');

sharePage.style.display = 'none';
readyText.style.display = 'none';

//用户点击按钮登录
loginButton.addEventListener('click', event=>{
    name = usernameInput.value;

    if (name.length > 0){
        send({
            type: "login",
            name: name
        });
    }
});

function onLogin(success) {
    if (success === false){
        alert("Login 失败，请使用不同的名字");
    }else{
        loginPage.style.display = 'none';
        sharePage.style.display = 'block';

    //    为每个请求建立连接
        startConnection();
    }
}

let yourConnection,
    dataChannel,
    currentFile,
    currentFileSize,
    currentFileMeta;

function startConnection() {
    if (hasRTCPeerConnection()){
        setupPeerConnection();
    }else {
        alert("不支持webRTC");
    }
}

function setupPeerConnection() {
    let configuration = {
        "iceServers":[{
            "url": "stun:localhost:8888"
        }]
    };

    yourConnection = new RTCPeerConnection(configuration, {optional:[]});

//    set up ice handling
    yourConnection.onicecandidate = function (event){
        if (event.candidate){
            send({
                type: "candidate",
                candidate: event.candidate
            });
        }
    }
    openDataChannel();
}

function openDataChannel() {
    let dataChannelOptions = {
        ordered: true,
        reliable: true,
        negotiated: true,
        id: "myChannel"
    };

    dataChannel = yourConnection.createDataChannel("myLabel", dataChannelOptions);

    dataChannel.onerror = function (error){
        console.log("Data channel error:", error);
    };

    dataChannel.onmessage = function (event) {

    }

    dataChannel.onopen = function (){
        readyText.style.display = 'inline-block';
    };

    dataChannel.onclose = function (){
        readyText.style.display = "none";
    }
}

// 函数的polyfill
function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia
        || navigator.webkitGetUserMedia
        || navigator.mozGetUserMedia
        || navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection
        || window.webkitRTCPeerConnection
        || window.mozRTCPeerConnection;

    window.RTCSessionDescription = window.RTCSessionDescription
        || window.webkitRTCSessionDescription
        || window.mozRTCSessionDescription;

    window.RTCIceCandidate = window.RTCIceCandidate
        || window.webkitRTCIceCandidate
        || window.mozeRTCIceCandidate;

    return !!window.RTCPeerConnection;
}

function hasFileApi() {
    return window.File && window.FileReader && window.FileList && window.Blob;
}

//事件驱动
connectButton.addEventListener("click", ()=>{
    let theirUsername = theirUsernameInput.value;

    if (theirUsername.length > 0){
        startPeerConnection(theirUsername);
    }
});

function startPeerConnection(user) {
    connectedUser = user;

//    开始新建连接邀请
    yourConnection.createOffer(offer=>{
        send({
            type: "offer",
            offer: offer
        });

        yourConnection.setLocalDescription(offer);
    },
    error=>{
        alert("error");
    });
}

function onOffer(offer, name) {
    connectedUser = name;
    yourConnection.setRemoteDescription(new RTCSessionDescription(offer));

    yourConnection.createAnswer(answer=>{
        yourConnection.setLocalDescription(answer);

        send({
            type: "answer",
            answer: answer
        });
    },
    error =>    alert("error")
    );
}

function onAnswer(answer) {
    yourConnection.setRemoteDescription(new RTCSessionDescription(answer));
}

function onCandidate(candidate) {
    yourConnection.addIceCandidate(new RTCIceCandidate(candidate));
}

function onLeave() {
    connectedUser = null;

    yourConnection.close();
    yourConnection.onicecandidate = null;
    setupPeerConnection();
}

通过发送邀请和响应，将两个用户连接在一起
连接建立，可以在数据通道来回发送任意二进制数据信息

获取对文件的引用

let name,
    connectedUser,
    connection = new WebSocket('ws://localhost:8888');

connection.onopen = function () {
    console.log("Connected");
};

//处理所有消息
connection.onmessage = function (message) {
    console.log("Got message:", message.data);

    let data = JSON.parse(message.data);

    switch (data.type){
        case "login":
            onLogin(data.success);
            break;
        case "offer":
            onOffer(data.offer, data.name);
            break;
        case "answer":
            onAnswer(data.answer);
            break;
        case "candidate":
            onCandidate(data.candidate);
            break;
        case "leave":
            onLeave();
            break;
        default:
            break;
    }
};

//处理错误
connection.onerror = function (err) {
    console.log("Got error:", err);
}

//JSON形式发送消息
function send(message){
    if (connectedUser){
        message.name = connectedUser;
    }

    connection.send(JSON.stringify(message));
}

let loginPage = document.querySelector('#login-page'),
    usernameInput = document.querySelector('#username'),
    loginButton = document.querySelector('#login'),
    theirUsernameInput = document.querySelector('#their-username'),
    connectButton = document.querySelector('#connect'),
    sharePage = document.querySelector('#share-page'),
    sendButton = document.querySelector('#send'),
    readyText = document.querySelector('#ready'),
    statusText = document.querySelector('#status');

sharePage.style.display = 'none';
readyText.style.display = 'none';

//用户点击按钮登录
loginButton.addEventListener('click', event=>{
    name = usernameInput.value;

    if (name.length > 0){
        send({
            type: "login",
            name: name
        });
    }
});

function onLogin(success) {
    if (success === false){
        alert("Login 失败，请使用不同的名字");
    }else{
        loginPage.style.display = 'none';
        sharePage.style.display = 'block';

    //    为每个请求建立连接
        startConnection();
    }
}

let yourConnection,
    dataChannel,
    currentFile,
    currentFileSize,
    currentFileMeta;

function startConnection() {
    if (hasRTCPeerConnection()){
        setupPeerConnection();
    }else {
        alert("不支持webRTC");
    }
}

function setupPeerConnection() {
    let configuration = {
        "iceServers":[{
            "url": "stun:localhost:8888"
        }]
    };

    yourConnection = new RTCPeerConnection(configuration, {optional:[]});

//    set up ice handling
    yourConnection.onicecandidate = function (event){
        if (event.candidate){
            send({
                type: "candidate",
                candidate: event.candidate
            });
        }
    }
    openDataChannel();
}

function openDataChannel() {
    let dataChannelOptions = {
        ordered: true,
        reliable: true,
        negotiated: true,
        id: "myChannel"
    };

    dataChannel = yourConnection.createDataChannel("myLabel", dataChannelOptions);

    dataChannel.onerror = function (error){
        console.log("Data channel error:", error);
    };

    dataChannel.onmessage = function (event) {

    }

    dataChannel.onopen = function (){
        readyText.style.display = 'inline-block';
    };

    dataChannel.onclose = function (){
        readyText.style.display = "none";
    }
}

// 函数的polyfill
function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia
        || navigator.webkitGetUserMedia
        || navigator.mozGetUserMedia
        || navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection
        || window.webkitRTCPeerConnection
        || window.mozRTCPeerConnection;

    window.RTCSessionDescription = window.RTCSessionDescription
        || window.webkitRTCSessionDescription
        || window.mozRTCSessionDescription;

    window.RTCIceCandidate = window.RTCIceCandidate
        || window.webkitRTCIceCandidate
        || window.mozeRTCIceCandidate;

    return !!window.RTCPeerConnection;
}

function hasFileApi() {
    return window.File && window.FileReader && window.FileList && window.Blob;
}

//事件驱动
connectButton.addEventListener("click", ()=>{
    let theirUsername = theirUsernameInput.value;

    if (theirUsername.length > 0){
        startPeerConnection(theirUsername);
    }
});

function startPeerConnection(user) {
    connectedUser = user;

//    开始新建连接邀请
    yourConnection.createOffer(offer=>{
        send({
            type: "offer",
            offer: offer
        });

        yourConnection.setLocalDescription(offer);
    },
    error=>{
        alert("error");
    });
}

function onOffer(offer, name) {
    connectedUser = name;
    yourConnection.setRemoteDescription(new RTCSessionDescription(offer));

    yourConnection.createAnswer(answer=>{
        yourConnection.setLocalDescription(answer);

        send({
            type: "answer",
            answer: answer
        });
    },
    error =>    alert("error")
    );
}

function onAnswer(answer) {
    yourConnection.setRemoteDescription(new RTCSessionDescription(answer));
}

function onCandidate(candidate) {
    yourConnection.addIceCandidate(new RTCIceCandidate(candidate));
}

function onLeave() {
    connectedUser = null;

    yourConnection.close();
    yourConnection.onicecandidate = null;
    setupPeerConnection();
}

sendButton.addEventListener("click", event=>{
    let files = document.querySelector('#files').files;

    if(files.length > 0){
        dataChannelSend({
            type: "start",
            data: files[0]
        });

        sendFile(files[0]);
    }
});

dataChannelSend, sendFile暂时不写
此时可以获取文件的信息

文件分块

数据通道通过SCTP协议进行传输文件
如果网络不佳，会导致文件丢失
利用BitTorrent实现文件块切分，每次只传小块
必须在使用数据通道前使用这一步

文件分块可读

因为JS底层要求使用字符串格式，需要采用Base64编码
发送，转换为Base64编码 -> 传送过去另一个用户，解码得到结果

编码：

function arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return btoa(binary);
}

参数为ArrayBuffer对象，文件API读取文件内容时的返回值
fromCharcode转为字符
bota编码

解码：

function base64ToBlob(b64Data, contentType) {
    contentType = contentType || '';

    var byteArrays = [], byteNumbers, slice;

    for (var i = 0; i < b64Data.length; i++) {
        slice = b64Data[i];

        byteNumbers = new Array(slice.length);
        for (var n = 0; n < slice.length; n++) {
            byteNumbers[n] = slice.charCodeAt(n);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

charCodeAt每一个字符转化成二进制数据
得到翻译后的数组后，将其转换为Blob，因此JS可以对数据进行交互，甚至保存为文件

文件读取和发送

从文件中读取二进制数据，并且发送给另一个用户
数据通道和Base64编码有效结合

var CHUNK_MAX = 16000;
function sendFile(file) {
    var reader = new FileReader();

    reader.onloadend = function(evt) {
        if (evt.target.readyState == FileReader.DONE) {
            var buffer = reader.result,
                start = 0,
                end = 0,
                last = false;

            function sendChunk() {
                end = start + CHUNK_MAX;

                if (end > file.size) {
                    end = file.size;
                    last = true;
                }

                var percentage = Math.floor((end / file.size) * 100);
                statusText.innerHTML = "Sending... " + percentage + "%";

                dataChannel.send(arrayBufferToBase64(buffer.slice(start, end)));

                // If this is the last chunk send our end message, otherwise keep sending
                if (last === true) {
                    dataChannelSend({
                        type: "end"
                    });
                } else {
                    start = end;
                    // Throttle the sending to avoid flooding
                    setTimeout(function () {
                        sendChunk();
                    }, 100);
                }
            }

            sendChunk();
        }
    };

    reader.readAsArrayBuffer(file);
}

实例化FileReader对象
封装了JavaScript中使用不同格式读取文件的方法
以ArrayBuffer的形式读取二进制文件

文件读取的流程：

确认FileReader对象在DONE状态
初始化并获取文件数据的缓冲区引用
建立一个递归函数，实现发送文件块的功能
在函数中，从0开始读取一个文件块的字节
确保没有超过文件尾，否则没有数据可读
将数据通过Base64格式进行编码，并且进行发送
如果是最后一个文件块，告诉另一个用户已经完成文件发送
还有数据需要传输，在固定的时间后发送另一个分块防止API发生洪泛
sendChunk开始递归

在接收端组合文件块

由于在数据通道中使用了Ordered选项，用户收到的文件分块是有序的
解码函数将文件组合

dataChannel.onmessage = function (event) {
    try {
        var message = JSON.parse(event.data);

        switch (message.type) {
            case "start":
                currentFile = [];
                currentFileSize = 0;
                currentFileMeta = message.data;
                console.log("Receiving file", currentFileMeta);
                break;
            case "end":
                saveFile(currentFileMeta, currentFile);
                break;
        }
        //如果是中间文件，将进入报错处理环节
    } catch (e) {
        // Assume this is file content
        currentFile.push(atob(event.data));

        currentFileSize += currentFile[currentFile.length - 1].length;

        var percentage = Math.floor((currentFileSize / currentFileMeta.size) * 100);
        statusText.innerHTML = "Receiving... " + percentage + "%";
    }
};

文件自动下载

function saveFile(meta, data) {
    var blob = base64ToBlob(data, meta.type);
    console.log(blob);

    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = meta.name;
    link.click();
}

文件数据转化成几个块
新建link对象，url指向数据，模拟点击下载
createObjectURL创建伪位置

向用户展示进度

if (end > file.size) {
    end = file.size;
    last = true;
}

var percentage = Math.floor((end / file.size) * 100);
statusText.innerHTML = "Sending... " + percentage + "%";

接受端：

// Assume this is file content
currentFile.push(atob(event.data));

currentFileSize += currentFile[currentFile.length - 1].length;

var percentage = Math.floor((currentFileSize / currentFileMeta.size) * 100);
statusText.innerHTML = "Receiving... " + percentage + "%";

总结

var name,
    connectedUser;

var connection = new WebSocket('ws://localhost:8888');

connection.onopen = function () {
    console.log("Connected");
};

// Handle all messages through this callback
connection.onmessage = function (message) {
    console.log("Got message", message.data);

    var data = JSON.parse(message.data);

    switch(data.type) {
        case "login":
            onLogin(data.success);
            break;
        case "offer":
            onOffer(data.offer, data.name);
            break;
        case "answer":
            onAnswer(data.answer);
            break;
        case "candidate":
            onCandidate(data.candidate);
            break;
        case "leave":
            onLeave();
            break;
        default:
            break;
    }
};

connection.onerror = function (err) {
    console.log("Got error", err);
};

// Alias for sending messages in JSON format
function send(message) {
    if (connectedUser) {
        message.name = connectedUser;
    }

    connection.send(JSON.stringify(message));
};

var loginPage = document.querySelector('#login-page'),
    usernameInput = document.querySelector('#username'),
    loginButton = document.querySelector('#login'),
    theirUsernameInput = document.querySelector('#their-username'),
    connectButton = document.querySelector('#connect'),
    sharePage = document.querySelector('#share-page'),
    sendButton = document.querySelector('#send'),
    readyText = document.querySelector('#ready'),
    statusText = document.querySelector('#status');

sharePage.style.display = "none";
readyText.style.display = "none";

// Login when the user clicks the button
loginButton.addEventListener("click", function (event) {
    name = usernameInput.value;

    if (name.length > 0) {
        send({
            type: "login",
            name: name
        });
    }
});

function onLogin(success) {
    if (success === false) {
        alert("Login unsuccessful, please try a different name.");
    } else {
        loginPage.style.display = "none";
        sharePage.style.display = "block";

        // Get the plumbing ready for a call
        startConnection();
    }
};

var yourConnection, connectedUser, dataChannel, currentFile, currentFileSize, currentFileMeta;

function startConnection() {
    if (hasRTCPeerConnection()) {
        setupPeerConnection();
    } else {
        alert("Sorry, your browser does not support WebRTC.");
    }
}

function setupPeerConnection() {
    var configuration = {
        "iceServers": [{ "url": "stun:127.0.0.1:8888" }]
    };
    yourConnection = new RTCPeerConnection(configuration, {optional: []});

    // Setup ice handling
    yourConnection.onicecandidate = function (event) {
        if (event.candidate) {
            send({
                type: "candidate",
                candidate: event.candidate
            });
        }
    };

    openDataChannel();
}

function openDataChannel() {
    var dataChannelOptions = {
        ordered: true,
        reliable: true,
        negotiated: true,
        id: 0
    };
    dataChannel = yourConnection.createDataChannel('myLabel', dataChannelOptions);

    dataChannel.onerror = function (error) {
        console.log("Data Channel Error:", error);
    };

    dataChannel.onmessage = function (event) {
        try {
            var message = JSON.parse(event.data);

            switch (message.type) {
                case "start":
                    currentFile = [];
                    currentFileSize = 0;
                    currentFileMeta = message.data;
                    console.log(`message.data: `)
                    console.log(message.data)
                    console.log("Receiving file", currentFileMeta);
                    break;
                case "end":
                    saveFile(currentFileMeta, currentFile);
                    break;
            }
        } catch (e) {
            // Assume this is file content
            currentFile.push(atob(event.data));

            currentFileSize += currentFile[currentFile.length - 1].length;

            var percentage = Math.floor((currentFileSize / currentFileMeta.size) * 100);
            statusText.innerHTML = "Receiving... " + percentage + "%";
        }
    };

    dataChannel.onopen = function () {
        readyText.style.display = "inline-block";
    };

    dataChannel.onclose = function () {
        readyText.style.display = "none";
    };
}

// Alias for sending messages in JSON format
function dataChannelSend(message) {
    dataChannel.send(JSON.stringify(message));
}

function saveFile(meta, data) {
    var blob = base64ToBlob(data, meta.type);
    console.log(blob);

    var link = document.createElement('a');
    link.href = window.URL.createObjectURL(blob);
    link.download = meta.name;
    link.click();
}

function hasUserMedia() {
    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    return !!navigator.getUserMedia;
}

function hasRTCPeerConnection() {
    window.RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
    window.RTCSessionDescription = window.RTCSessionDescription || window.webkitRTCSessionDescription || window.mozRTCSessionDescription;
    window.RTCIceCandidate = window.RTCIceCandidate || window.webkitRTCIceCandidate || window.mozRTCIceCandidate;
    return !!window.RTCPeerConnection;
}

function hasFileApi() {
    return window.File && window.FileReader && window.FileList && window.Blob;
}

connectButton.addEventListener("click", function () {
    var theirUsername = theirUsernameInput.value;

    if (theirUsername.length > 0) {
        startPeerConnection(theirUsername);
    }
});

function startPeerConnection(user) {
    connectedUser = user;

    // Begin the offer
    yourConnection.createOffer(function (offer) {
        send({
            type: "offer",
            offer: offer
        });
        yourConnection.setLocalDescription(offer);
    }, function (error) {
        alert("An error has occurred.");
    });
};

function onOffer(offer, name) {
    connectedUser = name;
    yourConnection.setRemoteDescription(new RTCSessionDescription(offer));

    yourConnection.createAnswer(function (answer) {
        yourConnection.setLocalDescription(answer);

        send({
            type: "answer",
            answer: answer
        });
    }, function (error) {
        alert("An error has occurred");
    });
};

function onAnswer(answer) {
    yourConnection.setRemoteDescription(new RTCSessionDescription(answer));
};

function onCandidate(candidate) {
    yourConnection.addIceCandidate(new RTCIceCandidate(candidate));
};

function onLeave() {
    connectedUser = null;
    yourConnection.close();
    yourConnection.onicecandidate = null;
    setupPeerConnection();
};

function arrayBufferToBase64(buffer) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return btoa(binary);
}

function base64ToBlob(b64Data, contentType) {
    contentType = contentType || '';

    var byteArrays = [], byteNumbers, slice;

    for (var i = 0; i < b64Data.length; i++) {
        slice = b64Data[i];

        byteNumbers = new Array(slice.length);
        for (var n = 0; n < slice.length; n++) {
            byteNumbers[n] = slice.charCodeAt(n);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }

    var blob = new Blob(byteArrays, {type: contentType});
    return blob;
}

var CHUNK_MAX = 16000;
function sendFile(file) {
    var reader = new FileReader();

    reader.onloadend = function(evt) {
        if (evt.target.readyState == FileReader.DONE) {
            var buffer = reader.result,
                start = 0,
                end = 0,
                last = false;

            function sendChunk() {
                end = start + CHUNK_MAX;

                if (end > file.size) {
                    end = file.size;
                    last = true;
                }

                var percentage = Math.floor((end / file.size) * 100);
                statusText.innerHTML = "Sending... " + percentage + "%";

                dataChannel.send(arrayBufferToBase64(buffer.slice(start, end)));

                // If this is the last chunk send our end message, otherwise keep sending
                if (last === true) {
                    dataChannelSend({
                        type: "end"
                    });
                } else {
                    start = end;
                    // Throttle the sending to avoid flooding
                    setTimeout(function () {
                        sendChunk();
                    }, 100);
                }
            }

            sendChunk();
        }
    };

    reader.readAsArrayBuffer(file);
}

sendButton.addEventListener("click", function (event) {
    var files = document.querySelector('#files').files;

    if (files.length > 0) {
        dataChannelSend({
            type: "start",
            data: files[0],
            name: files[0].name
        });
        console.log(`datachannel start[0]: `)
        console.log(files[0])
        sendFile(files[0]);
    }
});

8. 高安全性和大规模优化

深入研究和阅读
以服务器为例

保护信令服务器

还需要根据特性进行修改

使用编码

强制加密，对信令服务器的消息进行加密
加密方式HTTPS, WSS
HTTPS是HTTP进行的SSL加密方式
WSS是TLS上基于WebSocket的SSL加密方式

`OAuth`提供器

集成一个第三方身份提供器
背后原理：token是一个包含数字和字母的随机字符串

实现前的考虑：

双方用户在形成链接之前都必须登录
双方用户必须相互认识才能被允许进行对话
双方用户在对话时不会受到网络攻击的愚弄

移动设备

减少数据量，减少视频大小

let mobile = {
    video: {
        mandatory: {
            maxWidth: 640,
            maxHeight: 360
        }
    }
};

let desktop = {
    video: {
        mandatory: {
            minWidth: 1280,
            minHeight: 720
        }
    }
};

let constraints;

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
    constraints = mobile;
}else {
    constraints = desktop;
}

navigator.getUserMedia(constraints, success, function (error)){

};

网格网络

一对一变成一对多
网格：每一个节点和其他所有节点在一个全网格进行对话

测试带宽

var src = "example-image.jpg",
    size = 5000000,
    image = new Image(),
    startTime,
    endTime,
    totalTime = 0,
    speed = 0;

image.onload = function () {
  endTime = (new Date()).getTime();
  totalTime = (endTime - startTime) / 1000;
  speed = (size * 8 / totalTime); // bytes per second
};

startTime = (new Date()).getTime();
image.src = src + "?cacheBust=" + startTime;

你可能感兴趣的:(前端,JS,WEB,webrtc)

Postgresql 删除数组中的元素 llc的足迹数据库 postgresql 数据库
extra为{“a”:[null,3,null],“b”:111}使用sql将extra中a中的null移除第一步：首先先把[null,3,null]移除，selectjson_agg(elem)filter(whereelem!='null')from(selectjsonb_array_elements('[null,3,null]'::jsonb)aselem)t;这将得到[3]jsonb_
前段存储sessionStorage值localStorage值 ___大鱼___
对浏览器来说，使用WebStorage存储键值对比存储Cookie方式更直观，而且容量更大，它包含两种：localStorage和sessionStoragesessionStorage（临时存储）：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载localStorage（长期存储）：与sessionStorage一样，但是浏览器关闭后，数据依然会一直存在constinfo=
前端进阶：JavaScript实现优雅遮罩层下的表单验证技巧 VaporGas 前端前端 javascript html html5 ecmascript 开发语言
表单验证的高级特性本次介绍的重点如下：动态改变样式属性className属性的用法遮罩层特效的制作动态输入的提示特性实现当文本框获得焦点时改变背景颜色，失去焦点时恢复白色使用元素的style属性访问样式规则object.style.property;例如:访问字体的颜色color使用obj.style.color访问字体的大小属性使用obj.style.fontSizefont-size变换成fo
前端工程化——脚手架及自动化构建 Jelly-JK 前端工程化 javascript node.js html
定义一切以提高效率、降低成本、质量保证为目的的手段，都属于工程化前端工程化主要解决的问题传统语言或语法的弊端无法使用模块化/组件化重复性的机械工作代码风格统一、质量保证依赖后端服务接口的保证整体依赖后端项目工程化的表现体现在项目的整个流程：创建项目创建项目结构创建特定类型文件编码格式化校验校验代码风格编译/构建/打包预览/测试WebServer/MockLiveReloading/HMRSourc
使用Electron读取本地文件 ch_s_t 前端开发 electron javascript 前端
Electron原来叫AtomShell,可以用Web技术搭建桌面端程序，以Electron为基础，可以用HTML，CSS和javascriptpt实现程序逻辑和用户桌面，Electron程序一般有主进程和渲染进程，主进程是启动程序的Node脚本，提供对原生的node模块访问。渲染进程是由chromium管理的Web界面。以下的内容介绍从零开始搭建一个读取本地文件的Electron项目。一运行简单
Spring Boot 技术提升房屋租赁系统性能 2401_85763803 spring boot 后端 java
第2章技术介绍2.1相关技术房屋租赁系统是在JSP+MySQL开发环境的基础上开发的。JSP是一种服务器端脚本语言，易于学习，实用且面向用户。全球超过35％的JSP驱动的互联网站点使用JSP。MySQL是一个数据库管理系统，因为它的体积小但速度快，成本低，或者开源受到中小型网站的青睐。因此，JSP+MySQL作为一个成熟的开发环境，可以满足房屋租赁系统设计和开发所需的稳定性，安全性和可扩展性要求。
JsonCpp源码分析——Reader 哎呦，帅小伙哦 #jsoncpp json
1、与Writer模块功能相反，可以将Reader理解成一个反序列化的工具，Writer的作用主要是将Value对象转成string或者流式的结构，Reader的作用主要是将流式的结构转成Value类型的对象。Reader类的主要职责有3个，解析JSON字符串：将JSON格式的字符串读取并解析成相应的C++数据结构。处理不同的数据类型，支持解析JSON对象、数组、字符串、数字、布尔值和null。处
Gitbook 本地安装教程 simple哇书籍 gitbook
Gitbook本地安装教程安装node[nodejs的v10.21.0版本，下载地址：https://nodejs.org/dist/v10.21.0/node-v10.21.0-x64.msi]其他版本有问题npmnpminstall-ggitbook-cligitbookinit[初始化目录结构]gitbookbuild[编译]gitbookserve[运行]插件在根目录新建book.json
[WinError 10013] 以一种访问权限不允许的方式做了一个访问套接字的尝试 lgc0208 服务器网络 socket
在使用Tensorboard的过程中，遇到报错[WinError10013]以一种访问权限不允许的方式做了一个访问套接字的尝试可能原因：当前端口被占用。解决方案：以6006端口为例，首先打开命令行，输入命令：netstat-aon|findstr"6006"查找当前正在占用6006端口的进程PID。查询到对应进程PID后，打开任务管理器，点击详细信息，找到PID对应的进程关闭即可。
mysql是后端还是前端_MySQL数据库之前端和后端的系统优化草莓西瓜大桃子 mysql是后端还是前端
本文中介绍的系统优化，主要针对前端和后台这两方面(后台方面主要对SQL语句和数据存储进行了优化)，下文中我们将介绍一些优化技巧和经验。技巧：1.如何查出效率低的语句？在MySQL下，在启动参数中设置--log-slow-queries=[文件名]，就可以在指定的日志文件中记录执行时间超过long_query_time(缺省为10秒)的SQL语句。你也可以在启动配置文件中修改longquery的时间
python爬虫处理滑块验证_python selenium爬虫滑块验证用户6731453637 python爬虫处理滑块验证
importrandomimporttimefromPILimportImagefromioimportBytesIOimportrequestsasrqfrombs4importBeautifulSoupasbsfromseleniumimportwebdriverfromselenium.webdriverimportActionChainsfromselenium.webdriverimpo
Vue解說白总Server vue.js 前端 javascript 数据库架构网络协议 ssl 网络
Vue.js（通常简称为Vue）是一个开源的JavaScript框架，用于构建用户界面和单页应用程序（SPA）。它由前谷歌工程师尤雨溪（EvanYou）创建，并首次发布于2014年。Vue被设计为易于上手、灵活且高效，它允许开发者通过组件化的方式构建复杂的前端应用。Vue.js的关键特点：渐进式框架：Vue可以从简单的界面元素开始，逐步扩展到复杂的单页应用。响应式数据绑定：Vue使用双向数据绑定，
程式语言区分白总Server html python java c++开发语言
程序语言有很多种，每种都有其特定的用途和特点。以下是一些广泛使用的编程语言：1.Python：易于学习，广泛用于数据科学、机器学习、网络开发、自动化等领域。2.Java：广泛应用于企业级应用、安卓开发、大型系统开发等。3.C：一种基础语言，广泛用于系统编程、嵌入式开发、操作系统等领域。4.C++：C语言的扩展，支持面向对象编程，用于游戏开发、高性能应用等。5.JavaScript：主要用于网页前端
JS手写实现深拷贝 Mzp风可名喜欢 javascript 前端
手写深拷贝一、通过JSON.stringify二、函数库lodash三、递归实现深拷贝基础递归升级版递归---解决环引用爆栈问题最终版递归---解决其余类型拷贝结果一、通过JSON.stringifyJSON.parse(JSON.stringify(obj))是比较常用的深拷贝方法之一原理：利用JSON.stringify将JavaScript对象序列化成为JSON字符串，并将对象里面的内容转换
基于geotools,java 存储geojson、shapefile、postgis的导入导出和转换功能 Kevin_wang3 yieryi@github geotools postgis geojson shp java
2021年1月23日自己简单总结了以下，在github上。链接地址：https://github.com/yieryi/gts4vect如果改功能对您有用，欢迎star,代码只写了第一版，有人反馈问题的话我会改进的。该博客为原创，转载请注明链接；https://blog.csdn.net/imlang/article/details/81434652；下面的代码介绍参考性不大，大约是18年写的。没
前端架构师招聘 qq_42801150 前端架构金融
前端架构师（薪酬50-80W）所属部门：医美云事业部级别：T4岗位职责：1.负责事业部前端技术选型、关键技术决策；2.负责为技术VP前端相关技术决策提供建议和支持；3.负责组织实施内部UI库、内部基础研发工具和研发依赖的开发和实施；4.负责制订公司前端研发规范的制订和实施审查；5.负责组织定期内部前端业务培训，协助提升内部员工前端业务技能。任职要求：1.5年以上工作经验，大型互联网公司前端团队技术
大前端面试题集锦——HTML篇 Midshar.top 前端 html
HTML篇1.什么是DOCTYPE,有何作用?DOCTYPE是用来声明HTML文档应当使用哪种版本来进行解析如果不使用DOCTYPE告知浏览器应当使用哪种版本解析文档,那么浏览器将会开启最大兼容模式来解析文档,一般称为怪异模式.在怪异模式下,可能会产生一些预想不到的bug2.说说对HTML语义化的理解?HTML的语义化指的是在合适的地方使用合适的标签,让人能够根据标签进而大致知晓标签内容语义化使得
高频面试题：ReactNative前端面试频率较高的面试题和答案（十六）夲奋亻Jay 高频面试题 react 跨端 react native 前端面试
ReactNative是一个由Facebook开发的框架，它允许使用React来开发原生移动应用。以下是一些在前端面试中可能会问到的关于ReactNative的高频面试题及答案：ReactNative是什么？答案：ReactNative是一个基于React构建的框架，允许使用JavaScript和React的编程方式来开发原生移动应用。ReactNative与React有什么不同？答案：React
canvas插件 fabric.js 使用 lxw_powerfulCat 前端 javascript fabric html
fabric.js使用fabric.js是常用的canvas插件1,在项目中使用2,特殊用法①,基本设置②,画板数据的导入导出③,遮罩Pattern(引用官网案例)④,多个对象合并,并设置为fabric背景(适用于变色和更多场景)⑤,把canvas对象或者fabric对象导出为图片⑥,位置的获取思路一:(计算法,没算出来)思路二(记录位置)补充:鼠标位移留痕不规则线条在如下代码中注意事项fabri
Vue2 中组件的本质、组件的实例化、组件实例的挂载纷飞丿 vue杂谈 vue.js 前端 javascript
这篇博客的内容是讲讲在Vue2中，组件在底层的本质。在这里，直接抛出结论：组件的本质就是一个个的构造函数，这些函数以组件的定义options对象为参数，在Vue2中，最顶级的组件就是我们从vue.js中导入的Vue函数，而子组件是Vue底层通过extend函数创建出来的VueComponent函数。通过new这些组件的构造函数，我们可以创建出组件实例。1，顶级组件（Vue构造函数）有哪些重要的属性
前端架构师的职责 acigt0531 前端 git ViewUI
前端架构师的职责没有文档的代码=放弃治疗作为前端架构师,首先要解决的问题就是让日益膨胀的代码可控,因此你需要梳理代码,建立架构,组织文档,管理架构的更新和维护,评审技术方案对架构的影响,核心模块的方案设计,重点项目的方案设计,CodeReview等.架构师和资深开发在工作职责上有着明确的界限,在一个没有架构师的团队,每一个资深开发或多或少都承担了一部分架构的工作,但都是破碎的,不成体系而且不统一,
前端技能树，面试复习第 54 天—— 手写代码：情景题编程轨迹_ 前端面试复习笔记前端面试题手写题真题场景题
⭐️本文首发自前端修罗场(点击加入社区，参与学习打卡，获取奖励)，是一个由资深开发者独立运行的专业技术社区，我专注Web技术、区块链、Web3、答疑解惑、面试辅导以及职业发展。本文已收录至前端面试题库专栏：《前端面试复习笔记》（点击订阅）。1.循环打印红黄绿下面来看一道比较典型的问题，通过这个问题来对比几种异步编程方法：红灯3s亮一次，绿灯1s亮一次，黄灯2s亮一次；如何让三个灯不断交替重复亮灯？
CSS前端经典面试题及解析——小白入门必备 2301_82243710 程序员前端 css
12.如何实现一个使用非标准字体的网页设计？使用@font-face并为不同的font-weight定义font-family。13.解释浏览器如何确定哪些元素与CSS选择器匹配。这部分与上面关于编写高效的CSS有关。浏览器从最右边的选择器（关键选择器）根据关键选择器，浏览器从DOM中筛选出元素，然后向上遍历被选元素的父元素，判断是否匹配。选择器匹配语句链越短，浏览器的匹配速度越快。例如，对于形如
前端基础面试题·第三篇——JavaScript（其四） DT—— 前端面试 javascript 前端开发语言
highlight:atom-one-dark1.JSON.stringifyJSON.stringify()方法将一个JavaScript值（对象或者数组）转换为一个JSON字符串，如果指定了一个replacer函数，则可以替换值。语法：JSON.stringify(value,replacer,space)参数value：要转换的值。replacer：替换值，可以是一个函数或者数组。（这个参数
前端基础面试题·第二篇——CSS（其一） DT—— 前端面试前端 css
1.伪类与伪元素伪类，是用来描述元素的一个状态，比如第一个元素，元素被鼠标覆盖等等状态，写法为：伪元素，用于设置一个元素的特殊状态的一部分，写法为::伪元素于伪类：伪元素：::before::after::first-line伪类：:hover:active:focus:nth-child(n)2.单位px:像素，绝对单位em:相对单位，相对于父元素字体大小rem:相对单位，相对于根元素html的
前端基础面试题·第二篇——CSS（其二） DT—— 前端面试前端 css
1.CSS选择器的优先性：！important-强制生效样式-有即生效行内样式-有即生效权重：1000id选择器权重：100类选择器，伪类，属性选择器权重：10元素选择器，伪元素选择器，权重：1通配符，兄弟，后代，子代，权重：02.CSS继承性1.继承属性：1.字体系列属性font,font-family,font-weight,font-size,font-style,font-variant等
AJAX实时表单验证系统三年九班蓝同学
本文还有配套的精品资源，点击获取简介：在网页开发中，"ajax验证表单"是一项关键任务，确保数据符合格式和规则，提升数据质量和用户体验。本应用通过使用JavaScript和XMLHttpRequest对象实现后台验证，无需页面刷新。它包括前端验证、事件处理、Ajax调用、服务器端处理、响应处理、用户体验和安全性等关键步骤，以jQuery库简化开发流程，创建高效、安全的表单验证系统。1.表单验证的重
基于Spring Boot构建一个点餐系统鹿屿二向箔 spring boot 后端 java
基于SpringBoot构建一个点餐系统是一个很好的学习机会，可以帮助你掌握如何使用SpringBoot框架来开发一个完整的Web应用程序。下面是一个简化的示例，展示了如何构建一个基本的点餐系统。1.创建SpringBoot项目首先，你需要创建一个新的SpringBoot项目。可以使用SpringInitializr来快速生成基础项目：项目类型：MavenProject依赖项：SpringWeb,
Java SE 6 新特性: XML API 与 Web 服务 love_baobao Java基础类 xml java web api 框架 import
JavaSE6做为一个开发平台，针对不同的应用开发需求，提供了各种各样的技术框架。XML处理框架是JDK6的重要组成部分之一。它为应用程序开发人员提供了一个统一的XML处理API。这种框架结构有两个作用：一方面，开发人员透过这些框架，可以透明的替换不同厂商提供的XML处理服务；另一方面，服务提供商可以透过这些框架，将自己的产品插入到JDK中。这种框架一般被称为ServiceProvider机制。J
【漏洞挖掘】——53、 WebSocket安全概览 FLy_鹏程万里【WEB渗透】websocket 安全网络协议渗透测试信息安全网络安全 web渗透
文章前言在一次做项目的时候本来是想去点击Burpsuite的Proxy界面的HTTPHistory选项卡来查看HTTP历史请求记录信息并做测试的，但是在查看的时候却下意识的点击到了HTTPProxy右侧的"WebSocketsHistory"选项卡中，从界面的交互历史中发现网站有使用WebSocket进行通信，虽然之前有对Websocket有一些简单的了解(比如:跨越问题)，但是未对此进行深入研究
关于旗正规则引擎规则中的上传和下载问题何必如此文件下载压缩 jsp 文件上传
文件的上传下载都是数据流的输入输出，大致流程都是一样的。一、文件打包下载 1.文件写入压缩包 string mainPath="D:\upload\"; 下载路径 string tmpfileName=jar.zip; &n
【Spark九十九】Spark Streaming的batch interval时间内的数据流转源码分析 bit1129 Stream
以如下代码为例（SocketInputDStream）： Spark Streaming从Socket读取数据的代码是在SocketReceiver的receive方法中，撇开异常情况不谈(Receiver有重连机制，restart方法，默认情况下在Receiver挂了之后，间隔两秒钟重新建立Socket连接)，读取到的数据通过调用store(textRead)方法进行存储。数据
spark master web ui 端口8080被占用解决方法 daizj 8080 端口占用 spark master web ui
spark master web ui 默认端口为8080，当系统有其它程序也在使用该接口时，启动master时也不会报错，spark自己会改用其它端口，自动端口号加1，但为了可以控制到指定的端口，我们可以自行设置，修改方法： 1、cd SPARK_HOME/sbin 2、vi start-master.sh 3、定位到下面部分
oracle_执行计划_谓词信息和数据获取周凡杨 oracle 执行计划
oracle_执行计划_谓词信息和数据获取(上) 一：简要说明在查看执行计划的信息中，经常会看到两个谓词filter和access，它们的区别是什么，理解了这两个词对我们解读Oracle的执行计划信息会有所帮助。简单说，执行计划如果显示是access，就表示这个谓词条件的值将会影响数据的访问路径（表还是索引），而filter表示谓词条件的值并不会影响数据访问路径，只起到
spring中datasource配置 g21121 dataSource
datasource配置有很多种，我介绍的一种是采用c3p0的，它的百科地址是： http://baike.baidu.com/view/920062.htm  <bean name="propertiesConfig" class="org.springframework.b
web报表工具FineReport使用中遇到的常见报错及解决办法（三）老A不折腾 finereport FAQ 报表软件
这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。 1、repeated column width is largerthan paper width：这个看这段话应该是很好理解的。比如做的模板页面宽度只能放
mysql 用户管理墙头上一根草 linux mysql user
1.新建用户 //登录MYSQL@>mysql -u root -p@>密码//创建用户mysql> insert into mysql.user(Host,User,Password) values(‘localhost’,'jeecn’,password(‘jeecn’));//刷新系统权限表mysql>flush privileges;这样就创建了一个名为：
关于使用Spring导致c3p0数据库死锁问题 aijuans spring Spring 入门 Spring 实例 Spring3 Spring 教程
这个问题我实在是为整个 springsource 的员工蒙羞如果大家使用 spring 控制事务，使用 Open Session In View 模式， com.mchange.v2.resourcepool.TimeoutException: A client timed out while waiting to acquire a resource from com.mchange.
百度词库联想 annan211 百度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>RunJS</title&g
int数据与byte之间的相互转换实现代码百合不是茶位移 int转byte byte转int 基本数据类型的实现
在BMP文件和文件压缩时需要用到的int与byte转换,现将理解的贴出来; 主要是要理解;位移等概念 http://baihe747.iteye.com/blog/2078029 int转byte; byte转int; /** * 字节转成int,int转成字节 * @author Administrator *
简单模拟实现数据库连接池 bijian1013 java thread java多线程简单模拟实现数据库连接池
简单模拟实现数据库连接池实例1： package com.bijian.thread; public class DB { //private static final int MAX_COUNT = 10; private static final DB instance = new DB(); private int count = 0; private i
一种基于Weblogic容器的鉴权设计 bijian1013 java weblogic
服务器对请求的鉴权可以在请求头中加Authorization之类的key，将用户名、密码保存到此key对应的value中，当然对于用户名、密码这种高机密的信息，应该对其进行加砂加密等，最简单的方法如下： String vuser_id = "weblogic"; String vuse
【RPC框架Hessian二】Hessian 对象序列化和反序列化 bit1129 hessian
任何一个对象从一个JVM传输到另一个JVM，都要经过序列化为二进制数据(或者字符串等其他格式，比如JSON)，然后在反序列化为Java对象，这最后都是通过二进制的数据在不同的JVM之间传输(一般是通过Socket和二进制的数据传输)，本文定义一个比较符合工作中。 1. 定义三个POJO Person类 package com.tom.hes
【Hadoop十四】Hadoop提供的脚本的功能 bit1129 hadoop
1. hadoop-daemon.sh 1.1 启动HDFS ./hadoop-daemon.sh start namenode ./hadoop-daemon.sh start datanode 通过这种逐步启动的方式，比start-all.sh方式少了一个SecondaryNameNode进程，这不影响Hadoop的使用，其实在 Hadoop2.0中，SecondaryNa
中国互联网走在“灰度”上 ronin47 管理灰度
中国互联网走在“灰度”上（转）文/孕峰第一次听说灰度这个词，是任正非说新型管理者所需要的素质。第二次听说是来自马化腾。似乎其他人包括马云也用不同的语言说过类似的意思。灰度这个词所包含的意义和视野是广远的。要理解这个词，可能同样要用“灰度”的心态。灰度的反面，是规规矩矩，清清楚楚，泾渭分明，严谨条理，是决不妥协，不转弯，认死理。黑白分明不是灰度，像彩虹那样
java-51-输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。 bylijinnan java
public class PrintMatrixClockwisely { /** * Q51.输入一个矩阵，按照从外向里以顺时针的顺序依次打印出每一个数字。例如：如果输入如下矩阵： 1 2 3 4 5 6 7 8 9
mongoDB 用户管理开窍的石头 mongoDB用户管理
1:添加用户第一次设置用户需要进入admin数据库下设置超级用户（use admin） db.addUsr({user:'useName',pwd:'111111',roles:[readWrite,dbAdmin]}); 第一个参数用户的名字第二个参数
[游戏与生活]玩暗黑破坏神3的一些问题 comsci 生活
暗黑破坏神3是有史以来最让人激动的游戏。。。。但是有几个问题需要我们注意玩这个游戏的时间，每天不要超过一个小时，且每次玩游戏最好在白天结束游戏之后，最好在太阳下面来晒一下身上的暗黑气息，让自己恢复人的生气 &nb
java 二维数组如何存入数据库 cuiyadll java
using System; using System.Linq; using System.Text; using System.Windows.Forms; using System.Xml; using System.Xml.Serialization; using System.IO; namespace WindowsFormsApplication1 {
本地事务和全局事务Local Transaction and Global Transaction(JTA) darrenzhu java spring local global transaction
Configuring Spring and JTA without full Java EE http://spring.io/blog/2011/08/15/configuring-spring-and-jta-without-full-java-ee/ Spring doc -Transaction Management http://docs.spring.io/spri
Linux命令之alias - 设置命令的别名，让 Linux 命令更简练 dcj3sjt126com linux alias
用途说明设置命令的别名。在linux系统中如果命令太长又不符合用户的习惯，那么我们可以为它指定一个别名。虽然可以为命令建立“链接”解决长文件名的问题，但对于带命令行参数的命令，链接就无能为力了。而指定别名则可以解决此类所有问题【1】。常用别名来简化ssh登录【见示例三】，使长命令变短，使常用的长命令行变短，强制执行命令时询问等。常用参数格式：alias 格式：ali
yii2 restful web服务[格式响应] dcj3sjt126com PHP yii2
响应格式当处理一个 RESTful API 请求时，一个应用程序通常需要如下步骤来处理响应格式：确定可能影响响应格式的各种因素，例如媒介类型，语言，版本，等等。这个过程也被称为 content negotiation。资源对象转换为数组，如在 Resources 部分中所描述的。通过 [[yii\rest\Serializer]]
MongoDB索引调优（2）——[十] eksliang mongodb MongoDB索引优化
转载请出自出处：http://eksliang.iteye.com/blog/2178555 一、概述上一篇文档中也说明了，MongoDB的索引几乎与关系型数据库的索引一模一样，优化关系型数据库的技巧通用适合MongoDB，所有这里只讲MongoDB需要注意的地方二、索引内嵌文档可以在嵌套文档的键上建立索引，方式与正常
当滑动到顶部和底部时，实现Item的分离效果的ListView gundumw100 android
拉动ListView，Item之间的间距会变大，释放后恢复原样； package cn.tangdada.tangbang.widget; import android.annotation.TargetApi; import android.content.Context; import android.content.res.TypedArray; import andr
程序员用HTML5制作的爱心树表白动画 ini JavaScript jquery Web html5 css
体验效果：http://keleyi.com/keleyi/phtml/html5/31.htmHTML代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="UTF-8" > <ti
预装windows 8 系统GPT模式的ThinkPad T440改装64位 windows 7旗舰版 kakajw ThinkPad 预装改装 windows 7 windows 8
该教程具有普遍参考性，特别适用于联想的机器，其他品牌机器的处理过程也大同小异。该教程是个人多次尝试和总结的结果，实用性强，推荐给需要的人！缘由小弟最近入手笔记本ThinkPad T440，但是特别不能习惯笔记本出厂预装的Windows 8系统，而且厂商自作聪明地预装了一堆没用的应用软件，消耗不少的系统资源（本本的内存为4G，系统启动完成时，物理内存占用比
Nginx学习笔记 mcj8089 nginx
一、安装nginx 1、在nginx官方网站下载一个包，下载地址是： http://nginx.org/download/nginx-1.4.2.tar.gz 2、WinSCP(ftp上传工
mongodb 聚合查询每天论坛链接点击次数 qiaolevip 每天进步一点点学习永无止境 mongodb 纵观千象
/* 18 */ { "_id" : ObjectId("5596414cbe4d73a327e50274"), "msgType" : "text", "sendTime" : ISODate("2015-07-03T08:01:16.000Z"
java术语（PO/POJO/VO/BO/DAO/DTO） Luob. DAO POJO DTO po VO BO
PO(persistant object) 持久对象在o/r 映射的时候出现的概念,如果没有o/r映射,就没有这个概念存在了.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数据库的操作. VO(value object) 值对象通
算法复杂度 Wuaner Algorithm
Time Complexity & Big-O： http://stackoverflow.com/questions/487258/plain-english-explanation-of-big-o http://bigocheatsheet.com/ http://www.sitepoint.com/time-complexity-algorithms/

webRTC- LearningWebRTC-读书笔记

文章目录

前言

前提

推荐阅读

总结

1. 开启WebRTC之旅

在WebRTC平台传输音频和视频

WebRTC的应用

2. 获取用户媒体

配置静态服务器

媒体流页面

注意

媒体流的方法- getUserMedia API

API处理方法

限制视频捕捉

推荐阅读

应用实例

多设备处理

创建一个拍照

修改媒体流

3. 创建简单的WebRTC应用

本章内容

理解UDP传输协议和实时传输

WebRTC API

RTCPeerConnection对象

信号传递和交涉

会话描述协议-SDP

清晰的路线到用户

STUN

TURN

ICE

WebRTC应用

RTCPeerConnection

index.html

main.js

执行状态流程图

捕获用户的摄像头

RTCPeerConnection对象

建立SDP Offer和返回

寻找ICE候选路径

加入流和打磨

增加css样式

代码总结

4. 创建信令服务器

涵盖内容

构建信令服务器

WebSockets

server.js

识别用户

存储对象

login登录

发起通话

呼叫应答

处理ICE候选路径

呼叫挂断

完整的信令服务器

websocket困境

代替技术 - XMPP, SIP

5. 连接客户端

涵盖内容

连接

创建页面

index.html

获取一个连接

登录

开始对等连接

发起通话

检测通信

挂断电话

总结

6. WebRTC发送数据

涵盖内容给

流控制传输协议和数据传输

RTCDataChannel对象

ondatachannel事件

数据通道选项 - dataChannelOptions对象

发送数据

加密安全

添加文字聊天

理解`UDP`传输协议和实时传输

`STUN`

`TURN`

`ICE`

`RTCPeerConnection`

`index.html`

`main.js`

`RTCPeerConnection`对象

建立`SDP Offer`和返回

寻找`ICE`候选路径

增加`css`样式

`WebSockets`

`server.js`

`login`登录

处理`ICE`候选路径

`websocket`困境

代替技术 - `XMPP, SIP`

`index.html`

6. `WebRTC`发送数据

`RTCDataChannel`对象

`ondatachannel`事件

数据通道选项 - `dataChannelOptions`对象

`index.html`

`main.js`

使用文件`API`拾取文件

`index.html`

`OAuth`提供器