如何将视频(来自 getUserMedia)发送到 Node.js 服务器?

Posted

技术标签:

【中文标题】如何将视频(来自 getUserMedia)发送到 Node.js 服务器?【英文标题】:How to send video (from getUserMedia) to Node.js server? 【发布时间】:2015-02-27 00:39:11 【问题描述】:

我正在寻找构建一个聊天/直播应用程序(视频 + 文本聊天)。我目前还没有确定一种方法,但我正在向前推进,但我陷入了困境。

我正在尝试使用 getUserMedia 获取视频流,并通过 Socket.io 将其发送到我的 Node.js 服务器。

到目前为止,我已经获得了 blob url:"mediastream:http://192.168.1.20:3000/1c267861-a2da-41df-9a83-ae69fdfd883b",但我不确定如何从中获取数据以通过 socket.io 发送。

任何帮助都会动摇。

服务器:

// server.js

var http = require('http');
var socketio = require('socket.io')
var fs = require('fs');

var server = http.createServer(function (req, res) 
  if (req.url ==='/') 
    fs.readFile('index.html', function (err, html) 
      res.writeHeader(200, "Content-Type": "text/html");
      res.write(html);
      return res.end();
    );
   else 
    res.end('hi!');
  
);

var io = socketio(server);

server.listen(8000, function () 
  console.log('Jumping on port 8000!');
);

io.on('connection', function (socket) 
  socket.emit('news',  hello: 'world' );
  socket.on('my other event', function (data) 
    console.log(data);
  );
  socket.on('video', function (video) 
    console.log(video);
  );
);

客户:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Video Café</title>
    <meta name="description" content="A place online where we can get together and chat...">
    <meta name="viewport" content="width=device-width">
    <style type="text/css">
      *, *::before, *::after box-sizing: border-box
      body padding: 1em;
      h1, div text-align: center; margin: 1em auto;
      #localVideo 
        width: calc(50% - 2em);
        margin: 1em auto;
      
    </style>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      ;(function () 
        "use strict";
        window.addEventListener('load', function (event) 
          var socket = io('http://localhost');
          socket.on('news', function (data) 
            console.log(data);
            socket.emit('my other event',  my: 'data' );
          );

          // Shims
          var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection;
          var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;
          var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription;
          navigator.getUserMedia = navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;

          document.getElementById('startButton').addEventListener('click', function (event) 
            console.log('working...');
            navigator.getUserMedia(
              video: true,
              audio: true
            , function (localMediaStream) 
              var blob = window.URL.createObjectURL(localMediaStream);
              window.stream = localMediaStream; // stream available to console
              var video = document.getElementById('localVideo');
              video.src = blob;
              video.play();
              // Send localstream to node
              console.log(blob);
              socket.emit('video',  my: blob );
            , function (error)
              console.log("navigator.getUserMedia error: ", error);
            );
          , false);

          // var pc = new RTCPeerConnection(null);
          // pc.onaddstream = gotRemoteStream;
          // pc.addStream(localStream);
          // pc.createOffer(gotOffer);

          // function gotOffer(desc) 
          //   pc.setLocalDescription(desc);
          //   sendOffer(desc);
          // 

          // function gotAnswer(desc) 
          //   pc.setRemoteDescription(desc);
          // 

          // function gotRemoteStream(e) 
          //   attachMediaStream(remoteVideo, e.stream);
          // 


        , false);
      ());
    </script>
  </head>
  <body>
    <h1>Video Café</h1>
    <video id="localVideo" muted autoplay></video>
    <video id="remoteVideo" autoplay></video>
    <div>
      <button id="startButton">Start</button>
      <button id="callButton">Call</button>
      <button id="hangupButton">Hang Up</button>
    </div>
  </body>
</html>

【问题讨论】:

github.com/Hironate/PeerChat 不起作用。我收到一个带有此错误的警告框:无法创建 RTCPeerConnection 对象。 【参考方案1】:

您可以使用 MediaRecorder API 来获取流,并使用 WebSockets 将其发送到 node.js

这里有一些细节(链接是我自己的博客):https://www.webrtcexample.com/blog/?go=all/tutorial-recording-video/

简而言之,MediaRecorder API 将帧包放入您的回调函数中,然后通过 WebSockets(或任何其他二进制通道)将帧发送到服务器(node.js)。

它与 Firefox 完美搭配。到目前为止,Chrome 已经对 MediaRecorder API 进行了实验性实现。

【讨论】:

太棒了!我迫不及待地想要更多 HTML5 :)

以上是关于如何将视频(来自 getUserMedia)发送到 Node.js 服务器?的主要内容,如果未能解决你的问题,请参考以下文章

将 getUserMedia 流式传输到 Icecast 服务器?

WebRTC/getUserMedia:如何正确静音本地视频?

如何使用 getUsermedia 和 mediaRecorder 下载录音并给出视频规范?

我可以将使用 getUserMedia 收到的值传输到输入文件吗?

如何将视频从浏览器提交/流式传输到服务器?

使用 getUserMedia 停止视频