Hello.

私は世界で最も簡単なスクリーンレコーディングソフトウェアを作ることを目標としています、そして私はここ数カ月間ずっとこのプロジェクトについてゆっくりとうなずいていました（私は本当にゆっくり意味します）。 前回の記事では、私は持っていたscreen recording and a voice overlay 、すべての入力ソースからのストリームを用いて約futzingで。ただし、欲求不満の1つの分野は、デスクトップからオーディオを取得する方法やスピーカーからオーディオをオーバーレイする方法を理解できなかったことです。私はついにそれをする方法を考え出しました。 まず、ChromeのgetDisplayMediaではオーディオキャプチャが可能にaudio: trueましたが、関数呼び出しでaudio: trueを指定することができなかったという点で、Specでの奇妙な見落としのようですが、今は可能です。 const audio = audioToggle.checked || false; desktopStream = await navigator.mediaDevices.getDisplayMedia({ video:true, audio: audio }); 2つ目は、オーディオストリームに2つのトラックを作成することで、必要なものを取得できると思いましたが、ChromeのMediaRecorder APIは1トラックしか出力できないことを知りました。 DVDマルチオーディオトラックのようなものですが、一度に再生できるのは1つだけです。 解決策はおそらく多くの人にとって単純なことですが、それは私にとっては初めてのことでした。ウェブオーディオを使う WebAudio APIにはcreateMediaStreamSourceとcreateMediaStreamDestination 、どちらも問題を解決するために必要なAPIです。 createMediaStreamSourceは私のデスクトップオーディオとマイクからストリームを取ることができます、そしてcreateMediaStreamDestinationによって作成されたオブジェクトに2つを一緒に接続することによってそれは私にこの1つのストリームをMediaRecorder APIにパイプする能力を与えます。 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.createGain(); const voiceGain = context.

あなたは、ブラウザでウェブだけを使ってビデオを作成し編集することができます。 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.