Webアプリでデスクトップや他（ブラウザ以外の）ウインドウのスクリーンショットを撮りたい場面がありました。 こういうことです。 ブラウザで画面をキャプチャ＆ショット サンプル See the Pen wvMGvWp by Yuichi Takeuchi (@takeyuweb) on CodePen. 動作確認に使った環境は Windows 10 Pro 2004 + Chromium Edge です。 Chromium Edge TypeScript 2020/6/11現在、TypeScriptの定義が追いついておらずコンパイルできません。 ワークアラウンド declare global し…
事業本部 プロダクト開発室エンジニアの日下です。 オンライン診療・服薬指導・クラウド診療支援システム「CLINICS」の、患者・医療機関に向けたアプリケーションの機能開発、開発基盤、インフラ周りを担当しております。 今回 CLINICS が提供するオンライン診療機能に「画面共有機能」を追加しましたので、その背景・技術的な話をまとめます。 画面共有機能実装の背景 CLINICS とオンライン診療 普段皆さんが病院にかかるとき、多くの場合は病院に行き、医師の診察を対面で受け、会計をして帰るといった流れになるかと思います。 CLINICS のオンライン診療はこの流れをインターネットを通して提供するサ…
こんにちは。研究開発室の岡田です。 オリンピックの開催が間近になりましたが、最近はデジタルの界隈でもe-sportsがにわかに注目を集め始めていますね。これを後押しするというわけでもありませんが、今回はAmazon Chime SDK JSを用いてマルチプレイヤーゲームの実況配信システムを作ってみたいと思います。特に今回は、公式がファン創作についてポリシーを明確にしてくれているAmong Usを題材にしてみようと思います(ref)。 具体的には下図のようなものを作ります。中央に各ユーザのゲーム画面が表示されています。この画面を観戦者には見えるようにして、プレイヤーには見えないようにします。また…
const localVideoStream = await navigator.mediaDevices .getDisplayMedia({ video: { height: 1080, width: 1920 } }) localVideoStream.getTracks()[0].addEventListener('ended', () => { // ここで処理を記述 }) 画面共有のstreamのtrackに対して endedのイベントリスナーを設定するとハンドリングできる
