使用 HTML5 websockets 实现基于 web 的实时视频聊天

Posted 2023-02-23

【中文标题】使用 HTML5 websockets 实现基于 web 的实时视频聊天

【英文标题】：Implementing webbased real time video chat using HTML5 websockets

【发布时间】：2011-05-12 08:43:55

【问题描述】：

有谁知道如何使用 html5 websockets 在 web 应用程序中通过 IP 实现语音/视频？

如果我可以用 php 或 Python 来实现它会很好，因为我（很遗憾）目前不知道任何其他编程语言。

一个好的教程就可以了，还有一个我必须付费的已经构建的解决方案。

更新 1：添加了视频，因为它不仅与音频/voip 相关。

更新 2：第一个 HTML5 视频会议应用程序已经创建。查看我自己的答案

【问题讨论】：

您打算在开源许可下发布它吗？我敢打赌，一旦你得到它的大部分工作，如果你这样做了，你可以利用大量的社区帮助。

是的，就是这样 :-) 我必须先做一些研究和计划。之后，我将通过进一步的通知更新此问题。

getUserMedia() 是这里的关键。

视频建议：twilio.com/docs/api/video 和 voip：twilio.com/docs/api/client

【参考方案1】：

webrtc 现在是答案。

对于 node.js 堆栈 - 你可以查看 http://www.easyrtc.com/ 。请注意，IE 尚未构建对使 webrtc 工作的 API 的支持。

【参考方案2】：

@work/得快点

查看 javascript getUserMedia(CanIUse) - API (W3)

【参考方案3】：

WebRTC 可能是一个答案：http://www.webrtc.org/running-the-demos （目前只有启用了 MediaStream 标志的 Chrome Canary）

查看演示：https://apprtc.appspot.com（确保您在正确的浏览器中观看）和代码http://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/

---

我写这篇文章的原因是……我买了非常便宜的 android 平板电脑，并且无法在美国以外安装 Skype、Vtok 和 Google Voice。我需要找到基于 HTML5 的解决方案，因为我能够运行 Opera Mobile 12 并让 http://html5demos.com/ 正常工作

【参考方案4】：

似乎爱立信创建了第一个 HTML5 视频会议应用程序。

他们使用的技术：

实现了设备元素和 Stream API（设备元素 GUI 目前是用 JavaScript/CSS 编写的） 添加了 MediaStreamManager 以将 Stream URL 映射到媒体后端中的相应管道 添加了 MediaStreamTransceiver 来控制相关的媒体处理和传输 在 WebSocket 协议中添加了对二进制数据的支持

---

见：labs.ericsson.com：

---

YouTube 上的视频：Beyond HTML5: Conversational Voice and Video demo | Ericsson Labs

不幸的是，爱立信不想分享device_dialog.js（还）。

【讨论】：

问题是爱立信演示仅适用于他们“计划”发布的修补过的 webkit。您也可以使用 flash 来执行此操作，但仍将其称为 html5 ;-)

非常正确，这就是为什么我们要自己构建它，我们的方式:-)

【参考方案5】：

如果您只想使用 HTML5，则需要一个实现 HTML 媒体捕获 草稿（here 可用）的浏览器，以便从麦克风访问原始数据。

一旦您掌握了这些数据，您就需要通过网络发送它。 Websockets 将是 HTML5 选项，可以与服务器进行足够快的往返（同时发送本地音频数据和接收远程音频数据）

既然你提到了python，我建议你看看websockets的twisted implementation。

您可以让您的所有客户端使用 callerID 在 websocket 服务器上“注册”，这样服务器就知道在哪里可以找到给定的 callerID。

那么您的服务器将需要一个“邀请”API，调用者1“邀请”调用者2。

一旦建立呼叫并且每个客户端开始发送其音频数据，服务器将能够将此音频数据发送给另一方。

在接收到音频数据后，浏览器需要在扬声器上播放此音频数据，可能使用 HTML5 音频标签。

为此，您可能不得不使用“技巧”：您可能需要模拟 2 个“无限”文件，而不是让 websocket 服务器将原始音频数据转发给客户端：

caller1.wav : 在 caller1 麦克风上捕获的声音 caller2.wav：在 caller2 麦克风上捕获的声音

一旦调用建立，caller1 浏览器将在 audio.src 属性中添加 caller2.wav（caller1 将通过 websocket 获知此事件），并且希望如果 python 服务器将原始音频数据附加到 caller2.wav收到它，它会开始播放。

这听起来像是一个很酷的原型，你要破解！

祝你旅途愉快，

杰罗姆·瓦格纳

【讨论】：

非常感谢！似乎还有一个 HTML5 视频标签，所以我也可以添加流视频。关于一个问题：you may be forced to use a "trick"。你能解释一下原因吗？

“技巧”，因为 1/ 我不确定是否有 API 可以播放原始音频数据，因此您需要使用音频标签 2/ 我认为如果您创建，质量会很差每个原始数据块有 1 个音频标签，因此您需要诱使浏览器认为只有 1 个音频文件。如果您有工作，请随时通知我！

嘿杰罗姆，感谢您的出色贡献 :-) 非常感谢！我打算把它变成一个开源项目。首先，我将从计划和通常的东西开始。如果您对其进展感兴趣，请不时访问此问题。我将在此处发布更新。

嗨，我也在研究这个，你有没有运气让它工作？

@JeromeWAGNER，为了改善延迟，我们如何实现它，使视频直接从客户端 A 流式传输到客户端 B，而不是让服务器作为中介？