getUserMedia

Safariなどのブラウザには、音の自動再生に制限があって、ロード時にいきなり再生！というのがだいたいできない時代。（この制限にはいろいろ条件があるけども）そのため、「このサイトでは音が出ます」みたいなモーダルを出して、まずそれをクリックしてもらい、そのタイミングでこの制限を突破するために一手間かけるということが行われてきた。で、そのひと手間で盛大に音を鳴らすわけにはいかないので、無音を鳴らすという半ばハック的な方法があるのである。その無音の鳴らし方を毎回思い出すのが大変なので、いい加減メモっておく。

1000mタイムトライアルサイトの使い方の説明です。 3本ローラーを使った1000mタイムトライアル時、タイムの計測と動画撮影・保存を行います。スピードセンサーはBluetooth Low Energy（BLE）に対応したものを使用してください。スピードケイデンス一体型のセンサーでもOKです。 Windows 10のMicrosft Edgeで使用することを念頭に作りました。インターネットエクスプローラでは動かないと思いますが、ChromeやFirefoxの新しいものなら動くようです。スマホ（Android 7.0の古いもの）でも何とか動きました。 （追記）3月5日現在 時刻計測にバグがありま…

Clubhouse、流行ってますね みなさん、「Clubhouse」、楽しんでますか？ 僕は招待してくれる友達がいないのでやっていません（涙） こんにちは、株式会社PHONE APPLI、 テクノロジーリサーチ部の たかはしとし（ @doushiman_jp ） です。 できないなら作ってしまえ 皆さんご存知とは思いますが Clubhouse とは、音声のみで繋がる SNS のことです。 それで話は冒頭に戻るんですが、Clubhouse は招待制ということで、僕のようなテレワーク主体で、毎日が無人島生活のようなボッチマンにはそんなインビテーションは届きません。 ならばセルフで作ってしまおう、と…

ノートPCのカメラを操作して、ブラウザ上に映します。 WebRTCという技術なのですが、理論を理解していなくても使えます。。 ja.wikipedia.org ブラウザに表示する手順です。 HTMLにVideoタグを配置します。 <video id="myVideo" autoplay="1" ></video> HTMLのbodyの最後のほうに、JavaScriptを指定します。 今回は「webcam.js」という名前にしましたが、別に名前はなんでもかまいません。 <script src="js/webcam.js"></script> JavaScriptを作ります。 navigator.…

2020年 12 月の LINE API 関連のまとめです。 シェアターゲットピッカーの UI 改善 developers.line.biz シェアターゲットピッカー = LIFF から起動して LINE の友だちにメッセージを送信する機能です デフォルトでトークのセクションが開き最近やり取りした友だちが優先して表示されるようになったため、送信先を見つけやすくなりました LIFF v2.6.0 リリース developers.line.biz 内部挙動の変更のみで追加機能などはなし Webhook イベントオブジェクトに新しいプロパティが追加 developers.line.biz スタンプが…

この記事はAizu Advent Calendar 2020の 5 日目に差し込む記事です。 今年は某 SDK を利用して WebRTC を利用しており、WebRTC を利用するにあたって カメラ・音声取得処理と WebView がかなりの障害になったのでそれに関してまとめておこうかなと思います。 TL;DR User Agent だけでは WebView かどうか確実にはわからない audio, video の取得処理が失敗した際のエラーの種類を見て対象外のブラウザであることを通知しましょう (つまるところエラーハンドリングちゃんとやろうねってこと) カメラ・音声取得 どういう経緯で必要だっ…

2020年に作ったGitHubリポジトリ - pockestrapにインスパイアされました。 次の条件でGithubを検索します。 Search · is:public user:ledsun created:2020 · GitHub 2020年にGithubに作ったリポジトリ 大体どれも作りかけです。 GitHub - ledsun/svg-playground: SVGの学習用の実験場です。 SVGおじさんに憧れて素振りしていた時のものです。素材をSVGにする部分が難しいなあ、素振りしてもなかなか身につかないなあ・・・というところで止まりました。 GitHub - ledsun/gith…

ぶぉんなたーれ！クリスマスはリベといっしょにパネトーネを食べたい人生だった…。 クリスマスといえばサンタさん。 その姿を一目見てやろうと夜更かしすると，サンタさんは来なくなります。 夜更かしは悪い子のすることなので。 悪い子にならずに，サンタさんの姿を確認したい… ということで，カメラに映る動くものを検知するサイトを作りました。 この記事は SLP KBIT Advent Calendar 2020 25日目の記事です。 adventar.org こんな感じ。 動作例 ここで動作します。 ただし，いまのところ(2020.12.25現在)，DesktopのfirefoxではA2HS(ホーム画面に…

こんばんは！ id:kouki_dan です！株式会社はてなのネイティブアプリエンジニアです！ この記事は、はてなエンジニア Advent Calendar 2020の8日目の記事です。 昨日は id:shallow1729 さんのAtcoder初心者が成績アップに繋がったと感じた考え方の工夫でした。競技プログラミングの難しい問題は数学的な知識も必要になってきて慣れていないと難しいですよね。初心者が競技プログラミングに取り組む上で大切な考え方を知ることができてとても勉強になりました！ 今年を振り返ってみるとリモートワークの年でしたね。今日はそんなリモートワークを支える技術について書いていこうと…

Amazon Chime SDKの動作を確認するクライアントサイドをJavaScriptで実装してみたいと思います。 事前準備 サーバサイド Amazon Chime SDKダウンロード 実装内容 動作確認 ミーティング参加 ミーティング退出 注意点 ミーティングセッションの自動終了 ブラウザの制約 事前準備 サーバサイド サーバサイドにて、ミーティング（meeting）と参加者（attendee）を作成して、クライアントサイドへ渡してあげる必要があります。 以下などを参考に、サーバサイドを実装してください。 gsol.hatenablog.com Amazon Chime SDKダウンロード…

株式会社メドレーのエンジニアの笹塚です。私が開発を担当しているジョブメドレーで、先月10月23日に WEB 面接・動画選考をリリースしました。 job-medley.comWEB 面接、動画選考ともに、昨今の非対面での就職活動ニーズに応えるべく開発しました。 リリースは2つの機能を同時ですが、今回は WEB 面接の裏側に絞ってご紹介します。 WEB 面接概要 WEB 面接とは、リアルタイムで事業者様と求職者様が、オンライン面接を行うことができる機能です。専用のアプリケーションは必要なく、PC、スマートフォンのブラウザから利用できます。 サービス選定 開発にあたり、いくつかの候補があがりましたが…

ブラウザでマイクから取得した音声のボリュームを画面上で表示する必要があったので調べてみた 今回もNuxt.jsで書いてみる 前提 yarn: v1.22.5 Nuxt.js: v.2.14.6 ソースコード <project-root>/pages/sample.vueを作成 <template> <section class="section"> <div class="columns"> <div class="column"> <meter :value="volume" min="0" max="1" high="0.25"></meter> <span>{{ volume }}</s…