Как отправить видео (из getUserMedia) на сервер Node.js?
Я хочу создать приложение для чата / прямой трансляции (видео + текстовый чат). Я не остановился на подходе в данный момент, но я двигаюсь вперед с одним, и я застрял.
Я пытаюсь захватить видеопоток с помощью getUserMedia и отправить его на мой сервер Node.js через Socket.io.
До сих пор у меня есть URL-адрес BLOB-объекта:"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>