1

我能够使用 socket.io 将流 blob 发送到节点 js 服务器。但是，在更新视频播放器中的 blob 数据时它会闪烁。我希望它运行顺畅。如何在不闪烁视频播放器的情况下发送数据。这是我的服务器代码

var express = require("express");
var app = express();
var http = require("http").Server(app);
var io = require("socket.io")(http);
var fs = require("fs")

app.use(express.static('public'))
app.get("/", function(req, res){
 res.sendFile(__dirname+ "/public/index.html");
 });


io.on("connection", function(socket) {
  console.log("A user is connected");
  socket.on("send", function(data){
    console.log(data);
    socket.emit("data", data);
  });
  socket.on("disconnect", function() {
    console.log("A user is disconnected");
  });
});


http.listen(3000, function(){
    console.log("Server is started at port 3000\nTo close use Ctrl+C");
});

这是我的客户端代码，

<html>
<head><title>Testing</title>
<script src="socket.io/socket.io.js"></script>
<script type="text/javascript" src="MediaStreamRecorder.js"></script> 
</head>
<body>
<video autoplay="true" id="video"></video>
<script type="text/javascript">
var socket = io();
             window.URL.createObjectURL = window.URL.createObjectURL || window.URL.webkitCreateObjectURL || window.URL.mozCreateObjectURL || window.URL.msCreateObjectURL;               
             socket.on("data", function(data){
                    var binaryData = [];
                    binaryData.push(data);
                    videoElement = document.getElementById('video');
                    videoElement.src = window.URL.createObjectURL(new Blob(binaryData, {type: "video/webm"}));
            });

                var mediaConstraints = {
                        video: true
                    };
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                    navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);

                    function onMediaSuccess(stream) {
                        var arrayOfStreams = [stream];
                        var medias = new MediaStreamRecorder(stream);
                        medias.ondataavailable = function(blob) {
                             socket.emit("send", blob);
                        };
                        medias.start();
                    }

                    function onMediaError(e) {
                        console.error('media error', e);
                    }
</script>
</body>
</html>

我已将 MediaStreamRecorder api 中的时间片值更改为默认值 500。因此，在 500 毫秒后向服务器发送数据。但在网页中闪烁。我必须这样做才能使其成为实时。任何帮助将不胜感激。

4

2 回答 2

3

您正在使用使用 TCP 连接的 socket.io。如果你想让你的应用程序像Skype一样实时，你必须使用UDP连接。

如果落后一帧，那么您的应用程序应该忽略这一点，但在您的情况下，您使用的是 TCP 连接，因此它将始终按顺序交付。防火墙也是 TCP 连接的问题。您说您尝试将超时设置为 500 毫秒，这对于实时应用程序来说太大了，这就是您的视频闪烁的原因。

如果你愿意放弃 TCP 连接，我有一个小解决方案。我已经尝试过了，它工作正常。

https://www.youtube.com/watch?v=ieBtXwHvoNk

只有一个问题是，在这种情况下，您不能像在 websockets 中那样轻松地在 WAN 上发送数据包。你必须在你的服务器上实现 STUN/TURN 或类似的东西。

如果您仍有疑问，请查看此 github 问题并阅读所有回复：https ://github.com/socketio/socket.io/issues/1175

我希望这会有所帮助。

于 2017-08-30T13:08:41.570 回答
1

但是，在更新视频播放器中的 blob 数据时它会闪烁。

您正在更改元素.src的。<video>

URL.createObjectURL()并且MediaStreamRecorder没有必要。

您可以将对象传递一次并将元素设置为传递.src的元素，而不是更改元素。<video>MediaStream<video>.srcObjectMediaStream

videoElement = document.getElementById("video");

function onMediaSuccess(stream) {
  if (videoElement.srcObject === null) {
    videoElement.srcObject = stream
  }
}


var videoElement = document.getElementById("video");

videoElement.oncanplay = function() {
  videoElement.play();
}

var media = document.createElement("video");

media.src = "https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4";

media.oncanplay = function() {
  media.play();
  var stream = media.captureStream();
  onMediaSuccess(stream);
}

function onMediaSuccess(stream) {
  if (videoElement.srcObject === null) {
    videoElement.srcObject = stream
  }
}
<video id="video"></video>

如果要求发送一个Blob您可以使用的MediaSource，转换Blob为一个ArrayBufferusingFileReader或fetch()并将其附加ArrayBuffer到SourceBuffer，请参阅无法通过 websocket 将视频流式传输到 Firefox。

于 2017-07-30T17:07:08.483 回答