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.

あなたは、ブラウザでウェブだけを使ってビデオを作成し編集することができます。 Screenflowに似たユーザーインターフェイスを提供することで、複数のビデオ、画像、およびオーディオを1つのビデオにまとめて、YouTubeなどのサービスにアップロードできる出力ビデオを作成できるようにする必要があります。 この投稿は本当に単なる声明です。私はプラットフォーム上で利用できるものと利用できないものを整理し、今日までにどのくらい得ることができるかを見るための長いプロセスを開始するつもりです。 このプロジェクトのいくつかの考えの中で、私はカール・セイガンの瞬間を持っていました。つまり、リンゴ・パイを作るために宇宙を発明する代わりに、少なくともビデオ・エディタを構築するのに必要なすべてのツールを作成する必要があります。それを行うプロセス。この記事が存在するという事実は、私がいくつかの作品を用意して準備ができていることを知っているからです。 私は、他の誰かのためのビジネスでもある大規模なモノリシックな「ビデオエディタ」を作り出すつもりはないと思っていますが、私はそれを簡単にするために必要なすべての部分を工夫するつもりですウェブ上で素晴らしい動画を作成し、多くの人にウェブ上で可能なことを見せてもらいましょう。 以下は私の大まかな1ページプロジェクト計画です： 私が持っている使用例： *私は通常、Google I / OとChrome DevSummitのすべてのデバイスデモを記録し、オーバーレイなどを追加する必要があります。チームの全員がこれを行うことができます。 *チームはしばしばスクリーンキャストを記録し、シンプルなウェブサイトからすぐにそれを行い、最終的な出力をクリーンアップできるようにしたいと考えています。 *私は鋭く保つためにいくつかの製品を作る必要があります。 ;） 入力： [p0]マイクから音声を録音する [p0]ウェブカメラからビデオを録画する[完了 - 下記参照] [p0]ウェブ上にホストされている外部動画を埋め込む [p0]デスクトップを記録する [p1]リモートストリームを記録する [p1]＆lt; canvas＆gt;を記録します。素子 [p0]ローカルデバイスからファイルをロードする [p1]ローカルデバイスからファイルを共有する（android share intent） 操作： [p1]ウォーターマークを追加する [p1]フィルター効果を画像に追加する [p0]カスタム画像をレイヤーとして追加する [p0]ビデオとオーバーレイをキューに入れる [p0]オーディオとビデオの別々のトラックをオーバーレイする [p1]特定の時間にテキストを重ねる [p0]ビデオをサイズに切り抜く [p0]ビデオの位置決めとサイズ変更を有効にする [p0]ビデオ/オーディオのトリム [p0]スプライスビデオ/オーディオ 出力： [p0] webm形式のビデオファイル [p1] MTB情報 [p1] xyz形式のビデオファイル このビデオのコードデモ const init = () => { let blobs; let rec; let stream; captureBtn.onclick = async () => { stream = await navigator.