Содержание
Пару лет назад Flash была необходима в вашем браузере, если вы хотите взаимодействовать с пользовательскими мультимедийными устройствами (камерой и микрофоном). Сегодня, благодаря постоянному развитию и инновациям в API-интерфейсах JavaScript, WebRTC пришла на смену устаревшей флэш-памяти, поэтому вы также сможете записывать видео с помощью API getUserMedia. В этой статье мы покажем вам 2 способа записи видео (и аудио) с веб-камеры пользователя с использованием JavaScript. Для записи видео с использованием JavaScript и WebRTC обе упомянутые опции в этой статье используют библиотеку с открытым исходным кодом RecordRTC, написанную и поддерживаемую @ Муаз-хан. Чтобы узнать больше об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь или оформить заказ официальная демоверсия RecordRTC здесь.
Оба подхода завершатся генерацией BLOB-объекта в браузере, который содержит видео и аудио устройства записи. Мы рассмотрим в основном, как записать видео на стороне клиента, и небольшой пример того, как вы можете загрузить BLOB-объект на свой сервер, используя PHP, однако мы не будем много писать о серверной логике в этой статье.
Заметка
Оба метода создадут видео в формате Webm, поэтому, если вам нужно это видео в другом формате, вы можете использовать серверную логику для преобразования их в то, что вы хотите, например, ffmpeg.
Сказав это, давайте начнем!
А. Использование VideoJS Record
Заметка
Если вы не хотите возиться с большим количеством кода самостоятельно, настраивая аудиофильтры, скорости передачи битов и, возможно, многие вещи, которые вас не интересуют, это может быть лучшим решением для простой реализации видеорегистратора с JavaScript ,
Первый вариант, который вы должны легко записать видео в браузере, это использование Библиотека VideoJS Record. Эта библиотека поддерживается @ Сотрудни-проект использует 3 дополнительные библиотеки для создания потрясающего и очень надежного видеомагнитофона, одновременно заботясь о пользовательском опыте. Если вы хотите реализовать функцию записи видео с помощью веб-камеры, этот плагин — именно то, что вам нужно.
Начните с включения Video.js на вашей странице, VideoJS работает поверх этой библиотеки вместо простого тега видео. Затем включите Запись VideoJS для этого также требуется копия упомянутой библиотеки RecordRTC и продолжить инициализацию. Следующий фрагмент демонстрирует базовый пример VideoJS, который записывает видео и аудио одновременно:
Заметка
Video.js а также VideoJS Record 2 разные библиотеки. Video.js — это веб-видеоплеер, созданный с нуля для мира HTML5. VideoJS — это плагин для Video.js, который позволяет вам записывать камеру пользователя с помощью RecordRTC.
Audio/Video Example - Record Plugin for Video.js
/* change player background color */
#myVideo {
background-color: #9ab87a;
}
var videoMaxLengthInSeconds = 120;
// Inialize the video player
var player = videojs("myVideo", {
controls: true,
width: 720,
height: 480,
fluid: false,
plugins: {
record: {
audio: true,
video: true,
maxLength: videoMaxLengthInSeconds,
debug: true,
videoMimeType: "video/webm;codecs=H264"
}
}
}, function(){
// print version information at startup
videojs.log(
'Using video.js', videojs.VERSION,
'with videojs-record', videojs.getPluginVersion('record'),
'and recordrtc', RecordRTC.version
);
});
// error handling for getUserMedia
player.on('deviceError', function() {
console.log('device error:', player.deviceErrorCode);
});
// Handle error events of the video player
player.on('error', function(error) {
console.log('error:', error);
});
// user clicked the record button and started recording !
player.on('startRecord', function() {
console.log('started recording! Do whatever you need to');
});
// user completed recording and stream is available
// Upload the Blob to your server or download it locally !
player.on('finishRecord', function() {
// the blob object contains the recorded data that
// can be downloaded by the user, stored on server etc.
var videoBlob = player.recordedData.video;
console.log('finished recording: ', videoBlob);
});
Функция записи довольно проста, с помощью Video.js будет инициализирован динамический видеоплеер, затем упомянутый плагин VideoJS создает расширение для видеоплеера, которое позволяет записывать с помощью RecordRTC поток, сгенерированный камерой пользователя. и микрофон.
Заметка
Если ваш пользователь не может позволить себе приличную камеру, не ждите видео 4K :).
Ты можешь видеть живая демонстрация того, как записать видео с аудио с помощью VideoJS Record здесь. Для получения дополнительной информации об этой библиотеке, пожалуйста, посетите официальный репозиторий на Github здесь.
Б. Использование RecordRTC
Если вы не хотите использовать первую библиотеку, потому что она слишком тяжелая, включая 3 библиотеки, вы можете свободно использовать ее в «сырой» версии RecordRTC. Сама логика в этом процессе та же, что и в предыдущей библиотеке. Пользователь должен будет предоставить доступ к камере и микрофону с помощью API getUserMedia. Используя этот поток, RecordRTC сможет начать запись видео. Как упоминалось ранее, вам понадобятся скрипты RecordRTC и RecordRTC. из официального репозитория Github, это обеспечивает кросс-браузерную поддержку для getUserMedia и других браузерных API, используемых в плагине.
Последний пример
В следующем примере показано, как реализовать базовый рекордер запуска / остановки с использованием RecordRTC (версия на основе обещаний):
Start Recording
Stop Recording
// Store a reference of the preview video element and a global reference to the recorder instance
var video = document.getElementById('my-preview');
var recorder;
// When the user clicks on start video recording
document.getElementById('btn-start-recording').addEventListener("click", function(){
// Disable start recording button
this.disabled = true;
// Request access to the media devices
navigator.mediaDevices.getUserMedia({
audio: true,
video: true
}).then(function(stream) {
// Display a live preview on the video element of the page
setSrcObject(stream, video);
// Start to display the preview on the video element
// and mute the video to disable the echo issue !
video.play();
video.muted = true;
// Initialize the recorder
recorder = new RecordRTCPromisesHandler(stream, {
mimeType: 'video/webm',
bitsPerSecond: 128000
});
// Start recording the video
recorder.startRecording().then(function() {
console.info('Recording video ...');
}).catch(function(error) {
console.error('Cannot start video recording: ', error);
});
// release stream on stopRecording
recorder.stream = stream;
// Enable stop recording button
document.getElementById('btn-stop-recording').disabled = false;
}).catch(function(error) {
console.error("Cannot access media devices: ", error);
});
}, false);
// When the user clicks on Stop video recording
document.getElementById('btn-stop-recording').addEventListener("click", function(){
this.disabled = true;
recorder.stopRecording().then(function() {
console.info('stopRecording success');
// Retrieve recorded video as blob and display in the preview element
var videoBlob = recorder.getBlob();
video.src = URL.createObjectURL(videoBlob);
video.play();
// Unmute video on preview
video.muted = false;
// Stop the device streaming
recorder.stream.stop();
// Enable record button again !
document.getElementById('btn-start-recording').disabled = false;
}).catch(function(error) {
console.error('stopRecording failure', error);
});
}, false);
Вы можете увидеть этот код в действии в следующей скрипке:
RecordRTC — это Святой Грааль, когда мы говорим о записи видео в браузере с помощью JavaScript, однако, хотя некоторые вещи легко настраиваются, другие вещи могут быть немного сложными для понимания и реализации. Эта библиотека используется многими другими, которые в основном являются обертками с предопределенными настройками, которые обычно работают в любом браузере (например, VideoJS Record). Чтобы узнать больше о Record RTC, пожалуйста, посетите официальный репозиторий на Github.
Сохранение блоб видео на вашем сервере
Оба упомянутых решения будут создавать управляемый BLOB-объект, содержащий наше видео, в нашем коде этот BLOB-объект называется videoBlob и вам нужно будет отправить это на ваш сервер, чтобы сохранить как видео. Вы можете легко загрузить большой двоичный объект с помощью JavaScript с помощью API-интерфейса FormData, например, в нашем примере с использованием библиотеки VideoJS вы можете загрузить большой двоичный объект следующим способом:
// user completed recording and stream is available
player.on('finishRecord', function() {
// the blob object contains the recorded data that
// can be downloaded by the user, stored on server etc.
console.log('finished recording: ', player.recordedData);
// Create an instance of FormData and append the video parameter that
// will be interpreted in the server as a file
var formData = new FormData();
formData.append('video', player.recordedData.video);
// Execute the ajax request, in this case we have a very simple PHP script
// that accepts and save the uploaded "video" file
xhr('./upload-video.php', formData, function (fName) {
console.log("Video succesfully uploaded !");
});
// Helper function to send
function xhr(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function () {
if (request.readyState == 4 && request.status == 200) {
callback(location.href + request.responseText);
}
};
request.open('POST', url);
request.send(data);
}
});Логика на сервере полностью зависит от вас, вам нужно только принять файлы и извлечь тот, который идентифицирован с тем же именем, что и загруженный параметр, например, в нашем скрипте мы отправили BLOB-объект с именем «video», поэтому с помощью PHP (upload-video.php) логика нашего сервера была бы такой простой, как:
Это проверит, есть ли загруженный файл в параметре «video», и запишет его на ваш сервер, в данном случае в текущую директорию скрипта PHP, создав файл myvideo.webm с записанным контентом на стороне клиента.
