Question

我正在寻找建立聊天/直播应用程序（视频+文字聊天）。我现在还没有采取行动，但是我向前迈进了一步，而且我已经卡住了。

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

到目前为止，我已经获得了blob网址："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>

Answer 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。

如何将视频（从getUserMedia）发送到Node.js服务器？

1 个答案: