如何将video(从getUserMedia)发送到Node.js服务器?

我正在build立一个聊天/直播应用程序(video+文字聊天)。 目前我还没有解决办法,但是我正在向前迈进,而且我陷入困境。

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

到目前为止,我已经得到了bloburl: "mediastream:http://192.168.1.20:3000/1c267861-a2da-41df-9a83-ae69fdfd883b"但我不知道如何从它抓取数据通过套接字发送.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> 

您可以使用MediaRecorder API来抓取stream和WebSockets,将其发送到node.js

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

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

它适用于Firefox的完美。 目前为止,Chrome已经实现了MediaRecorder API的实现。