如何使用JavaScript(WebRTC)在浏览器中录制带音频的视频 _WebRTC

本文概述

A.使用VideoJS记录
B.使用RecordRTC
将Blob视频保存在服务器中

几年前, 如果要与用户媒体设备(相机和麦克风)进行交互, 则必须在浏览器中使用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="http://www.srcmini.com/node_modules/video.js/dist/video-js.min.css" rel="stylesheet"> < !-- Style of VideoJS --> < link href="http://www.srcmini.com/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="http://www.srcmini.com/node_modules/video.js/dist/video.min.js"> < /script> < !-- Load RecordRTC core and adapter --> < script src="http://www.srcmini.com/node_modules/recordrtc/RecordRTC.js"> < /script> < script src="http://www.srcmini.com/node_modules/webrtc-adapter/out/adapter.js"> < /script> < !-- Load VideoJS Record Extension --> < script src="http://www.srcmini.com/dist/videojs.record.js"> < /script> < script> var videoMaxLengthInSeconds = 120; // Inialize the video playervar 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 startupvideojs.log('Using video.js', videojs.VERSION, 'with videojs-record', videojs.getPluginVersion('record'), 'and recordrtc', RecordRTC.version); }); // error handling for getUserMediaplayer.on('deviceError', function() {console.log('device error:', player.deviceErrorCode); }); // Handle error events of the video playerplayer.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>

【如何使用JavaScript(WebRTC)在浏览器中录制带音频的视频】记录器功能非常简单, 借助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 streamand 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="http://img.readke.com/220524/0643402I4-5.jpg"> < /script> < script src="http://img.readke.com/220524/0643401054-6.jpg"> < /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 instancevar video = document.getElementById('my-preview'); var recorder; // When the user clicks on start video recordingdocument.getElementById('btn-start-recording').addEventListener("click", function(){// Disable start recording buttonthis.disabled = true; // Request access to the media devicesnavigator.mediaDevices.getUserMedia({audio: true, video: true}).then(function(stream) {// Display a live preview on the video element of the pagesetSrcObject(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 recorderrecorder = new RecordRTCPromisesHandler(stream, {mimeType: 'video/webm', bitsPerSecond: 128000}); // Start recording the videorecorder.startRecording().then(function() {console.info('Recording video ...'); }).catch(function(error) {console.error('Cannot start video recording: ', error); }); // release stream on stopRecordingrecorder.stream = stream; // Enable stop recording buttondocument.getElementById('btn-stop-recording').disabled = false; }).catch(function(error) {console.error("Cannot access media devices: ", error); }); }, false); // When the user clicks on Stop video recordingdocument.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 elementvar videoBlob = recorder.getBlob(); video.src = http://www.srcmini.com/URL.createObjectURL(videoBlob); video.play(); // Unmute video on previewvideo.muted = false; // Stop the device streamingrecorder.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 availableplayer.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 filevar formData = http://www.srcmini.com/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" filexhr('./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 serverif (!move_uploaded_file($_FILES["video"]["tmp_name"], $uploadDirectory)) {echo("Couldn't upload video !"); }}else{echo "No file uploaded"; } ?>

这将检查” video” 参数中是否有上传的文件, 并将其写入服务器中(在本例中为PHP脚本的当前目录中), 创建一个名为myvideo.webm的文件, 并在客户端记录内容。
编码愉快！