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，但我不知道如何开始为此编写代码。任何帮助或建议都会非常有帮助。

4

2 回答 2

6

HTML5rocks 对此有很好的教程。

WebRTC 教程

总结以下是所涉及的步骤：-

  1. 获取流式音频、视频或其他数据。
  2. 获取网络信息，例如 IP 地址和端口，并与其他 WebRTC 客户端（称为对等端）交换这些信息以启用连接，甚至通过 NAT 和防火墙。协调“信号”通信以报告错误并启动或关闭会话。
  3. 交换有关媒体和客户端功能的信息，例如分辨率和编解码器。
  4. 传输流式音频、视频或数据。为了获取和传输流数据，
    WebRTC 实现了以下 API。MediaStream：获取对数据流的访问，例如来自用户的摄像头和麦克风。RTCPeerConnection：音频或视频通话，具有加密和带宽管理功能。RTCDataChannel：通用数据的点对点通信。
于 2013-07-09T13:29:22.463 回答
1

您显然只是在这里要求 JavaScript，但如果您是 .NET 或 Mono 开发人员，您可以安装 nuget 包 XSockets.Sample.WebRTC，它将为您提供 JavaScript 视频会议......并阅读本指南http://xsockets.net/blog/tutorial-building-a-multivideo-chat-with-webrtc

于 2013-07-09T17:39:50.450 回答