C++ 如何使用 webRTC 和基于服务器的对等连接录制网络摄像头和音频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16571044/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to record webcam and audio using webRTC and a server-based Peer connection
提问by Dave Hilditch
I would like to record the users webcam and audio and save it to a file on the server. These files would then be able to be served up to other users.
我想记录用户的网络摄像头和音频并将其保存到服务器上的文件中。然后这些文件将能够提供给其他用户。
I have no problems with playback, however I'm having problems getting the content to record.
我在播放方面没有问题，但是我在获取要录制的内容时遇到了问题。
My understanding is that the getUserMedia .record()function has not yet been written - only a proposal has been made for it so far.
我的理解是 getUserMedia.record()函数尚未编写 - 到目前为止只提出了一个建议。
I would like to create a peer connection on my server using the PeerConnectionAPI. I understand this is a bit hacky, but I'm thinking it should be possible to create a peer on the server and record what the client-peer sends.
我想使用 PeerConnectionAPI 在我的服务器上创建对等连接。我知道这有点 hacky，但我认为应该可以在服务器上创建一个对等点并记录客户端对等点发送的内容。
If this is possible, I should then be able to save this data to flv or any other video format.
如果可能的话，我应该能够将这些数据保存为 flv 或任何其他视频格式。
My preference is actually to record the webcam + audio client-side, to allow the client to re-record videos if they didn't like their first attempt before uploading. This would also allow for interruptions in network connections. I've seen some code which allows recording of individual 'images' from the webcam by sending the data to the canvas - that's cool, but I need the audio too.
我的偏好实际上是在客户端录制网络摄像头 + 音频，如果客户端在上传前不喜欢他们的第一次尝试，则允许他们重新录制视频。这也将允许网络连接中断。我看过一些代码，它允许通过将数据发送到画布来记录来自网络摄像头的单个“图像”——这很酷，但我也需要音频。
Here's the client side code I have so far:
这是我到目前为止的客户端代码：
<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>
回答by igracia
You should definitely have a look at Kurento. It provides a WebRTC server infrastructure that allows you to record from a WebRTC feed and much more. You can also find some examples for the application you are planning here. It is really easy to add recording capabilities to that demo, and store the media file in a URI (local disk or wherever).
你绝对应该看看Kurento。它提供了一个 WebRTC 服务器基础设施，允许您从 WebRTC 提要等进行记录。您还可以在此处找到您正在规划的应用程序的一些示例。向该演示添加录制功能并将媒体文件存储在 URI（本地磁盘或任何地方）中非常容易。
The project is licensed under LGPLApache 2.0
该项目在LGPLApache 2.0下获得许可
EDIT 1
编辑 1
Since this post, we've added a new tutorial that shows how to add the recorder in a couple of scenarios
自从这篇文章以来，我们添加了一个新教程，展示了如何在几个场景中添加记录器
- kurento-hello-world-recording: simple recording tutorial, showing the different capabilities of the recording endpoint.
- kurento-one2one-recording: How to record a one-to-one communication in the media server.
- kurento-hello-world-repository: use an external repository to record the file.
- kurento-hello-world-recording：简单的录制教程，展示了录制端点的不同功能。
- kurento-one2one-recording：如何在媒体服务器中记录一对一的通信。
- kurento-hello-world-repository：使用外部存储库来记录文件。
Disclaimer: I'm part of the team that develops Kurento.
免责声明：我是开发 Kurento 团队的一员。
回答by Dmitry
回答by mido
I believe using kurento or other MCUs just for recording videos would be bit of overkill, especially considering the fact that Chrome has MediaRecorderAPI support from v47 and Firefox since v25. So at this junction, you might not even need an external js library to do the job, try this demo I made to record video/ audio using MediaRecorder:
我相信仅使用 kurento 或其他 MCU 来录制视频会有点矫枉过正，尤其是考虑到 Chrome从 v47 和 Firefox 自 v25 开始就支持MediaRecorderAPI。所以在这个路口，你甚至可能不需要外部 js 库来完成这项工作，试试我制作的这个使用 MediaRecorder 录制视频/音频的演示：
Demo- would work in chrome and firefox (intentionally left out pushing blob to server code)
演示- 可以在 chrome 和 firefox 中工作（故意省略将 blob 推送到服务器代码）
If running firefox, you could test it in here itself( chrome needs https):
如果运行 firefox，你可以在这里测试它本身（chrome 需要https）：
'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);
} button {
margin: 10px 5px;
}
li {
margin: 10px;
}
body {
width: 90%;
max-width: 960px;
margin: 0px auto;
}
#btns {
display: none;
}
h1 {
margin-bottom: 100px;
}<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>回答by Konga Raju
yes, as you understood, MediaStreamRecorder is currently unimplemented.
是的，正如您所理解的，MediaStreamRecorder 目前尚未实现。
MediaStreamRecorder is a WebRTC API for recording getUserMedia() streams . It allows web apps to create a file from a live audio/video session.
MediaStreamRecorder 是一个用于记录 getUserMedia() 流的 WebRTC API。它允许网络应用程序从实时音频/视频会话创建文件。
alternatively you may do like this http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermediabut audio is missing part.
或者，您可以这样做http://ericbidelman.tumblr.com/post/31486670538/creating-webm-video-from-getusermedia但缺少音频部分。
回答by Mifeng
You can use RecordRTC-together, which is based on RecordRTC.
您可以使用基于 RecordRTC 的 RecordRTC-together。
It supports recording video and audio together in separate files. You will need tool like ffmpegto merge two files into one on server.
它支持在单独的文件中一起录制视频和音频。您将需要像ffmpeg在服务器上将两个文件合并为一个的工具。
回答by Bob42
Web Call Server 4can record WebRTC audio and video to WebM container. The recording is done using Vorbis codec for audio and VP8 codec for video. Iniitial WebRTC codecs are Opus or G.711 and VP8. So, the server-side recording requires either Opus/G.711 to Vorbis server-side transcoding or VP8-H.264 transcoding if it is necessary to use another container, i.e. AVI.
Web Call Server 4可以将 WebRTC 音频和视频录制到 WebM 容器中。录制使用 Vorbis 编解码器进行音频和 VP8 编解码器进行视频。最初的 WebRTC 编解码器是 Opus 或 G.711 和 VP8。因此，如果需要使用其他容器，即 AVI，服务器端录制需要 Opus/G.711 到 Vorbis 服务器端转码或 VP8-H.264 转码。
回答by uniqueNt
For the record I also don't have enough knowledge about this,
作为记录，我对此也没有足够的了解，
But I found this on Git hub-
但是我在 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>
On Line number 89 in my case code OnrecordComplete actually append a link of recorder file, if you will click on that link it will start the download, you can save that path to your server as a file.
在我的案例代码中，在第 89 行代码 OnrecordComplete 实际上附加了一个记录器文件的链接，如果您单击该链接，它将开始下载，您可以将该路径保存为您的服务器的文件。
The Recording code looks something like this
录制代码看起来像这样
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);
};
The blobUrl holds the path. I solved my problem with this, hope someone will find this useful
blobUrl 保存路径。我用这个解决了我的问题，希望有人会觉得这很有用
回答by EugeneB
Technically you can use FFMPEG on backend to mix video and audio
从技术上讲，您可以在后端使用 FFMPEG 来混合视频和音频
