エディタの左上にリアルタイムに顔を表示する - hitode909の日記

hitode909の日記

以前はプログラミング日記でしたが、今は子育て日記です

エディタの左上にリアルタイムに顔を表示する

エディタの左上にワイプでリアルタイプにカメラの入力が出てたらバラエティ番組みたいになって便利かと思ってやってみたけどただ意味不明な状態になるだけでとくに役には立たなかった,リモートペアプロするときにこちらの顔を送れるのは便利かもしれない.

f:id:hitode909:20180206014936p:plain

Atomのコンソールにこれを貼ればワイプ出せるはず.

navigator.mediaDevices.getUserMedia({audio: false, video: true}).then((stream) => { const video = document.createElement('video');video.draggable=true;document.body.appendChild(video); video.srcObject=stream; video.style='position: absolute; left: 7vmin; top: 7vmin; max-width: 20vmin; max-height: 20vmin; border: 1vmin solid white; z-index:999;'; video.play(); })


もうちょっと考えると,Atomじゃなくて,普通のブラウザでもワイプ出せることに気付いた.スクショをいっしょに記念撮影できて,ちょっとだけ便利.ビデオ入力を取れるのはHTTPSのサイトだけなので,HTTPSで配信できる喜びを確かめたいときにも使える.
普通のウェブサイトにもワイプを出すボタンを置いておけば,ワイプで自分の顔を見ながらインターネットしたい人はワイプを見ながらインターネットできて便利になると思う.

f:id:hitode909:20180314110407p:plain

追記

最近のChromeでは動かなくなっていたようだけどid:utgwkkが調べてくれていたのでコードを差し替えました。ありがとうございます。

エディタの左上にリアルタイムに顔を表示する - hitode909の日記

Chrome 90で試したらそのままでは動かなかったけど `video.src=window.URL.createObjectURL(stream)` を `video.srcObject=stream` に変えたら動くようになった

2021/05/14 11:03