JazffyでCloudinaryでウェブのためにスクリーンレコーダーを建設すること!

25105 ワード
video webdev beginners javascript テキストリンク
あなたはどのようにGoogleの絞首刑と他の堅牢なビデオコールのWebアプリは、画面にアクセスすることができますが、画面の共有中に呼び出しを有効にする疑問がありますか?もうない.ちょっと読んでください.
このチュートリアルでは、すべての機能をどのように動作し、画面のレコーダーをWebアプリケーションに統合する方法を示しています.最良の部分は、また、ビデオを送信することができますCloudinaryの画像やビデオプラットフォームに直接簡単にアクセスできるようにフィードとFloudary APIを使用してオンザフライで検索することです.
このチュートリアルの最後に、次のようなデモアプリケーションを構築します.
注意:これは、デモGIFが存在する場所です.



前提条件を置く


現在、このチュートリアルのコードのいくつかは、すぐにChromeブラウザに統合されるいくつかの実験機能を必要とします.これらの機能を有効にするには、次の手順を実行します.
  • についてchrome://flags 現在のchromeフラグについては.
  • 種類Experimental Web Platform features 上部の検索フィールドで、Enterキーを押します.
    • Chromeでは、実験的なWebプラットフォーム機能を使用して実験ページを表示します.
  • 無効になっているボタンの下矢印をクリックして有効にして、現在リニューアルをクリックします.

    • インターフェイスの構築


    Web用のスクリーンレコーダーを作成するには、通常のHTMLとJavaScriptでのみコードを必要とします.まず、次の手順に従ってインターフェイスを構築します.
  • フォルダを作成するcloudy-snap . 種類:
    • mkdir cloudy-snap
cd cloudy-snap
  • クリエイトアindex.html ファイルcloudy-snap デモアプリケーションでコードを家に.種類:
    • touch index.html
  • エディットindex.html 次のように読み込むファイル
    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Cloudy Snap</title>
    <style>
        body{
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .container{
          display: flex;
          flex-direction: column;
          align-items: center;
        }

        #videoElement{
          width: 50%;
          padding: 30px;
        }
    </style>
</head>
<body>
    <img src="https://res.cloudinary.com/cloudinary/image/upload/c_scale,w_200/v1/logo/for_white_bg/cloudinary_vertical_logo_for_white_bg.png">
    <h1>CloudySnap</h1>
    <p>Take a screen recording on the web and upload it to Cloudinary</p>
    <div class="container">
      <video id="videoElement" autoplay></video>
      <button id="recorder">
        Capture screen for 2 seconds and Upload to Cloudinary
      </button>
    </div>
</body>
</html>
  • を実行するindex.html クロムのファイル.
    • クロムは、デモアプリケーションのインターフェイスが表示されます.

    この時点で、インターフェースとの相互作用は、レコーダからの応答を生じない.次のセクションでは、レコーダーに機能を追加し、それを動作させる方法を示します.

    適切な機能の追加


    画面のレコーダーに機能を追加するには、次のスクリプトをあなたのindex.html ファイル
    [...]
​
<script>
    let recorder = document.getElementById('recorder')
​
    let videoElement = document.getElementById('videoElement')

    recorder.onclick = async () => {
        let mStream = await navigator.getDisplayMedia({ 'video': true })

        videoElement.srcObject = mStream

        let opts = { mimeType: 'video/webm; codecs=vp9' };
        let rec = new MediaRecorder(videoElement.srcObject, opts);
        let blobs = [];

        rec.ondataavailable = (e) => (e.data && e.data.size > 0) ? blobs.push(e.data) : null;
        rec.onstop = () => {
            //  get the image blob
            let finalBlob = new Blob(blobs, { type: 'video/mp4' });
            // create form data for submission         
            let formData = new FormData();
            formData.append('upload_preset', 'CLOUDINARY_UPLOAD_PRESET');
            formData.append('api_key', "CLOUDINARY_API_KEY");
            formData.append('file', finalBlob);
            var xhr = new XMLHttpRequest();
            xhr.open("POST", 'https://api.cloudinary.com/v1_1/CLOUDINARY_CLOUD_NAME/auto/upload');

            xhr.onreadystatechange = function () {
                if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
                    console.log(this.status);
                    alert("Video uploaded to your cloudinary media library");
                }
            }

            xhr.send(formData);
        }

        rec.start(100);
        setTimeout(() => rec.stop(), 2000)
    };
</script>
​
[...]

    Be sure to replace the variables CLOUDINARY_UPLOAD_PRESET, CLOUDINARY_API_KEY, and CLOUDINARY_CLOUD_NAME with their values for your Cloudinary account. To learn how to obtain those values, see the next section.


    以下のスクリプトに注意してください.
  • 最初の行では、インターフェイスで以前に作成したボタンとビデオ要素を取得します.
  • 次に、録音ボタンをクリックするときに実行する関数を割り当てます.この関数はユーザのディスプレイにアクセスし、そこからストリームを割り当てるsrcObject プロパティvideoElement このコードを使用します.
    • let mStream = await navigator.getDisplayMedia({ 'video': true })

videoElement.srcObject = mStream
    何が画面に記録されている表示されます.デモアプリケーションを実行すると、この例のようにディスプレイが表示されます.

    次のセクションでは、どのようにCloudaryとの録音を接続する詳細.その後、ビデオを操作するための能力の広い配列へのアクセスを得て、クラウドメディアライブラリで録音を格納することができます.

    雲との接続


    接続プロセスを理解する


    このコードの断片はindex.html ファイル
    [...]        
    let opts = { mimeType: 'video/webm; codecs=vp9' };
    let rec = new MediaRecorder(videoElement.srcObject, opts);
    let blobs = [];

    rec.ondataavailable = (e) => (e.data && e.data.size > 0) ? blobs.push(e.data) : null;
    rec.onstop = () => {
        //  get the image blob
        let finalBlob = new Blob(blobs, { type: 'video/mp4' });
        // create form data for submission         
        let formData = new FormData();
        formData.append('upload_preset', 'CLOUDINARY_UPLOAD_PRESET');
        formData.append('api_key', "CLOUDINARY_API_KEY");
        formData.append('file', finalBlob);
        var xhr = new XMLHttpRequest();
        xhr.open("POST", 'https://api.cloudinary.com/v1_1/CLOUDINARY_CLOUD_NAME/auto/upload');
        xhr.onreadystatechange = function () {
            if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
                console.log(this.status);
                alert("Video uploaded to your cloudinary media library");
            }
        }
        xhr.send(formData);
    }
    rec.start(100);
    setTimeout(() => rec.stop(), 2000)
[...]
    我々は最初にメディア録画を作成してコアアップロード機能を実装しますvideoElement.srcObject . 以下は、rec 変数は、どのように様々な状況で動作するようにレコーダーを指示します.
    The rec.onstop プロパティは特に興味があります.録音が完了すると、レコーダーは、記録されたデータを取得し、CloudinaryのアップロードプリセットでCloudaryに単一のBlobとして送信します.

    アップロードした動画をさらに処理するにはCloudinary . 最初にcreate an account がある.

    あなたのクラウド名


    CloudDiaryは、あなたのダッシュボード(メディアコンソール)にあなたを連れて行きます.置換するCLOUDINARY_CLOUD_NAME and CLOUDINARY_API_KEY 変数index.html その名前の前のコードセグメントのファイル.

    アップロードプリセットを作成


    Cloudaryアップロードプリセットを使用すると、画像のアップロードのデフォルトの動作を設定することができます.つまり、あなたが1つをアップロードするたびに、あなたのイメージに適用するためにパラメタを加えることの代わりに、あなたはあなたの曇り空のコンソールからタグ、変換と他の分析プリセットを定義することができます.単にあなたのコードにプリセット名を指定し、行くには良いです!
    プリセットを作成するには、Upload Settings アップロードプリセットリンクをクリックします.

    追加のアップロードプリセット画面が表示されます.

    プリセット名の下であなたの選択の名前を入力し、unsignedにモードを設定し、適切なように、他の詳細を指定します.
    今すぐに戻るindex.html ファイルと置換CLOUDINARY_UPLOAD_PRESET あなたのプリセットの名前で.

    曇天へのテストアップロード


    今、あなたはすべての曇りの詳細を追加しましたindex.html ファイルは、Chromeのブラウザに移動し、デモアプリケーションを実行します.その後、このディスプレイが表示されます.

    動画アップロード


    アップロードされた画像にアクセスするにはCloudinary Media Library :

    今、簡単かつ効率的に多くの方法でいつでもあなたのビデオを変換することができます:書式設定、サイズ変更、トリミングなど.詳細はCloudinary Documentation

    移動


    今、どのようにCloudaryとJavaScriptでWeb用のシンプルな画面レコーダーを構築する方法を学んだことがあります.完全なコードについてはGithub リポジトリ.このデモはまたCodePen .
    また、この記事にアクセスすることができますGitbook チュートリアル.
    このチュートリアルでは、他のアプリを構築するために説明した概念を使用してください.Cloudinaryは、イメージとビデオ管理を直感的で、継ぎ目のない、そして、速くウェブとモバイル・アプリケーションで速くする優れた特徴の広い配列を提供します.ドゥcheck them out .
    【Ruby】インスタンスメソッドからクラスメソッドへ変更
    [JS]09型変換とショートカット評価