在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:streamproc/MediaStreamRecorder开源软件地址:https://github.com/streamproc/MediaStreamRecorder开源编程语言:JavaScript 99.1%开源软件介绍:MediaStreamRecorder.js - DemosDemos using MediaStreamRecorder.js library
A cross-browser implementation to record
You can record above four options altogether (in single container). MediaStreamRecorder is useful in scenarios where you're planning to submit/upload recorded blobs in realtime to the server! You can get blobs after specific time-intervals. Browser Support
How to link scripts?You can install scripts using NPM: npm install msr
# or via "bower"
bower install msr Now try Test on NPMvar MediaStreamRecorder = require('msr');
console.log('require-msr', MediaStreamRecorder);
console.log('\n\n-------\n\n');
var recorder = new MediaStreamRecorder({});
console.log('MediaStreamRecorder', recorder);
console.log('\n\n-------\n\n');
var multiStreamRecorder = new MediaStreamRecorder.MultiStreamRecorder([]);
console.log('MultiStreamRecorder', multiStreamRecorder);
Or try
Then link single/standalone "MediaStreamRecorder.js" file: <script src="./node_modules/msr/MediaStreamRecorder.js"> </script>
<!-- or bower -->
<script src="./bower_components/msr/MediaStreamRecorder.js"></script>
<!-- CDN -->
<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<!-- WWW -->
<script src="https://www.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<!-- or link specific release -->
<script src="https://github.com/streamproc/MediaStreamRecorder/releases/download/1.3.4/MediaStreamRecorder.js"></script> Record audio+video<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script>
var mediaConstraints = {
audio: true,
video: true
};
navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
function onMediaSuccess(stream) {
var mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'video/webm';
mediaRecorder.ondataavailable = function (blob) {
// POST/PUT "Blob" using FormData/XHR2
var blobURL = URL.createObjectURL(blob);
document.write('<a href="' + blobURL + '">' + blobURL + '</a>');
};
mediaRecorder.start(3000);
}
function onMediaError(e) {
console.error('media error', e);
}
</script> Record Multiple Videos
var arrayOfStreams = [yourVideo, screen, remoteVideo1, remoteVideo2];
var multiStreamRecorder = new MultiStreamRecorder( arrayOfStreams ); You can add additional streams at runtime: multiStreamRecorder.addStream( anotherStream ); Currently, you can only record 4-maximum videos in single WebM container. Record audio/wav<script src="https://cdn.webrtc-experiment.com/MediaStreamRecorder.js"> </script>
<script>
var mediaConstraints = {
audio: true
};
navigator.getUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
function onMediaSuccess(stream) {
var mediaRecorder = new MediaStreamRecorder(stream);
mediaRecorder.mimeType = 'audio/wav'; // check this line for audio/wav
mediaRecorder.ondataavailable = function (blob) {
// POST/PUT "Blob" using FormData/XHR2
var blobURL = URL.createObjectURL(blob);
document.write('<a href="' + blobURL + '">' + blobURL + '</a>');
};
mediaRecorder.start(3000);
}
function onMediaError(e) {
console.error('media error', e);
}
</script> How to manually stop recordings?mediaRecorder.stop(); How to pause recordings?mediaRecorder.pause(); How to resume recordings?mediaRecorder.resume(); How to save recordings?// invoke save-as dialog for all recorded blobs
mediaRecorder.save();
// or pass external blob/file
mediaRecorder.save(YourExternalBlob, 'FileName.webm'); Upload to PHP ServerYour HTML file: mediaRecorder.ondataavailable = function(blob) {
// upload each blob to PHP server
uploadToPHPServer(blob);
};
function uploadToPHPServer(blob) {
var file = new File([blob], 'msr-' + (new Date).toISOString().replace(/:|\./g, '-') + '.webm', {
type: 'video/webm'
});
// create FormData
var formData = new FormData();
formData.append('video-filename', file.name);
formData.append('video-blob', file);
makeXMLHttpRequest('https://path-to-your-server/save.php', formData, function() {
var downloadURL = 'https://path-to-your-server/uploads/' + file.name;
console.log('File uploaded to this path:', downloadURL);
});
}
function makeXMLHttpRequest(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback();
}
};
request.open('POST', url);
request.send(data);
} Save.php file: <?php
// via: https://github.com/muaz-khan/RecordRTC/blob/master/RecordRTC-to-PHP/save.php
header("Access-Control-Allow-Origin: *");
function selfInvoker()
{
if (!isset($_POST['audio-filename']) && !isset($_POST['video-filename'])) {
echo 'PermissionDeniedError';
return;
}
$fileName = '';
$tempName = '';
if (isset($_POST['audio-filename'])) {
$fileName = $_POST['audio-filename'];
$tempName = $_FILES['audio-blob']['tmp_name'];
} else {
$fileName = $_POST['video-filename'];
$tempName = $_FILES['video-blob']['tmp_name'];
}
if (empty($fileName) || empty($tempName)) {
echo 'PermissionDeniedError';
return;
}
$filePath = 'uploads/' . $fileName;
// make sure that one can upload only allowed audio/video files
$allowed = array(
'webm',
'wav',
'mp4',
'mp3',
'ogg'
);
$extension = pathinfo($filePath, PATHINFO_EXTENSION);
if (!$extension || empty($extension) || !in_array($extension, $allowed)) {
echo 'PermissionDeniedError';
continue;
}
if (!move_uploaded_file($tempName, $filePath)) {
echo ('Problem saving file.');
return;
}
echo ($filePath);
}
selfInvoker();
?> Regarding PHP upload issues: Don't forget to create uploads directory here:
API Documentation
|