WebRTC学习（十）非音视频数据传输

在前面的学习中，我们传输的数据都是音视频数据，实际上webrtc是一个强大的库，不只可以处理这些音视频数据，还可以处理非音视频数据！比如端对端的聊天，文件的传输（二进制传输也可以），网络的加速...

（一）createDataChannel API基本格式

WebRTC学习（十）非音视频数据传输

（二）Option选项

WebRTC学习（十）非音视频数据传输

ordered：传输非音视频数据的时候，数据包是不是按序到达。webrtc在传输音视频数据的时候，使用的RTP协议是基于UDP的，而UDP本身是不保证可达和按序。webrtc在上层中实现了这两个功能
maxPacketLifeTime/maxRetransmits:包存活时间和传输次数（包丢失后，重传次数），两者不相容
negotiated:协商，在创建DataChannel的时候进行协商
id:用于协商时使用的id，标识同一个通道

Options使用案例：

WebRTC学习（十）非音视频数据传输

（三）DataChannel事件

WebRTC学习（十）非音视频数据传输

onmessage:当对端有数据到达，会触发事件
onopen:当创建好dataChannel后，就会触发该事件
onclose:当dataChannel关闭时触发
onerror:当dataChannel出错时触发

（四）创建RTCDataChannel案例

WebRTC学习（十）非音视频数据传输

（五）非音视频数据传输方式

WebRTC学习（十）非音视频数据传输

补充：SCTP是流控stream control transport，是UDP的上层协议。流控应用，比如拥塞控制

二：实现端到端文本聊天

（一）代码实现

<html>
    <head>
        <title>    WebRTC PeerConnection </title>
        <link href="./css/main.css" rel="stylesheet" />
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.0.3/socket.io.js"></script>
    </head>
    <body>
        <div>
            <button id=connserver>ConnSignal</button>
            <button id="leave" disabled>Leave</button>
        </div>
        <div>
            <label>BandWidth:</label>
            <select id="bandwidth" disabled>    <!--带宽限制-->
                <option value="unlimited" selected>unlimited</option>
                <option value="125">125</option>
                <option value="250">250</option>
                <option value="500">500</option>
                <option value="1000">1000</option>
                <option value="2000">2000</option>
            </select>
            kbps
        </div>
        <div id="preview">
            <div>
                <h2>Local:</h2>
                <video autoplay playsinline id="localvideo"></video>
            </div>
            <div>
                <h2>Remote:</h2>
                <video autoplay playsinline id="remotevideo"></video>
            </div>
        </div>
        <!--端到端文本聊天-->
        <div>
            <h2>Chat:</h2>
            <textarea id="chat" disabled></textarea>
            <textarea id="sendtext" disabled></textarea>
            <button id="send" disabled>Send</button>
        </div>
        
        <div class="graph-container" id="bitrateGraph">
            <div>Bitrate</div>
            <canvas id="bitrateCanvas"></canvas>
        </div>
        <div class="graph-container" id="packetGraph">
            <div>Packets sent per second</div>
            <canvas id="packetCanvas"></canvas>
        </div>        
    </body>
    <script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
    <script type="text/javascript" src="./js/main4.js"></script>
    <script type="text/javascript" src="./js/third_party/graph.js"></script>
</html>

index4,html