我想构建一个聊天/直播应用程序(视频 + 文本聊天)。目前我还没有确定一种方法，但我正在推进一种方法，但我遇到了困难。
我正在尝试使用 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>
最佳答案
您可以使用 MediaRecorder API 获取流并使用 WebSockets 将其发送到 node.js
这里有一些细节(链接是我自己的博客):https://www.webrtcexample.com/blog/?go=all/tutorial-recording-video/
简而言之，MediaRecorder API 将帧包放入您的回调函数中，然后通过 WebSockets(或任何其他二进制 channel )将帧发送到服务器(node.js)。
它与 Firefox 完美配合。到目前为止，Chrome 已经对 MediaRecorder API 进行了实验性实现。
关于javascript - 如何将视频(从 getUserMedia)发送到 Node.js 服务器？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27712381/