Javascript 如何将视频（从getUserMedia）发送到Node.js服务器？
我正在寻找建立一个聊天/实时流应用程序（视频+文本聊天）。目前我还没有确定一种方法，但我正在朝着一种方法前进，我被卡住了 我正在尝试使用getUserMedia获取视频流，并通过Socket.io将其发送到Node.js服务器 到目前为止，我已经获得了blob url:Javascript 如何将视频（从getUserMedia）发送到Node.js服务器？,javascript,node.js,sockets,socket.io,webrtc,Javascript,Node.js,Sockets,Socket.io,Webrtc,我正在寻找建立一个聊天/实时流应用程序（视频+文本聊天）。目前我还没有确定一种方法，但我正在朝着一种方法前进，我被卡住了 我正在尝试使用getUserMedia获取视频流，并通过Socket.io将其发送到Node.js服务器 到目前为止，我已经获得了blob url:“mediastream:http://192.168.1.20:3000/1c267861-a2da-41df-9a83-AE69FD883B“但我不确定如何从中获取数据以通过socket.io发送 任何帮助都会动摇 服务器：
“mediastream:http://192.168.1.20:3000/1c267861-a2da-41df-9a83-AE69FD883B“// 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>
视频咖啡馆
*，*：：之前，*：：之后{框大小：边框框}
正文{padding:1em；}
h1，div{文本对齐：居中；边距：1em自动；}
#本地视频{
宽度：钙（50%-2米）；
保证金：1em自动；
}
;（功能（）{
“严格使用”；
window.addEventListener（'load'，函数（事件）{
变量套接字=io（'http://localhost');
socket.on（'news'，函数（数据）{
控制台日志（数据）；
emit（'my other event'，{my:'data'}）；
});
//垫片
var PeerConnection=window.mozrtpeerconnection | | window.webkirtpeerconnection；
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'，函数（事件）{
console.log（'working…'）；
navigator.getUserMedia({
视频：没错，
音频：正确
}，函数（localMediaStream）{
var blob=window.URL.createObjectURL（localMediaStream）；
window.stream=localMediaStream；//可用于控制台的流
var video=document.getElementById（'localVideo'）；
video.src=blob；
video.play（）；
//将localstream发送到节点
控制台日志（blob）；
emit（'video'，{my:blob}）；
}，函数（错误）{
log（“navigator.getUserMedia错误：”，错误）；
});
}，假）；
//var pc=新的RTPeerConnection（空）；
//pc.onaddstream=gotmotestream；
//pc.addStream（localStream）；
//pc.createOffer（gotOffer）；
//功能提供（描述）{
//pc.setLocalDescription（desc）；
//sendOffer（描述）；
// }
//函数gotAnswer（desc）{
//pc.setRemoteDescription（描述）；
// }
//函数gotmotestream（e）{
//attachMediaStream（远程视频，e.stream）；
// }
}，假）；
}());
视频咖啡馆
开始
呼叫
挂断
它与Firefox完美配合。到目前为止，Chrome已经实验性地实现了MediaRecorder API。不起作用。我收到一个警告框，其中有以下错误：无法创建RTPeerConnection对象。太棒了！我等不及要更多的HTML5:）