如何将getusermedia记录的流实时发送到服务器Node.js [英] How to send getusermedia recorded stream to server nodejs realtime
问题描述
我能够使用socket.io将流blob发送到节点js服务器.但是，它在更新视频播放器中的Blob数据时闪烁.我希望它运行平稳.如何在不使视频播放器闪烁的情况下发送数据.这是我的服务器代码
I am able to send stream blob using socket.io to node js server. But, it is blinking while updating the blob data in video player. I want it to run smooth. How I can send data without blinking of video player. Here is my server code
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毫秒后将数据发送到服务器.但是在网页中闪烁.我必须做到这一点才能做到实时.任何帮助将不胜感激.
I have change timeslice value in MediaStreamRecorder api to 500 default. So, sending data to server after 500 millisecond. But is blinking in the webpage. I have to this to make it real time. Any help will appreciated.
推荐答案
您正在使用使用TCP连接的socket.io.如果要使应用程序像Skype一样实时，则必须使用UDP连接.
You're using socket.io which uses TCP connection. If you want to make your application real-time something like skype, you must use UDP connection.
如果一帧滞后，则您的应用程序应忽略此帧，但是在您的情况下，您正在使用TCP连接，因此它将始终按顺序交付.防火墙也是TCP连接的问题.您说过尝试将超时设置为500毫秒，这对于实时应用程序来说太大了，这就是视频闪烁的原因.
If one frame lags behind then your application should ignore this but in your case you're using TCP connection so it will always deliver in order. Firewall is also an issue for TCP connection. You said that you tried setting up timeout to 500 ms which is too big for real-time application that's why your video is blinking.
如果您愿意放弃TCP连接，那么我有一个小的解决方案.我已经尝试过了，而且效果很好.
If you're willing to give up on TCP connection, I have a small solution for this. I've tried this and it is working fine.
https://www.youtube.com/watch?v=ieBtXwHvoNk
一个问题是，在这种情况下，您无法像在websocket中轻松地那样直接在WAN上发送数据包.您必须在服务器上实现STUN/TURN或类似的操作.
Just one problem is that in this case you cannot send your packets on WAN directly as you can easily do in websockets. You have to implement STUN/TURN or something like that on your server.
如果您仍然有疑问，请参阅此github问题并阅读所有答复: https://github.com/socketio/socket.io/issues/1175
If you still have some doubts then see this github issue and read all the replies : https://github.com/socketio/socket.io/issues/1175
我希望这会有所帮助.
这篇关于如何将getusermedia记录的流实时发送到服务器Node.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
