Hello.

I am Paul Kinlan.

A Developer Advocate for Chrome and the Open Web at Google.

I love the web. The web should allow anyone to access any experience that they need without the need for native install or content walled garden.

Screen Recorder: recording microphone and the desktop audio at the same time

Paul Kinlan

私は世界で最もシンプルなスクリーンレコーディングソフトウェアを構築することを目標としており、この2か月間、プロジェクトについてゆっくりとうろついています(本当に遅いということです)。 以前の投稿では、すべての入力ソースからのストリームをscreen recording and a voice overlayてWORDS0を取得しscreen recording and a voice overlayた。しかし、フラストレーションの1つの領域は、デスクトップからオーディオを取得する方法と、スピーカーからのオーディオをオーバーレイする方法を見つけることができなかったことです。私は最終的にそれを行う方法を考え出した。 まず、ChromeのgetDisplayMediaでオーディオキャプチャが可能になりました。機能呼び出しでaudio: trueを指定できなかったという点で、仕様に奇妙な見落としがあるようです。 const audio = audioToggle.checked || false; desktopStream = await navigator.mediaDevices.getDisplayMedia({ video:true, audio: audio }); 第二に、もともとオーディオストリームに2つのトラックを作成することで、必要なものを取得できると考えていましたが、ChromeのMediaRecorder APIは1つのトラックしか出力できないこと、そして2つ目は、とにかく機能しなかったことを学びました一度に1つしか再生できないという点で、DVDの複数のオーディオトラックに似ています。 解決策はおそらく多くの人にとっては簡単ですが、私にとっては新しいものでした:Web Audioを使用します。 WebAudio APIには、問題を解決するために必要なAPIであるcreateMediaStreamSourceとcreateMediaStreamDestinationがあります。 createMediaStreamSourceは、デスクトップオーディオとマイクからストリームをcreateMediaStreamSourceできます。この2つをcreateMediaStreamDestinationで作成されたオブジェクトに接続することにより、この1つのストリームをMediaRecorder APIにパイプすることがMediaRecorderます。 const mergeAudioStreams = (desktopStream, voiceStream) => { const context = new AudioContext(); // Create a couple of sources const source1 = context.createMediaStreamSource(desktopStream); const source2 = context.createMediaStreamSource(voiceStream); const destination = context.createMediaStreamDestination(); const desktopGain = context.

Read More

Building a video editor on the web. Part 0.1 - Screencast

Paul Kinlan

あなたは、ブラウザでウェブだけを使ってビデオを作成し編集することができます。 Screenflowに似たユーザーインターフェイスを提供することで、複数のビデオ、画像、およびオーディオを1つのビデオにまとめて、YouTubeなどのサービスにアップロードできる出力ビデオを作成できるようにする必要があります。 私の前の投稿からビデオエディタの要件を簡単に説明した後、この記事ではスクリーンキャストでウェブカメラレコーダーをどのように作成したか、そしてスクリーンキャストを構築する方法レコーダー:) それはすべてき​​ちんとしていて、新しい navigator.getDisplayMedia APIを使用します。これにより、ユーザーは画面コンテンツへのアクセスを許可することができます。以下のコードは、私がこのビデオを作成するために使用したすべてのものです。 ビデオは非常に非常に生であり、現時点で私はビデオを編集することができないので、多くの間違いがあります:)私の目標は、このプロジェクトの終わりに、私は良いビデオをエンドツーエンドで作ることができるということです。 このビデオのコードデモ window.onload = () => { if('getDisplayMedia' in navigator) warning.style.display = 'none'; let blobs; let blob; let rec; let stream; let voiceStream; let desktopStream; captureBtn.onclick = async () => { download.style.display = 'none'; desktopStream = await navigator.getDisplayMedia({video:true}); voiceStream = await navigator.mediaDevices.getUserMedia({video: false, audio: true}); let tracks = [...desktopStream.getTracks(), ...voiceStream.getAudioTracks()] console.log('Tracks to add to stream', tracks); stream = new MediaStream(tracks); videoElement.srcObject = stream; blobs = []; rec = new MediaRecorder(stream, {mimeType: 'video/webm; codecs=vp9,opus'}); rec.

Read More