打电话
P2P视频通过WebRTC进行调用,以融入Delta Chat客户端.
如何运作
以下是Delta Chat如何与这个应用程序合作的序列图. 如果你看到一个字组而不是一个图表,请去 这里。 。 。 .
sequenceDiagram
participant Alice as Alice's Delta Chat
participant ATURN as Alice's TURN / STUN servers
participant BTURN as Bob's TURN / STUN servers<br> (could be the same as Alice's)
participant Bob as Bob's Delta Chat
Note over Alice: Alice presses<br>"Start Call with Bob"
Alice ->> ATURN: What's my public address?
Alice ->> ATURN: Please relay my packets
ATURN -->> Alice: Your address is<br>42.42.42.42:12345<br>(srflx candidate gathered)
ATURN -->> Alice: I will relay your packets<br>(TURN (relay) candidate<br>gathered)
Note over Alice: Wait for relay candidate<br>or for timeout
Alice ->> Bob: (email) I want to start a call. My address is 42.42.42.42:12345,<br>or you can reach me at my TURN server.<br>(WebRTC offer)
Note over Bob: Bob presses "Accept Call"
Bob ->> BTURN: What's my public address?
Bob ->> BTURN: Please relay my packets
ATURN ->> Alice: BTW your other address is<br>42.42.42.43:54321
BTURN -->> Bob: Your address is<br>43.43.43.43:55555<br>(srflx candidate gathered)
BTURN -->> Bob: I will relay your packets<br>(TURN (relay) candidate<br>gathered)
Note over Bob: Wait for relay candidate<br>or for timeout
Bob ->> Alice: (email) Sure, let's have a call. My address is 43.43.43.43:55555,<br>or you can reach me at my TURN server.<br>(WebRTC answer)
loop
Alice <<-->> Bob: P2P video stream (if possible)
Alice <<->> ATURN: relayed video stream<br>(if P2P not possible)
ATURN <<->> BTURN: relayed video stream<br>(if P2P not possible)
BTURN <<->> Bob: relayed video stream<br>(if P2P not possible)
end
BTURN ->> Bob: BTW your other address is<br>43.43.43.43:55556
loop An additional WebRTC data channel can be established (via relay or P2P)<br>to promote more ICE candidates after the initial connection is established
Alice ->> Bob: My other address is 42.42.42.43:54321
Bob ->> Alice: My other address is 43.43.43.43:55556
end
整合
要融入您的 Delta 聊天客户端, 您需要提供
window.calls 下列 API 对象 :
startCall: (offerPayload: string) => void(执行必须调用dc_place_outgoing_call聊天邮件核心 API)acceptCall: (answerPayload: string) => void(执行必须调用dc_accept_incoming_call聊天邮件核心 API)endCall: () => void(执行必须调用dc_end_call聊天邮件核心 API)getIceServers: () => string | Promise<string>(返回 JSON 字符串,并按预期设置冰上服务器配置) https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setConfuguation 互联网档案馆的存檔,存档日期2013-12-22(中文(简体) )getAvatar: () => string(返回聊天的外观图像 URL;可以是普通的URL或数据-URL,前."data:image/png;base64,..."(中文(简体) )
通过 URL 散列给予应用程序命令 :
#startCall: 告诉应用程序生成要约有效载荷并呼叫startCall(),这就是当用户开始发出一个调用时应用程序应该如何打开.#offerIncomingCall=PAYLOAD:告诉应用程序显示"来电". 回答吗? 屏幕 然后,如果用户点击"Answer",则生成一个WebRTC对所提供的报价的回答PAYLOAD电话window.calls.acceptCall(webrtcAnswer)。如果用户拒绝调用,应用程序将引用window.calls.endCall。 。 。 .#acceptCall=PAYLOAD: 与#offerIncomingCall,但并没有显示"来电。 回答,”然后自动并立即接受电话.#onAnswer=PAYLOAD:通知应用程序,发出呼叫被接受,并提供应答有效载荷
关键是: PAYLOAD 必须 被 Base64 编码( NOTE: 您可能还需要 URL- encode 该 base64 字符串才能成为有效的 URL 散列) , 然后再将其传递到 URL 散列中的应用 .
为了在音频模式下启动应用程序,
提供 noOutgoingVideoInitially 在查询(搜索)字符串中
初始URL,例如:. /index.html?noOutgoingVideoInitially#startCall。 。 。 .
为了完全禁用进出视频,
提供 disableVideoCompletely 在 URL 查询字符串中.
见 https://github.com/deltachat/calls-webapp/issues/31 互联网档案馆的存檔,存档日期2013-12-02。 。 。 .
捐款
安装依赖关系
复制后, 安装依赖性 :
pnpm i
正在检查代码格式
pnpm check
在浏览器中测试应用程序
开发时要在浏览器中测试您的工作 :
pnpm start
在两个单独的分页中打开模拟实例(模拟器中实例上的"共享"按钮).
然后添加 #startCall 到一个实例的 URL 结尾.
在Safari上的macOS上,您可能无法同时给相机两个分页的访问权限;在这种情况下,尝试Firefox.
大楼
要构建用于释放的应用程序:
pnpm build
在 Delta Chat 中以开发工具包装应用程序以调试 NODE_ENV
用于“ 调试” 的环境变量 :
NODE_ENV=debug pnpm build
由此产生的优化 .html 文件保存于 dist/ 文件夹.
释放
自动创建并创建新的 GitHub 版本 .html 文件 :
git tag -a v1.0.1
git push origin v1.0.1
贷项
灵感来自 无服务器 WebRTC 但从零开始建造 简单得多: 没有支持数据通道、文件传输和仅支持浏览器.
请参看博客文章