Python 使用 HTML5 websockets 实现基于网络的实时视频聊天

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4220672/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-18 14:49:19  来源:igfitidea点击:

Implementing webbased real time video chat using HTML5 websockets

pythonvideohtmlaudiowebsocket

提问by Wouter Dorgelo

Does anyone know how to implement voice/video over IP in a webapplication using HTML5 websockets?

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

It would be nice if I could implement this with PHP or Python since I (unfortunately) don't know any other programming language at the moment.

如果我能用 PHP 或 Python 来实现它会很好,因为我(不幸的是)目前不知道任何其他编程语言。

A good tutorial will do, as well as an already-build-solution which I have to pay for.

一个好的教程,以及一个我必须付费的已经构建的解决方案就行了。

Update1:
Added video because it's not only audio/voip related.

更新 1:
添加视频,因为它不仅与音频/语音相关。

Update2:
First HTML5 Video Conference App is already created. See my own answer

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

采纳答案by Jerome WAGNER

If you want to go with HTML5 only, you will need a browser implementing the HTML Media Capturedraft (available here) in order to access the raw data from the microphone.

如果您只想使用 HTML5,您将需要一个实现HTML 媒体捕获草案(可在此处获得)的浏览器,以便从麦克风访问原始数据。

Once you have this data in hand, you need to send it over the network. Websockets would be the HTML5 option to have fast enough round trips with the server (sending local audio data and receiving remote audio data at the same time)

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

Since you mention python, I would recommend looking around the twisted implementationof websockets.

既然你提到了 python,我建议你看看websockets的扭曲实现

You can have all your clients "register" on the websocket server with a callerID, so the server knows where to find a given callerID.

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

Then your server will need an "invite" API where caller1 "invites" caller2.

然后您的服务器将需要一个“邀请”API,调用者1“邀请”调用者2。

Once the call is setup and each client starts sending its audio data, the server will be able to send this audio data to the other party.

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

Upon receiving audio data, the browser will need to play this audio data on the speakers, probably using the HTML5 audiotag.

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

To do this, you may be forced to use a "trick" : instead of having the websocket server forward the raw audio data to the client, you may need to simulate 2 "infinite" files :

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

  1. caller1.wav : sound captured on caller1 mic
  2. caller2.wav : sound captured on caller2 mic
  1. caller1.wav : 在 caller1 麦克风上捕获的声音
  2. caller2.wav : 在 caller2 麦克风上捕获的声音

caller1 browser would add caller2.wav in the audio.src attribute once the call is setup (caller1 would be informed of this event via websocket) and hopefully if the python server appends the raw audio data to the caller2.wav as it receives it, it would start playing.

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

This sounds like a cool prototype you're going to hack up !

这听起来像一个很酷的原型,你要破解!

Good luck on your journey,

祝你好运,

Jerome Wagner

杰罗姆·瓦格纳

回答by Wouter Dorgelo

Seems like Ericsson created the first HTML5 Video Conference App.

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

The technique they used:

他们使用的技术:

  • Implemented the device element and the Stream API (device element GUI is currently written in JavaScript/CSS)
  • Added MediaStreamManager to map Stream URLs to the corresponding pipeline in the media backend
  • Added MediaStreamTransceiver to control the related media processing and transport
  • Added support for binary data in the WebSocket protocol
  • 实现了设备元素和流 API(设备元素 GUI 目前是用 JavaScript/CSS 编写的)
  • 添加了 MediaStreamManager 以将 Stream URL 映射到媒体后端中的相应管道
  • 增加了 MediaStreamTransceiver 来控制相关的媒体处理和传输
  • 在 WebSocket 协议中添加了对二进制数据的支持


See: labs.ericsson.com:

请参阅:labs.ericsson.com



Video on YouTube: Beyond HTML5: Conversational Voice and Video demo | Ericsson Labs

YouTube 上的视频:超越 HTML5:对话式语音和视频演示 | 爱立信实验室

Unfortunately Ericsson doesn't want to share device_dialog.js(yet).

不幸的是,爱立信还不想分享device_dialog.js

回答by Mars Robertson

WebRTC might be an answer: http://www.webrtc.org/running-the-demos(currently only Chrome Canary with MediaStream flag enabled)

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

See demo: https://apprtc.appspot.com(make sure you watch in a proper browser) and code http://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/

请参阅演示:https: //apprtc.appspot.com(确保您在正确的浏览器中观看)和代码http://code.google.com/p/webrtc-samples/source/browse/trunk/apprtc/



The reason I'm writing is... I got really cheap Android tablet and cannot intall Skype nor Vtok nor Google Voice is available outside the US. I need to find HTML5 based solution as I'm able to run Opera Mobile 12 and got http://html5demos.com/working properly

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

回答by Cody

@work/gotta be quick

@工作/必须快点

Check out the javaScript getUserMedia(CanIUse) - API(W3)

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

回答by saurshaz

webrtc is the answer now.

webrtc 现在就是答案。

for node.js stack - you can look at http://www.easyrtc.com/. Note that IE has not yet built support for the APIs that make webrtc work.

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