srcmini本文概述
几年前, 如果要与用户媒体设备(相机和麦克风)进行交互, 则必须在浏览器中使用Flash。如今, 随着JavaScript API的不断开发和创新, WebRTC逐渐取代了过时的闪存, 因此你也将能够使用getUserMedia API来录制视频。在本文中, 我们将向你展示两种使用JavaScript从用户网络摄像头录制视频(和音频)的方法。若要使用JavaScript和WebRTC录制视频, 本文中提到的两个选项都使用由@ muaz-khan编写和维护的开源库RecordRTC。要了解有关此库的更多信息, 请访问Github上的官方存储库或在此处签出RecordRTC的官方演示。
两种方法最终都将在包含记录器视频和音频的浏览器中生成一个Blob, 我们将基本介绍如何在客户端记录视频, 以及如何使用Blob将Blob上传到服务器的一个小示例PHP, 但是在本文中我们不会写太多有关服务器端逻辑的内容。
注意
两种方法都会创建Webm格式的视频, 因此, 如果你需要另一种格式的视频, 则可能要使用服务器端逻辑将其转换为所需的格式, 例如ffmpeg。
话虽如此, 让我们开始吧！
A.使用VideoJS记录
注意
如果你不想自己配置音频过滤器, 比特率和很多你不感兴趣的东西而弄乱了很多代码, 那么这可能是轻松实现使用JavaScript的录像机的最佳解决方案。
你必须在浏览器中轻松录制视频的第一个选项是使用VideoJS Record库。这个由@ collab-project维护的库使用了3个额外的库来完成一个功能强大且功能强大的录像机, 同时照顾了用户体验。如果你愿意实现使用网络摄像机录制视频的功能, 那么此插件正是你所需要的。
首先, 在页面上包含Video.js, VideoJS在此库的顶部而不是纯视频标签上运行。然后包含需要的RecordJS副本的VideoJS记录, 然后继续进行初始化。以下代码段显示了VideoJS的基本示例, 该示例同时记录视频和音频：
注意
Video.js和VideoJS Record是2个不同的库。 Video.js是专为HTML5世界打造的网络视频播放器。 VideoJS是Video.js的插件, 可让你借助RecordRTC记录用户的摄像机。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Audio/Video Example - Record Plugin for Video.js</title>
<!-- Include Video.js stylesheet (https://videojs.com/) -->
<link href="../node_modules/video.js/dist/video-js.min.css" rel="stylesheet">
<!-- Style of VideoJS -->
<link href="../dist/css/videojs.record.css" rel="stylesheet">
<style>
/* change player background color */
#myVideo {
background-color: #9ab87a;
}
</style>
</head>
<body>
<!-- Create the preview video element -->
<video id="myVideo" class="video-js vjs-default-skin"></video>
<!-- Load video.js -->
<script src="../node_modules/video.js/dist/video.min.js"></script>
<!-- Load RecordRTC core and adapter -->
<script src="../node_modules/recordrtc/RecordRTC.js"></script>
<script src="../node_modules/webrtc-adapter/out/adapter.js"></script>
<!-- Load VideoJS Record Extension -->
<script src="../dist/videojs.record.js"></script>
<script>
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);
});
</script>
</body>
</html>
记录器功能非常简单, 借助Video.js, 将初始化一个动态视频播放器, 然后提到的插件VideoJS为该视频播放器创建一个扩展, 该扩展允许你借助RecordRTC记录由用户摄像机生成的流和麦克风。
注意
如果你的用户买不起像样的相机, 请不要期待4K视频:)。
你可以在此处观看有关如何使用VideoJS Record使用音频录制视频的实时演示。有关此库的更多信息, 请访问Github上的官方存储库。
B.使用RecordRTC
如果你不想使用第一个库, 因为发现它也有点笨拙, 其中包括3个库, 则可以在RecordRTC的”原始”版本中自由实现。在此过程中, 其逻辑本身与以前的库相同。用户将需要使用getUserMedia API授予对摄像头和麦克风的访问权限。使用此流, RecordRTC将能够开始视频录制。如前所述, 你将需要来自官方Github存储库的RecordRTC和RecordRTC适配器脚本, 该存储库为getUserMedia和插件中使用的其他浏览器API提供跨浏览器支持。
最后的例子
下面的示例演示如何使用RecordRTC(基于Promise的版本)实现基本的启动/停止记录器：
<!-- 1. Include action buttons play/stop -->
<button id="btn-start-recording">Start Recording</button>
<button id="btn-stop-recording" disabled="disabled">Stop Recording</button>
<!--
2. Include a video element that will display the current video stream
and as well to show the recorded video at the end.
-->
<hr>
<video id="my-preview" controls autoplay></video>
<!--
3. Include the RecordRTC library and the latest adapter.
Note that you may want to host these scripts in your own server
-->
<script src="https://cdn.webrtc-experiment.com/RecordRTC.js"></script>
<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<!-- 4. Initialize and prepare the video recorder logic -->
<script>
// 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);
</script>你可以在下面的小提琴中看到此代码的作用：
当我们谈论使用JavaScript在浏览器中录制视频时, RecordRTC是圣杯, 但是, 尽管有些事情很容易配置, 但其他一些事情可能很难理解和实现。该库供其他许多人使用, 它们基本上是具有预定义设置的包装程序, 这些设置通常可在每种浏览器上使用(如VideoJS Record)。要了解有关Record RTC的更多信息, 请访问Github上的官方存储库。
将Blob视频保存在服务器中
上面提到的两个解决方案都将产生一个包含视频的可操作Blob, 在我们的代码中, 该Blob被命名为videoBlob, 你需要将其发送到服务器以将其保存为视频。你可以使用FormData API通过JavaScript轻松上传blob, 例如, 在我们的使用VideoJS库的示例中, 你可以使用以下方法上传blob：
// 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), 我们的服务器逻辑将非常简单：
<?php
if(isset($_FILES["video"])){
// Define a name for the file
$fileName = "myvideo.webm";
// In this case the current directory of the PHP script
$uploadDirectory = './'. $fileName;
// Move the file to your server
if (!move_uploaded_file($_FILES["video"]["tmp_name"], $uploadDirectory)) {
echo("Couldn't upload video !");
}
}else{
echo "No file uploaded";
}
?>这将检查” video”参数中是否有上传的文件, 并将其写入服务器中(在本例中为PHP脚本的当前目录中), 创建一个名为myvideo.webm的文件, 并在客户端记录内容。
编码愉快！
评论前必须登录！
注册