如何将视频（来自 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 下载录音并给出视频规范？