6
Tôi đang tìm cách xây dựng ứng dụng trò chuyện/phát trực tiếp (trò chuyện video + văn bản). Tôi không giải quyết một cách tiếp cận vào lúc này, nhưng tôi đang tiến về phía trước với một, và tôi đã bị mắc kẹt.Cách gửi video (từ getUserMedia) đến máy chủ Node.js?
Tôi đang cố gắng lấy luồng video bằng cách sử dụng getUserMedia và gửi nó đến máy chủ Node.js của tôi qua Socket.io.
Cho đến nay tôi đã có url blob: "mediastream:http://192.168.1.20:3000/1c267861-a2da-41df-9a83-ae69fdfd883b" nhưng tôi không chắc chắn cách lấy dữ liệu từ nó để gửi qua socket.io.
Bất kỳ trợ giúp nào đều có thể phát nổ.
Server:
// 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);
});
});
Chủ đầu tư:
<!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>
https://github.com/Hironate/PeerChat – laggingreflex
Không hoạt động. Tôi nhận được một hộp cảnh báo với lỗi này: Không thể tạo đối tượng RTCPeerConnection. – Costa