文章/答案/技术大牛

发布

社区首页 >问答首页 >使用HTML5或Javascript的P2P视频会议

问使用HTML5或Javascript的P2P视频会议
EN

Stack Overflow用户

提问于 2013-07-09 21:20:24

回答 2查看 13.6K关注 0票数 4

我正在尝试使用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" 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，但我不知道如何开始编写代码。任何帮助或建议都是非常有帮助的。

webrtc

websocket

video-streaming

html5-canvas

html5-video

回答 2

Stack Overflow用户

回答已采纳

发布于 2013-07-09 21:29:22

HTML5rocks在这方面有很好的教程。

WebRTC tutorial

以下是所涉及的步骤：

获取流式音频、视频或其他数据。
获取IP地址和端口等网络信息，并与其他WebRTC客户端(称为对等客户端)交换这些信息以启用连接，即使是通过NAT和防火墙也是如此。协调“信令”通信以报告错误，并启动或关闭有关媒体和客户端功能的sessions.
Exchange信息，例如分辨率和codecs.
Communicate流音频、视频或数据。为了获取和传送流数据，

WebRTC实现了以下接口。MediaStream:获取数据流，例如从用户的摄像头和麦克风。RTCPeerConnection:音频或视频通话，具有加密和带宽管理功能。RTCDataChannel:通用数据的点对点通信。

票数 6

Stack Overflow用户

发布于 2013-07-10 01:39:50

显然你在这里只需要JavaScript，但是如果你是.NET或Mono开发者，你可以安装nuget包XSockets.Sample.WebRTC，它将为你提供一个JavaScript视频会议……也可以阅读这篇指南http://xsockets.net/blog/tutorial-building-a-multivideo-chat-with-webrtc。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/17549272

复制

相似问题

问使用HTML5或Javascript的P2P视频会议
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML5或Javascript的P2P视频会议EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用HTML5或Javascript的P2P视频会议
EN