non vorrei lavorare

昔はおもにプログラミングやガジェット系、今は？

Atom Shellでデスクトップキャプチャーを最速で試す！

パソコン・インターネット electron

こんばんは、バーベキューに息子達を連れて行って、食べるだけ食べて、 片付けには、マンションの検査の立会を理由に参加できなかった@kjunichiです。 次男は、半分は寝てましたが、長男は目一杯満喫し、実家への電車で爆睡でした。

f:id:kjw_junichi:20181003203950j:plain

 

はじめに

ChromeブラウザではWebRTCでWebCam以外にデスクトップのキャプチャーがchrome://flags/で設定するか、起動時にコマンドラインで指定することで、出来たり、機能拡張を使うことで任意のウィンドウのキャプチャーが可能。

今回Atom Shellがv0.17.0以降から、デスクトップのキャプチャーがChromeと異なり、特にオプション等を指定することなく、普通に出来るようになった。

やり方

あくまでも、キャプチャーが試せるのみのHTML。録画機能は未実装です。

f:id:kjw_junichi:20181003204102p:plain

録画するには

がんばって、ffmpegをEmscriptenでjs化する。

他にも、RecordRTC等があるので、これらを使えば良いはず。

ソース

<html>
<meta charset="UTF-8">
<title>Desktop Capture</title>
<div id="out"></div>
<button id="rec">Rec</button>
<button id="stop">Stop</button>

<video id="outV" controls></video>
<script>
var outV = document.getElementById("outV");

var stopBtn = document.getElementById("stop");
    stopBtn.addEventListener("click",function() {
    stop();
},false);

var recBtn = document.getElementById("rec");
recBtn.addEventListener("click",function() {
    start();
},false);
var elm = document.getElementById("out");
var localStream;

function start() {
     var out = document.getElementById("out");
     out.innerHTML = "Capture start!";
     if (navigator.webkitGetUserMedia) {
         navigator.webkitGetUserMedia({
             audio: false,
             video: {
                 mandatory: {
                     chromeMediaSource: 'screen',
                     /*
                     minWidth: screen.width,
                     maxWidth: screen.width,
                     minHeight: screen.height,
                     maxHeight: screen.height*/
                     minWidth: 400,
                     maxWidth: 400,
                     minHeight: 400,
                     maxHeight: 400
                 }
             }
         }, function(stream) {
             elm.innerHTML = "録画中...";
             stream.onended = function() {
                console.log("stream onended.");
                //stop();
                 elm.innerHTML = "";
             };
             localStream = stream;

             var url = window.webkitURL.createObjectURL(stream);
            outV.src = url;
            outV.play();
         }, function(error) {
            elm.innerHTML = error;
         });
     } else if (navigator.getUserMedia) {
         console.log("oops!");
     }
 }

function stop() {
         if (navigator.webkitGetUserMedia) {
             localStream.stop();
             elm.innerHTML = "録画完了";
         }
}

// キャプチャーの開始
start();
</script>
</html>

関連記事

 

9年前の記事

7年前の記事

3年前の記事

2年後の記事