使用 HTML5 或 Javascript 的 P2P 视频会议
Posted
技术标签:
【中文标题】使用 HTML5 或 Javascript 的 P2P 视频会议【英文标题】：P2P Video Confrencing using HTML5 or Javascript 【发布时间】：2013-07-07 02:54:55 【问题描述】：我正在尝试使用 html5 和 javascript 构建视频会议，直到现在我能够流式传输我的相机捕获并将其显示在画布上
这里是代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<style>
nav .search
display: none;
.demoFrame header,
.demoFrame .footer,
.demoFrame h1,
.demoFrame .p
display: none !important;
h1
font-size: 2.6em;
h2, h3
font-size: 1.7em;
.left
width: 920px !important;
padding-bottom: 40px;
min-height: auto !important;
padding-right: 0;
float: left;
div.p
font-size: .8em;
font-family: arial;
margin-top: -20px;
font-style: italic;
padding: 10px 0;
.footer
padding: 20px;
margin: 20px 0 0 0;
background: #f8f8f8;
font-weight: bold;
font-family: arial;
border-top: 1px solid #ccc;
.left > p:first-of-type
background: #ffd987;
font-style: italic;
padding: 5px 10px;
margin-bottom: 40px;
.demoAds
position: absolute;
top: 0;
right: 0;
width: 270px;
padding: 10px 0 0 10px;
background: #f8f8f8;
.demoAds a
margin: 0 10px 10px 0 !important;
display: inline-block !important;
#promoNode
margin: 20px 0;
@media only screen and (max-width : 1024px)
.left
float: none;
body .one .bsa_it_ad
position: relative !important;
</style> <style>
video border: 1px solid #ccc; display: block; margin: 0 0 20px 0;
#canvas margin-top: 20px; border: 1px solid #ccc; display: block;
</style>
</head>
<body>
<!-- Add the HTML header -->
<div id="page">
<!-- holds content, will be frequently changed -->
<div id="contentHolder">
<!-- start the left section if not the homepage -->
<section class="left">
<!--
Ideally these elements aren't created until it's confirmed that the
client supports video/camera, but for the sake of illustrating the
elements involved, they are created with markup (not JavaScript)
-->
<video id="video" autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" ></canvas>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function()
// Grab elements, create settings, etc.
var canvas = document.getElementById("canvas"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = "video": true, "audio" : true ,
errBack = function(error)
console.log("Video capture error: ", error.code);
;
// Put video listeners into place
if(navigator.getUserMedia) // Standard
navigator.getUserMedia(videoObj, function(stream)
video.src = stream;
video.play();
, errBack);
else if(navigator.webkitGetUserMedia) // WebKit-prefixed
navigator.webkitGetUserMedia(videoObj, function(stream)
video.src = window.webkitURL.createObjectURL(stream);
video.play();
, errBack);
// Trigger photo take
document.getElementById("snap").addEventListener("click", function()
context.drawImage(video, 0, 0, 640, 480);
);
, false);
</script>
</section>
<style>
body .one .bsa_it_ad background: #f8f8f8; border: none; font-family: inherit; width: 200px; position: absolute; top: 0; right: 0; text-align: center; border-radius: 8px;
body .one .bsa_it_ad .bsa_it_i display: block; padding: 0; float: none; margin: 0 0 5px;
body .one .bsa_it_ad .bsa_it_i img padding: 10px; border: none; margin: 0 auto;
body .one .bsa_it_ad .bsa_it_t padding: 6px 0;
body .one .bsa_it_ad .bsa_it_d padding: 0; font-size: 12px; color: #333;
body .one .bsa_it_p display: none;
body #bsap_aplink, body #bsap_aplink:hover display: block; font-size: 10px; margin: 12px 15px 0; text-align: right;
</style>
</div>
</body>
</html>
现在我只想流式传输视频以在两个人之间进行会议，我知道我必须使用 webRTC 或 websocket，但我不知道如何开始为此编写代码。 任何帮助或建议都会非常有帮助。
【问题讨论】：
【参考方案1】：HTML5rocks 对此有很好的教程。
WebRTC tutorial
以下是所涉及的步骤：-
-
获取流式音频、视频或其他数据。
获取网络信息，例如 IP 地址和端口，并与其他 WebRTC 客户端（称为对等端）交换这些信息以启用连接，甚至通过 NAT 和防火墙。
协调“信号”通信以报告错误并启动或关闭会话。
交换有关媒体和客户端功能的信息，例如分辨率和编解码器。
传输流式音频、视频或数据。要获取和传输流数据，
WebRTC 实现了以下 API。
MediaStream：获取对数据流的访问，例如来自用户的摄像头和麦克风。 RTCPeerConnection：音频或视频通话，具有加密和带宽管理功能。 RTCDataChannel：通用数据的点对点通信。
【讨论】：
你有这个的演示或工作链接吗，我们可以找到一些代码 apprtc.appspot.com/?r=89345120 看看这个..你可以查看源代码...也可以在 github 上查看，你可以在那里找到很多..【参考方案2】：您显然只是在这里要求 JavaScript，但如果您是 .NET 或 Mono 开发人员，您可以安装 nuget 包 XSockets.Sample.WebRTC，它将为您提供 JavaScript 视频会议...并阅读此内容指导一下http://xsockets.net/blog/tutorial-building-a-multivideo-chat-with-webrtc
【讨论】：
以上是关于使用 HTML5 或 Javascript 的 P2P 视频会议的主要内容，如果未能解决你的问题，请参考以下文章
我应该如何使用 JavaScript/HTML5 处理繁重的音频负载？
javascript GreenSock - GSAP |当使用set（）或from（）方法（如fromTo（） - GSAP - GreenSock |）时，防止立即渲染HTML5 |
不使用JavaScript让IE浏览器支持HTML5元素——张鑫旭