Js 录制屏幕

最新的Js录制屏幕主要通过getDisplayMedia({video:true, audio:true})来实现。audio:true表示要录制背景音。目前仅最新的chrome录制tab时支持。效果如下图：

风景

index.html 如下：

 

 

 







Start

index.js如下：

/**

*自动录屏模块*录制桌面

*

* @class Recorder

*/

class Recorder {

  constructor(path) {

    this.mediaOutputPath = path;

  }

  /**

  *开始录制

  *

  * @memberof Recorder

  */

  startRecord (){

    navigator.mediaDevices.getDisplayMedia({video:true, audio:true}).then(Mediastream => {

        this.createRecorder(Mediastream);



      }).catch(err => {

        this.getUserMediaError(err);

      })

  }

  /**

  *获取媒体源失败

  *

  * @memberof Recorder

  */

  getUserMediaError(err){

    console.log('mediaError',err);

  }

  /**

  *开始视频录制

  *

  * @memberof Recorder

  */

  createRecorder(stream){

    console.log('start record');

    this.recorder = new MediaRecorder(stream);

    this.recorder.start();

    var chunks = [];

    this.recorder.onstop = event => {

      let blob = new Blob(chunks, {

        type: 'video/mp4'

      });

      this.saveMedia(blob);

    }

    this.recorder.ondataavailable = event => {

      chunks.push(event.data);

    };

  }

  /**

  *数据转换并保存成MP4

  *

  * @memberof Recorder

  */

  saveMedia(blob){

    let url = window.URL.createObjectURL(blob);

    var video = document.getElementById("video");

    video.src = url;



    // var a = document.createElement('a');

    // a.innerHTML = "test";

    // a.download = "test.mp4";

    // a.href = url;

    // document.body.appendChild(a);





  }

  /**

  *停止录制视频

  *

  * @memberof Recorder

  */

  stopRecord(){

    this.recorder.stop();

  }

}