现在是否可以使用GetUserMedia API从网络摄像头读取视频流并直接发送到服务器进行进一步广播？

Question

我需要构建一个Web应用程序，使用WebRTC获取网络摄像头视频流和麦克风音频流，并立即将其翻译到服务器以供进一步广播到多个客户端。该应用程序必须实时进行全双工通信，就像是一种实时视频聊天应用。它将是某种教育应用程序。

那么问题来了：现在是否可能？我应该使用哪些技术？应该在后端使用WebRTC、WebSocket和Node.js吗？还是可以使用PHP代替Node？我可以使用Socket.io吗？还有其他方法可以实现这一点吗？或者可以使用Flash吗？

- paperstreet7

Answer 1

WebRTC中的PeerConnection API不需要后端服务器来连接对等方之间的一个或多个连接。你只需要后端服务器作为调解员来帮助建立对等方之间的连接。为此，你可以使用WebSocket API、Ajax或其他必要手段来实现。另外，你可以使用PHP编写WebSocket的服务器端（或你想使用的任何方法来建立点对点连接）。具体取决于你自己。目前，只有Chrome和Firefox支持足够的WebRTC APIs，使视频聊天成为可能。很快，Opera也可能加入其中，但尚无人确定IE11是否会添加WebRTC，苹果似乎也没有将WebRTC添加到Safari的意图（因为他们有自己的专有技术;这听起来很熟悉！）。总之，WebRTC是你最好的选择。另外，我认为使用JS向服务器发送视频和音频，然后让服务器将数据转发给其他对等方是不可能的。相反，你需要使用WebRTC来建立点对点连接，然后从那里继续。编辑：如果你使用TURN服务器，可以通过服务器重新路由音频和视频数据，但这实际上是最不理想的情况，而且只有在使用WebRTC APIs时才能这样做。

- HartleySan

---

谢谢你的回答！我知道WebRTC能够直接连接浏览器。但是，我需要一个Web服务器来进行身份验证和授权。 - paperstreet7

这完全取决于您。您可以授权和验证任何您想要的内容，并且只有在一切正常时才允许WebRTC连接。 - HartleySan

@paperstreet7 - 已经过去了几年，但我遇到了类似的要求，你设法找到解决方案了吗？ - po10cySA

Answer 2

这可能会对您有所帮助。

MediaStreamRecorder是一个WebRTC API，用于记录getUserMedia()流（仍在实现中）。它允许Web应用程序从实时音频/视频会话中创建文件。

下面是一个将流发送到服务器的示例实现。

 <video autoplay></video>

    <script language="javascript" type="text/javascript">
    function onVideoFail(e) {
        console.log('webcam fail!', e);
      };

    function hasGetUserMedia() {
      // Note: Opera is unprefixed.
      return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
                navigator.mozGetUserMedia || navigator.msGetUserMedia);
    }

    if (hasGetUserMedia()) {
      // Good to go!
    } else {
      alert('getUserMedia() is not supported in your browser');
    }

    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia  = navigator.getUserMedia || 
                             navigator.webkitGetUserMedia ||
                              navigator.mozGetUserMedia || 
                               navigator.msGetUserMedia;

    var video = document.querySelector('video');
    var streamRecorder;
    var webcamstream;

    if (navigator.getUserMedia) {
      navigator.getUserMedia({audio: true, video: true}, function(stream) {
        video.src = window.URL.createObjectURL(stream);
        webcamstream = stream;
    //  streamrecorder = webcamstream.record();
      }, onVideoFail);
    } else {
        alert ('failed');
    }

    function startRecording() {
        streamRecorder = webcamstream.record();
        setTimeout(stopRecording, 10000);
    }
    function stopRecording() {
        streamRecorder.getRecordedData(postVideoToServer);
    }
    function postVideoToServer(videoblob) {

        var data = {};
        data.video = videoblob;
        data.metadata = 'test metadata';
        data.action = "upload_video";
        jQuery.post("http://www.kongraju.in/uploadvideo.php", data, onUploadSuccess);
    }
    function onUploadSuccess() {
        alert ('video uploaded');
    }

    </script>

    <div id="webcamcontrols">
        <button class="recordbutton" onclick="startRecording();">RECORD</button>
    </div>

您可以将录制的文件发送到服务器。

参考资料：

http://www.w3.org/TR/mediastream-recording/

- kongaraju

---

当视频文件/片段到达“data = {}”部分并发送到服务器之前，您知道它是什么类型吗？ - JerryFox

我在Chrome浏览器版本46.0.2490.86 m的第41行遇到了错误：“ _Uncaught TypeError: Cannot read property 'record' of undefined_”，意思是无法读取未定义的属性“record”。 - Marco Lackovic

Answer 3

多人实时双向视频聊天是视频会议，为此您需要一个服务器组件来混合参与者的音频和视频，并将其广播给他们。您非常需要一个媒体服务器来实现这一点。对于WebRTC，有几个可用的选项；请查看Doubango的telepresence服务器：https://code.google.com/p/telepresence/ Mobicents有一个很好的SIP堆栈，但是对于webRTC的多媒体功能有限。

否则，为什么不开始编写一个呢？ :)

- harsh