P2P视频使用HTML5或Javascript进行配置 [英] P2P Video Confrencing using HTML5 or Javascript
本文介绍了P2P视频使用HTML5或Javascript进行配置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用html5和javascript构建视频会议，直到现在我能够流式传输相机并将其显示在画布上
I am trying to build video conferencing using html5 and javascript till now i am able to stream my camera capture and display it on canvas
这里是代码
<!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" width="640" height="480" autoplay></video>
<button id="snap" class="sexyButton">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></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但我不知道如何开始为此编写代码。
任何帮助或建议都会非常有帮助。
now i just want to stream video to make a conference between two people, i know i have to use webRTC or websocket but i don't know how to start writing code for that. any help or suggestion would be very helpfull.
推荐答案
HTML5rocks有很好的教程。
HTML5rocks has excellent tutorial on this.
总结以下所涉及的步骤： -
To summarize below are the steps involved:-
- 获取流媒体音频，视频或其他数据。
- 获取IP地址和端口等网络信息，并与其他WebRTC客户端（称为对等方）交换，以启用连接，甚至通过NAT和防火墙。
协调信令通信以报告错误并启动或关闭会话。 - 交换有关媒体和客户端功能的信息，例如分辨率和编解码器。
- 传输流式音频，视频或数据。为了获取和传递流数据，Web $ B实现了以下API。
MediaStream：访问数据流，例如来自用户的摄像头和麦克风。 RTCPeerConnection：音频或视频呼叫，具有加密和带宽管理功能。 RTCDataChannel：通用数据的对等通信。
- Get streaming audio, video or other data.
- Get network information such as IP address and port, and exchange this with other WebRTC clients (known as peers) to enable connection, even through NATs and firewalls. Coordinate 'signaling' communication to report errors and initiate or close sessions.
- Exchange information about media and client capability, such as resolution and codecs.
- Communicate streaming audio, video or data. To acquire and communicate streaming data,
WebRTC implements the following APIs. MediaStream: get access to data streams, such as from the user's camera and microphone. RTCPeerConnection: audio or video calling, with facilities for encryption and bandwidth management. RTCDataChannel: peer-to-peer communication of generic data.
这篇关于P2P视频使用HTML5或Javascript进行配置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
