DataChannel · PHP/Python/前端/Linux 等等学习笔记

[TOC] ## code <details> <summary>index.html</summary> ``` <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Title</title> <style> </style> </head> <body> <div> <button id="start">start</button> <button id="send">send</button> <button id="hangup">hangup</button> </div> <textarea name="" id="send-text" cols="30" rows="10"></textarea> <textarea name="" id="rece-text" cols="30" rows="10"></textarea> <script src="//raw.githubusercontent.com/webrtcHacks/adapter/master/release/adapter.js"></script> <script> // init 'use strict'; /** * * @type RTCPeerConnection */ let pc1 = null; /** * @type RTCPeerConnection */ let pc2 = null; /** * @type HTMLTextAreaElement */ let sendText = null; /** * @type HTMLTextAreaElement */ let receText = null; /** * @type RTCDataChannel */ let sendDataChannel=null; /** * @type RTCDataChannel */ let receDataChannel=null; let btn_start; let btn_send; let btn_hangup; btn_start=document.querySelector("#start") btn_start.addEventListener("click",start) btn_send=document.querySelector("#send") btn_send.addEventListener("click",send) btn_send.disabled=true btn_hangup=document.querySelector("#hangup") btn_hangup.addEventListener("click",hangup) btn_hangup.disabled=true sendText=document.querySelector("#send-text") receText=document.querySelector("#rece-text") async function start() { btn_start.disabled=true btn_send.disabled=false btn_hangup.disabled=false pc1 = new RTCPeerConnection(); pc1.onicecandidate=handle_icecandidate.bind(pc1) pc2 = new RTCPeerConnection() pc2.onicecandidate=handle_icecandidate.bind(pc2) pc2.ondatachannel=handle_datachannel sendDataChannel = pc1.createDataChannel("my channel"); sendDataChannel.onmessage = (event)=> {console.log("received: " + event.data);}; sendDataChannel.onopen = ()=> {console.log("datachannel open");}; sendDataChannel.onclose = ()=> {console.log("datachannel close");}; // 创建 offer const offer = await pc1.createOffer() createSession(offer,pc1,pc2) // 创建 answer let answer = await pc2.createAnswer(); createSession(answer,pc2,pc1) } async function send() { sendDataChannel.send(sendText.value) sendText.value='' } // help function handle_datachannel(e) { receDataChannel = e.channel; receDataChannel.onopen=e=>{console.log(e);} receDataChannel.onclose=e=>{console.log(e);} receDataChannel.onerror=e=>{console.log(e);} receDataChannel.onmessage=e=>{ receText.value+=e.data+"\n" } } function handle_icecandidate(e) { if (e.candidate){ getOtherPc(this).addIceCandidate(e.candidate).catch(err=>{ console.log(err); }) } } function createSession(session,pc_1,pc_2){ pc_1.setLocalDescription(session).catch(e=>{ console.log(e); }) pc_2.setRemoteDescription(session).catch(e=>{ console.log(e); }) } function getOtherPc(pc){ return (pc===pc1)?pc2:pc1; } function getPcName(pc){ return (pc===pc1)?"pc1":"pc1"; } function hangup() { btn_start.disabled=false btn_send.disabled=true btn_hangup.disabled=true pc1.close() pc2.close() pc1 = null; pc2 = null; } </script> </body> </html> ``` </details> <br/> 效果 ![](https://img.kancloud.cn/32/82/3282f85a759839464ed67a0efddf1c68_481x195.png)