VideoRecorderJs, 用于在浏览器中录制视频和音频的纯Html5脚本

分享于 

9分钟阅读

GitHub

  繁體
This project is using webRTC's getUserMedia() spec to record audio and video both in the client side and upload as chunks to the server, current project support latest versions of Opera and Chrome and hoping to provide support for Firefox in near future.
  • 源代码名称:VideoRecorderJs
  • 源代码网址:http://www.github.com/imalhasaranga/VideoRecorderJs
  • VideoRecorderJs源代码文档
  • VideoRecorderJs源代码下载
  • Git URL:
    git://www.github.com/imalhasaranga/VideoRecorderJs.git
    Git Clone代码到本地:
    git clone http://www.github.com/imalhasaranga/VideoRecorderJs
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/imalhasaranga/VideoRecorderJs
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    VideoAudioRecorderJs

    客户端视频&音频录制的单库

    该项目的旧版本支持使用whammy.js和Recorder.js实现的视频音频录制机制,但在1.0.0版本中,我们使用MediaStream Recording Spec作为主录制库,但是不支持该新规范的旧版浏览器将回退到旧版本,以下是脚本当前支持的浏览器:

    chromeFireFoxOpera

    注:不支持Safari

    用法

    NPM:npm install videorecorderjs --save Bower:bower install videorecorderjs --save

    或链接脚本文件

    <scriptsrc="../dist/VideoRecorderJS.min.js"type="text/javascript"></script>

    初始化

     var virec = new VideoRecorderJS.init(
     {
     resize: 0.8,
     webpquality: 0.9,
     framerate: 15,
     videotagid:"viredemovideoele",
     videoWidth:"640",
     videoHeight:"480",
     log: true,
     workerPath :"../dist/recorderWorker.js"
     },
     function () {
     //success callback. this will fire if browsers supports
     },
     function (err) {
     //onerror callback, this will fire for mediaErrors
     if (err.name =="BROWSER_NOT_SUPPORTED") {
     //handler code goes here
     } else if (err.name =="PermissionDeniedError") {
     //handler code goes here
     } else if (err.name =="NotFoundError") {
     //handler code goes here
     } else {
     throw 'Unidentified Error.....';
     }
     }
     );
    resize:表示录制的视频字幕relative到实际大小webpquality:这表示视频中单个帧的质量framerate:帧速率

    一个完整的示例

    检查demo文件夹的工作示例

    <html>
    <head>
    </head>
    <body>
    <divid="videorecorder">
     <videoid="viredemovideoele"></video>
     <spanstyle="font-size:20px;"id="countdown"></span>
    </div>
    <inputid="playback"value="PlayBack"type="button"/>
    <inputid="clearrecording"value="Clear Recording"type="button"/>
    <inputid="startRecrodBut1"value="Start Recording"type="button"/>
    <inputid="stopRecBut1"value="Stop Recording"type="button"/>
    <inputid="uploadrecord"value="Upload Recording"type="button"/>
    </br>
    <pid="status"></p>
    <videoid="recordedvideo"controls></video>
    <audioid="audiored"controls></audio>
    <aid="downloadurl">Download</a>
    <divid="progressNumber"style="font-size:20px;"></div>
    <scriptsrc="../dist/VideoRecorderJS.min.js"type="text/javascript"></script>
    <scripttype="text/javascript">var startRecord =document.getElementById("startRecrodBut1");var stopRecord =document.getElementById("stopRecBut1");var countdownElement =document.getElementById("countdown");var playBackRecord =document.getElementById("playback");var discardRecordng =document.getElementById("clearrecording");var uploadrecording =document.getElementById("uploadrecord");var progressNumber =document.getElementById("progressNumber");var virec =newVideoRecorderJS.init( { resize:0.8, // recorded video dimentions are 0.4 times smaller than the original webpquality:0.5, // chrome and opera support webp imags, this is about the aulity of a frame framerate:15, // recording frame rate videotagid:"viredemovideoele", videoWidth:"640", videoHeight:"480", log:true, mediaRecorderType :"webscript", workerPath :"../dist/recorderWorker.js" },function () {//success callback. this will fire if browsers supports },function (err) {//onerror callback, this will fire for mediaErrorsif (err.name=="BROWSER_NOT_SUPPORTED") {//handler code goes here } elseif (err.name=="PermissionDeniedError") {//handler code goes here } elseif (err.name=="NotFoundError") {//handler code goes here } else {throw'Unidentified Error.....'; } } );startRecord.addEventListener("click", function () {virec.startCapture(); // this will start recording video and the audiostopCountDown();startCountDown(); });stopRecord.addEventListener("click", function () {/* stops the recording and after recording is finalized oncaptureFinish call back will occur*/virec.stopCapture(oncaptureFinish);stopCountDown(); });playBackRecord.addEventListener("click", function () {/* Clientside playback,*/virec.play(); });discardRecordng.addEventListener("click", function () {/* Clears the current recorded video + audio allowing another recording to happen*/virec.clearRecording();stopCountDown(); });uploadrecording.addEventListener("click", function () {/* Uploading the content to the server, here I have sliced the blobs into chunk size of 1048576 bits so that uploading time will reduce. Gmail uses this same technique when we attach some files to a mail, it slize the file in the client side and then uploads chunk by chunk*/var uploadoptions = { blobchunksize:1048576, requestUrl:"php/fileupload.php", requestParametername:"filename", videoname:"video.webm", audioname:"audio.wav" };virec.uploadData(uploadoptions, function (totalchunks, currentchunk) {/* This function will callback during, each successfull upload of a blob so you can use this to show a progress bar or something*/progressNumber.innerHTML= ((currentchunk / totalchunks) *100);console.log(currentchunk +" OF "+ totalchunks); }); });//------------------------------- few functions that demo, how to play with the api --------------------------var countdowntime =15;var functioncalltime =0;var timerInterval =null;functiononcaptureFinish(result) {document.getElementById('status').innerHTML="";result.forEach(function (item) {if (item.type=="video") {var videoblob =item.blob;var videobase64 =window.URL.createObjectURL(videoblob);document.getElementById('recordedvideo').src= videobase64;document.getElementById('downloadurl').style.display='';document.getElementById('downloadurl').href= videobase64;document.getElementById('status').innerHTML=document.getElementById('status').innerHTML+"video="+Math.ceil(videoblob.size/ (1024)) +"KB"; } elseif (item.type=="audio") {var audioblob =item.blob;document.getElementById('audiored').src=window.URL.createObjectURL(audioblob);document.getElementById('status').innerHTML=document.getElementById('status').innerHTML+"Audio="+Math.ceil(audioblob.size/ (1024)) +"KB"; } }); }functionsetCountDownTime(time) {countdownElement.innerHTML= time;return time; }functionstartCountDown() {if (timerInterval ==null) { functioncalltime = countdowntime;var value =setCountDownTime(functioncalltime); timerInterval =setInterval(function () {var value =setCountDownTime(--functioncalltime);if (value ==0) {clearInterval(timerInterval);virec.stopCapture(oncaptureFinish); } }, 1000); } }functionstopCountDown() {if (timerInterval) {clearInterval(timerInterval); timerInterval =null; } }</script>
    </body>
    </html>

    服务器端代码

    我已经使用过php,但是你可以使用服务器端语言

    更改日志

    有关详细信息,请参阅贡献

    Bug修复和新特性可以使用许可证

    MIT许可证(麻省理工学院)有关详细信息,请参阅许可证


    bro  浏览  Html5  视频  音频  记录