Comment enregistrer d'une webcam et audio en utilisant webRTC et un serveur de base de la connexion Homologue

Je voudrais enregistrer les utilisateurs de webcam et audio et l'enregistrer dans un fichier sur le serveur. Ces fichiers pourront ensuite servir à d'autres utilisateurs.

Je n'ai pas de problèmes avec la lecture, cependant, je vais avoir des problèmes pour obtenir le contenu de l'enregistrement.

Ma compréhension est que le getUserMedia .record() fonction n'a pas encore été écrite seulement une proposition a été faite pour elle jusqu'à présent.

Je voudrais créer un pair de connexion sur mon serveur à l'aide de la PeerConnectionAPI. Je comprends que c'est très orthodoxe, mais je pense qu'il devrait être possible de créer un pair sur le serveur et d'enregistrer ce que le client-peer envoie.

Si c'est possible, je dois être en mesure d'enregistrer ces données au format flv ou tout autre format vidéo.

Ma préférence est fait pour enregistrer la webcam + audio côté client, pour permettre au client de ré-enregistrement de vidéos si ils n'aimaient pas leur première tentative avant de le télécharger. Cela pourrait aussi permettre d'interruptions dans la connexion de réseau. J'ai vu un bout de code qui permet l'enregistrement de l'individu 'images' a partir de la webcam par l'envoi des données à la toile, c'est cool, mais j'ai besoin de l'audio aussi.

Voici le code côté client j'ai pour l'instant:

  <video autoplay></video>
<script language="javascript" type="text/javascript">
function onVideoFail(e) {
console.log('webcam fail!', e);
};
function hasGetUserMedia() {
//Note: Opera is unprefixed.
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasGetUserMedia()) {
//Good to go!
} else {
alert('getUserMedia() is not supported in your browser');
}
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
var video = document.querySelector('video');
var streamRecorder;
var webcamstream;
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: true, video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
webcamstream = stream;
// streamrecorder = webcamstream.record();
}, onVideoFail);
} else {
alert ('failed');
}
function startRecording() {
streamRecorder = webcamstream.record();
setTimeout(stopRecording, 10000);
}
function stopRecording() {
streamRecorder.getRecordedData(postVideoToServer);
}
function postVideoToServer(videoblob) {
/*  var x = new XMLHttpRequest();
x.open('POST', 'uploadMessage');
x.send(videoblob);
*/
var data = {};
data.video = videoblob;
data.metadata = 'test metadata';
data.action = "upload_video";
jQuery.post("http://www.foundthru.co.uk/uploadvideo.php", data, onUploadSuccess);
}
function onUploadSuccess() {
alert ('video uploaded');
}
</script>
<div id="webcamcontrols">
<a class="recordbutton" href="javascript:startRecording();">RECORD</a>
</div>

J'ai le même problème. Est la méthode getRecordedData() de travail pour vous ? Il n'est pas sur mon nouveau-mise à jour des navigateurs.
Non - j'ai essayé Google "Canaries" aussi.
Ouais je vais garder un œil sur elle - je vais mettre à jour ce fil quand il y a une solution adéquate.
si vous avez la solution de la question ci-dessus s'il vous plaît partager avec moi, Merci
Quelqu'un a été en mesure d'obtenir à la MediaStream octets par certains côté serveur RTC magie?
Openvidu openvidu.io

InformationsquelleAutor Dave Hilditch | 2013-05-15

audio-streaming c++javascript video-streaming webrtc

44

Vous devriez vraiment avoir un coup d'oeil à Kurento. Il fournit un WebRTC infrastructure de serveur qui vous permet d'enregistrer à partir d'un WebRTC nourrir et beaucoup plus. Vous pouvez aussi trouver des exemples pour l'application de la planification de ici. Il est vraiment facile d'ajouter des capacités d'enregistrement de la démo, et de stocker le fichier multimédia dans un URI (disque local ou où).

Le projet est sous licence ~~LGPL~~ Apache 2.0

EDIT 1

Depuis ce post, nous avons ajouté un nouveau tutoriel qui montre comment ajouter l'enregistreur dans un couple de scénarios
- kurento-hello-world-enregistrement: enregistrement simple tutoriel, montrant les différentes capacités de l'enregistrement de point de terminaison.
- kurento-one2one-enregistrement: Comment enregistrer un one-to-one de la communication dans le serveur de médias.
- kurento-hello-world-référentiel: utilisation d'un référentiel externe pour enregistrer le fichier.
Avertissement: je fais partie de l'équipe qui développe Kurento.
- L'air prometteur. Savez-vous où je peux trouver des informations sur la façon dont il évolue? E. g., combien de flux de données peuvent être traitées par un serveur, etc.?
- Dans de récents tests de charge, nous avons été en mesure d'obtenir 150 one2one connexions de webrtc sur un i5/16 go de RAM. Vous pouvez s'attendre à ce que ces chiffres seront mieux à l'avenir, mais ne pas s'attendre à des miracles: il y a beaucoup de cryptage de passe pour SRTP, et qui est exigeant. Nous sommes à la recherche dans l'accélération matériel de chiffrement/déchiffrement, et le nombre va aller plus haut, et si je ne peux pas vous assurer de la façon dont beaucoup mieux ce sera jusqu'à ce que nous le tester plus en profondeur, nous nous attendons à une amélioration 3x
- Dans mon expérience, la Kurento media server n'est pas forcément prêt pour la production. Je ne pouvais pas obtenir la dernière version de Java tutoriel pour compiler à l'aide de Maven, s'est plaint, il manque des POM modules qui je ne pourrais pas le trouver n'importe où. J'ai googlé et la seule réponse d'un membre de Kurento équipe a été RTFM et l'étude de plus de Maven. Bien sûr, vous obtenez ce que vous payez, mais encore je n'ai pas envie de passer mon temps sur la technologie comme ça. L'enregistrement de la vidéo côté client et le téléchargement périodiquement pourrait être plus facile, par exemple, ça a l'air prometteur github.com/streamproc/MediaStreamRecorder
- C'est probablement me répondre. Auriez-vous l'esprit de partage un lien vers ce post? Si vous avez la réponse, c'est probablement parce que vous avez demandé quelque chose qui était déjà là, ou dans la liste. On dirait que vous essayez de compiler une version de capture instantanée. Ces artefacts ne sont pas publiés dans le centre, donc soit vous commander une libération des tutoriels ou utilisez notre internes dev repo. Cela a été répondu dans la liste de nombreuses fois, il y a une entrée dans la documentation sur le travail avec les versions de développement... Nous avons pris le temps de l'écrire, de sorte qu'il serait très aimable à vous de prendre le temps de le lire.
- Je suis juste en utilisant Kurento de faire un tel enregistrement. J'en garde pas compliqué, mais il faut un peu de temps, à comprendre le concept - car certains docs sont vraiment moyenne et de trouver ce que je peux envoyer à kurento, ou description des événements et ainsi de suite, peuvent être parfois très frustrant. Mais de toute façon - un projet ouvert, comme c'est vraiment un excellent travail et la valeur de l'aide. Kurento travaille sous linux (windows version n'est pas officielle et ne fonctionne pas avec toutes les fonctionnalités).
- un exemple pour être en mesure d'utiliser avec asp.,net mvc
- Pas que je sache, mais il ne devrait pas être difficile pour vous de le porter.
- est-il possible d'enregistrer un message vidéo pour les visionner plus tard tout comme la même manière que nous avons de messagerie vocale choses en utilisant webRTC ?
- Bien sûr! Vous pouvez utiliser un magnétophone pour enregistrer le message, et ensuite utiliser un lecteur de diffuser le message.
- Merci pour la réponse, je voudrais savoir que la version actuelle de Kurento prend en charge le Fonctionnement systems en dehors de Ubuntu 14.0 LTS, pourquoi Ubuntu est-elle obligatoire? Qui version de Java prend en charge( j'ai vérifié la documentation et pom.xml mais je ne pouvais pas le trouver) ? Prend-il en charge Ubuntu 16.04 LTS ?
- Trouvé des réponses pour les questions ci-dessus (poster ici pour les autres), Kurento prend actuellement en charge du JDK 7.0, Il n'est pas qu'il a d'être dépendant sur Ubuntu 14.04, il devrait en charge les versions ultérieures, mais Kurento n'est pas testé officiellement sur d'autres versions d'Ubuntu/linux version. Aussi Kurento versions 64 bits versions disponibles facilement pour isntallation, cependant, vous pouvez installer la version 32 bits de serveur, mais vous avez à construire d'abord.
- Malheureusement, comme indiqué dans ma réponse, le développement de Kurento a ralenti sévèrement après la Twilio acquisition. Je recommande l'utilisation de Janus à la place.
InformationsquelleAutor igracia
15

S'il vous plaît, vérifiez la RecordRTC

RecordRTC est sous licence MIT sur github.
- C'est assez impressionnant -- ma question: peut enregistrer de la vidéo et de l'audio ensemble (vivre une vraie vidéo plutôt que de deux choses distinctes?)
- Accord - impressionnant, mais on dirait qu'il n'enregistre que les données séparément.
- il y a un RecordRTC-ensemble
- Cette approche fonctionne via Whammy.js dans google Chrome. Ceci est problématique car la qualité tend à être beaucoup plus faible à partir de l'émulation Whammy prévoit Chrome absence de MediaStreamRecorder. Ce qui essentiellement se passe est WhammyRecorder points une balise vidéo à la MediaStream objet d'URL et puis prend webp des clichés d'une toile élément à une certaine cadence. Il utilise ensuite Whammy de mettre toutes ces images en une vidéo webm.
InformationsquelleAutor Dmitry

Je crois que l'aide kurento ou d'autres Mcu juste pour l'enregistrement de vidéos serait peu exagérer, surtout compte tenu du fait que Chrome a MediaRecorder prise en charge des API de v47 et Firefox depuis v25. Donc, à ce stade, vous pourriez même pas besoin d'une source externe bibliothèque js pour faire le travail, essayez cette démo, je l'ai fait pour enregistrer de la vidéo/audio à l'aide de MediaRecorder:

Démo - serait de travailler dans chrome et firefox (intentionnellement laissé de côté en poussant blob de code serveur)

Github le Code Source

Si l'exécution de firefox, vous pouvez le tester ici même( chrome besoins https):

JS:

'use strict'
let log = console.log.bind(console),
id = val => document.getElementById(val),
ul = id('ul'),
gUMbtn = id('gUMbtn'),
start = id('start'),
stop = id('stop'),
stream,
recorder,
counter = 1,
chunks,
media;
gUMbtn.onclick = e => {
let mv = id('mediaVideo'),
mediaOptions = {
video: {
tag: 'video',
type: 'video/webm',
ext: '.mp4',
gUM: {
video: true,
audio: true
}
},
audio: {
tag: 'audio',
type: 'audio/ogg',
ext: '.ogg',
gUM: {
audio: true
}
}
};
media = mv.checked ? mediaOptions.video : mediaOptions.audio;
navigator.mediaDevices.getUserMedia(media.gUM).then(_stream => {
stream = _stream;
id('gUMArea').style.display = 'none';
id('btns').style.display = 'inherit';
start.removeAttribute('disabled');
recorder = new MediaRecorder(stream);
recorder.ondataavailable = e => {
chunks.push(e.data);
if (recorder.state == 'inactive') makeLink();
};
log('got media successfully');
}).catch(log);
}
start.onclick = e => {
start.disabled = true;
stop.removeAttribute('disabled');
chunks = [];
recorder.start();
}
stop.onclick = e => {
stop.disabled = true;
recorder.stop();
start.removeAttribute('disabled');
}
function makeLink() {
let blob = new Blob(chunks, {
type: media.type
}),
url = URL.createObjectURL(blob),
li = document.createElement('li'),
mt = document.createElement(media.tag),
hf = document.createElement('a');
mt.controls = true;
mt.src = url;
hf.href = url;
hf.download = `${counter++}${media.ext}`;
hf.innerHTML = `donwload ${hf.download}`;
li.appendChild(mt);
li.appendChild(hf);
ul.appendChild(li);
}

CSS:

      button {
margin: 10px 5px;
}
li {
margin: 10px;
}
body {
width: 90%;
max-width: 960px;
margin: 0px auto;
}
#btns {
display: none;
}
h1 {
margin-bottom: 100px;
}

HTML:

<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<h1> MediaRecorder API example</h1>
<p>For now it is supported only in Firefox(v25+) and Chrome(v47+)</p>
<div id='gUMArea'>
<div>
Record:
<input type="radio" name="media" value="video" checked id='mediaVideo'>Video
<input type="radio" name="media" value="audio">audio
</div>
<button class="btn btn-default" id='gUMbtn'>Request Stream</button>
</div>
<div id='btns'>
<button class="btn btn-default" id='start'>Start</button>
<button class="btn btn-default" id='stop'>Stop</button>
</div>
<div>
<ul class="list-unstyled" id='ul'></ul>
</div>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Chrome 49 est le 1er à l'appui de la MediaRecorder API sans le drapeau.

InformationsquelleAutor mido

7

oui, comme vous l'avez compris, MediaStreamRecorder est actuellement pas implémenté.

MediaStreamRecorder est une API WebRTC pour l'enregistrement getUserMedia() des flux . Il permet d'applications web pour créer un fichier à partir d'un live audio/vidéo de la session.

alternativement, vous pouvez faire comme ceci http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia mais l'audio est partie manquante.
- Yep, et vous pouvez capturer l'audio du fichier, l'envoyer au serveur, et de les combiner pour créer une véritable fichier vidéo sur le côté serveur. Mais cette solution peut être très lent sur le côté client en fonction de sa configuration de l'ordinateur, comme il se doit de créer des fichiers image à l'aide d'une toile ET de capturer l'audio, et tout cela dans la RAM... Btw, firefox équipe travaillent sur elle, donc j'espère qu'ils vont le libérer bientôt.
InformationsquelleAutor Konga Raju
4

Vous pouvez utiliser RecordRTC-ensemble, qui est basé sur RecordRTC.

Il prend en charge l'enregistrement vidéo et audio ensemble dans des fichiers séparés. Vous aurez besoin de l'outil comme ffmpeg pour fusionner deux fichiers en un seul sur le serveur.
- C'est un navigateur de la solution, pas du côté serveur.
InformationsquelleAutor Mifeng
1

Web Serveur D'Appel 4 pouvez enregistrer WebRTC audio et vidéo à conteneur WebM.
L'enregistrement est effectué à l'aide de codec Vorbis pour l'audio avec le codec VP8 pour la vidéo.
Iniitial WebRTC codecs sont Opus ou G. 711 et VP8. Ainsi, le serveur d'enregistrement nécessite Opus/G. 711 pour Vorbis côté serveur de transcodage ou VP8-H. 264 transcodage si il est nécessaire d'utiliser un autre récipient, c'est à dire AVI.
- est-ce trucs commerciaux?
InformationsquelleAutor Bob42
1

Découvrez Janus. Voici un enregistrement de la démo:

https://janus.conf.meetecho.com/recordplaytest.html

Contrairement à Kurento, dont le développement a ralenti sévèrement après la Twilio acquisition, Janus est toujours activement développé et pris en charge.

InformationsquelleAutor jamix

Pour l'enregistrement je n'ai pas assez de connaissances sur ce sujet,

Mais j'ai trouvé cela sur Git hub-

<!DOCTYPE html>
<html>
<head>
<title>XSockets.WebRTC Client example</title>
<meta charset="utf-8" />
<style>
body {
}
.localvideo {
position: absolute;
right: 10px;
top: 10px;
}
.localvideo video {
max-width: 240px;
width:100%;
margin-right:auto;
margin-left:auto;
border: 2px solid #333;
}
.remotevideos {
height:120px;
background:#dadada;
padding:10px; 
}
.remotevideos video{
max-height:120px;
float:left;
}
</style>
</head>
<body>
<h1>XSockets.WebRTC Client example </h1>
<div class="localvideo">
<video autoplay></video>
</div>
<h2>Remote videos</h2>
<div class="remotevideos">
</div>
<h2>Recordings  ( Click on your camera stream to start record)</h2>
<ul></ul>
<h2>Trace</h2>
<div id="immediate"></div>
<script src="XSockets.latest.js"></script>
<script src="adapter.js"></script>
<script src="bobBinder.js"></script>
<script src="xsocketWebRTC.js"></script>
<script>
var $ = function (selector, el) {
if (!el) el = document;
return el.querySelector(selector);
}
var trace = function (what, obj) {
var pre = document.createElement("pre");
pre.textContent = JSON.stringify(what) + " - " + JSON.stringify(obj || "");
$("#immediate").appendChild(pre);
};
var main = (function () {
var broker;
var rtc;
trace("Ready");
trace("Try connect the connectionBroker");
var ws = new XSockets.WebSocket("wss://rtcplaygrouund.azurewebsites.net:443", ["connectionbroker"], {
ctx: '23fbc61c-541a-4c0d-b46e-1a1f6473720a'
});
var onError = function (err) {
trace("error", arguments);
};
var recordMediaStream = function (stream) {
if ("MediaRecorder" in window === false) {
trace("Recorder not started MediaRecorder not available in this browser. ");
return;
}
var recorder = new XSockets.MediaRecorder(stream);
recorder.start();
trace("Recorder started.. ");
recorder.oncompleted = function (blob, blobUrl) {
trace("Recorder completed.. ");
var li = document.createElement("li");
var download = document.createElement("a");
download.textContent = new Date();
download.setAttribute("download", XSockets.Utils.randomString(8) + ".webm");
download.setAttribute("href", blobUrl);
li.appendChild(download);
$("ul").appendChild(li);
};
};
var addRemoteVideo = function (peerId, mediaStream) {
var remoteVideo = document.createElement("video");
remoteVideo.setAttribute("autoplay", "autoplay");
remoteVideo.setAttribute("rel", peerId);
attachMediaStream(remoteVideo, mediaStream);
$(".remotevideos").appendChild(remoteVideo);
};
var onConnectionLost = function (remotePeer) {
trace("onconnectionlost", arguments);
var peerId = remotePeer.PeerId;
var videoToRemove = $("video[rel='" + peerId + "']");
$(".remotevideos").removeChild(videoToRemove);
};
var oncConnectionCreated = function () {
console.log(arguments, rtc);
trace("oncconnectioncreated", arguments);
};
var onGetUerMedia = function (stream) {
trace("Successfully got some userMedia , hopefully a goat will appear..");
rtc.connectToContext(); //connect to the current context?
};
var onRemoteStream = function (remotePeer) {
addRemoteVideo(remotePeer.PeerId, remotePeer.stream);
trace("Opps, we got a remote stream. lets see if its a goat..");
};
var onLocalStream = function (mediaStream) {
trace("Got a localStream", mediaStream.id);
attachMediaStream($(".localvideo video "), mediaStream);
//if user click, video , call the recorder
$(".localvideo video ").addEventListener("click", function () {
recordMediaStream(rtc.getLocalStreams()[0]);
});
};
var onContextCreated = function (ctx) {
trace("RTC object created, and a context is created - ", ctx);
rtc.getUserMedia(rtc.userMediaConstraints.hd(false), onGetUerMedia, onError);
};
var onOpen = function () {
trace("Connected to the brokerController - 'connectionBroker'");
rtc = new XSockets.WebRTC(this);
rtc.onlocalstream = onLocalStream;
rtc.oncontextcreated = onContextCreated;
rtc.onconnectioncreated = oncConnectionCreated;
rtc.onconnectionlost = onConnectionLost;
rtc.onremotestream = onRemoteStream;
rtc.onanswer = function (event) {
};
rtc.onoffer = function (event) {
};
};
var onConnected = function () {
trace("connection to the 'broker' server is established");
trace("Try get the broker controller form server..");
broker = ws.controller("connectionbroker");
broker.onopen = onOpen;
};
ws.onconnected = onConnected;
});
document.addEventListener("DOMContentLoaded", main);
</script>

Sur la Ligne numéro 89 dans mon cas, le code OnrecordComplete effectivement ajouter un lien de fichier d'enregistrement, si vous cliquez sur ce lien, il va commencer le téléchargement, vous pouvez enregistrer ce chemin d'accès à votre serveur en tant que fichier.

L'Enregistrement du code ressemble à ceci

recorder.oncompleted = function (blob, blobUrl) {
trace("Recorder completed.. ");
var li = document.createElement("li");
var download = document.createElement("a");
download.textContent = new Date();
download.setAttribute("download", XSockets.Utils.randomString(8) + ".webm");
download.setAttribute("href", blobUrl);
li.appendChild(download);
$("ul").appendChild(li);
};

La blobUrl contient le chemin d'accès. J'ai résolu mon problème avec cela, espérons que quelqu'un va trouver cela utile

InformationsquelleAutor uniqueNt

-4

Techniquement, vous pouvez utiliser FFMPEG sur le backend de mix vidéo et audio
- ouais mais comment voulez-vous y arriver?
InformationsquelleAutor EugeneB

Vous devez vous connecter pour publier un commentaire.