はじめに WebRTCを使ったアプリを作る際に、切っても切れないのがカメラ映像の取得です。ノート型のPCで作業したりすると、延々と自分の顔を見続けなければなりません。そこで、自分の顔の替わりに好きな動画をメディアストリームとして流すサンプルを作って見ました。 仕組み 動画ファイルの変換 ユーザにローカルの動画ファイルを指定してもらう(ファイル選択 or ドラッグ&ドロップ) FileオブジェクトからURLを生成 (window.URL.createObjectURLを利用) それをVideoタグで再生 継続的にCanvasタグに転写 (window.requestAnimationFrameを利用) CanvasタグからMediaStreamを取り出す (Canvas.captureStreamを利用) 音声ファイルの変換 ユーザにローカルの音声ファイルを指定してもらう(ファイル選択 or
![WebRTCを試すときにオッサンが映り続ける問題に対処する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/769d0ef3d591cdceef9296c6cc572c91318f3687/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9V2ViUlRDJUUzJTgyJTkyJUU4JUE5JUE2JUUzJTgxJTk5JUUzJTgxJUE4JUUzJTgxJThEJUUzJTgxJUFCJUUzJTgyJUFBJUUzJTgzJTgzJUUzJTgyJUI1JUUzJTgzJUIzJUUzJTgxJThDJUU2JTk4JUEwJUUzJTgyJThBJUU3JUI2JTlBJUUzJTgxJTkxJUUzJTgyJThCJUU1JTk1JThGJUU5JUExJThDJUUzJTgxJUFCJUU1JUFGJUJFJUU1JTg3JUE2JUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0wNWJjN2M0OGEzNmNhMGJlYmMyMmQ0NDc0NDM4NmZhMg%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtYXNzaWVfZyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NGM2YmY1ZGE5YmNiYjg5NTdjMzg4N2MyOWY1ZWM4N2M%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D5a434c670fd4298a8b6f0ed324272eda)