问题描述
我正在寻求构建一个聊天/实时流应用程序(视频+文本聊天).我目前还不确定要采用哪种方法,但是我正朝着一种方法前进,但是我陷入了困境.
I'm looking to build a chat/live stream application (video + text chat). I'm not settled on an approach at the moment, but I'm moving forward with one, and I've gotten stuck.
我正在尝试使用getUserMedia捕获视频流,并通过Socket.io将其发送到我的Node.js服务器.
I'm trying to grab the video stream using getUserMedia, and send it to my Node.js server over Socket.io.
到目前为止,我已经获得了Blob网址:"mediastream:http://192.168.1.20:3000/1c267861-a2da-41df-9a83-ae69fdfd883b"
,但我不确定如何从中获取数据以通过socket.io发送.
So far I've got the blob url: "mediastream:http://192.168.1.20:3000/1c267861-a2da-41df-9a83-ae69fdfd883b"
but I'm not sure how to grab the data from it to send over 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
You could use MediaRecorder API for grabbing the stream and WebSockets for sending it to node.js
这里有一些细节(链接到我自己的博客): https://www.webrtcexample.com/blog/?go=all/tutorial-recording-video/
Here are a bit of details (link is to my own blog): https://www.webrtcexample.com/blog/?go=all/tutorial-recording-video/
简而言之,MediaRecorder API将帧包放入回调函数中,然后通过WebSockets(或任何其他二进制通道)将帧发送到服务器(node.js).
In short, MediaRecorder API put pack of frames into your call-back function, and it then sends the frames to the server (node.js) via WebSockets (or any other binary channel).
它与Firefox完美搭配.Chrome到目前为止已对MediaRecorder API进行了实验性实现.
It works perfect with Firefox. Chrome has experimental implementation of MediaRecorder API so far.
这篇关于如何将视频(从getUserMedia)发送到Node.js服务器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!