ダークサイドにようこそ!

限界クリエイターのブログ

トップ > プログラミング > 【JavaScript】USB接続のWebカメラから映像を取得する方法【p5.js】

【JavaScript】USB接続のWebカメラから映像を取得する方法【p5.js】

プログラミング

JavaScript（描画周りでp5.js使ってます）でPC内蔵カメラではなく、USB接続のWebカメラから映像を取得する方法を備忘録としてメモ。MediaDevices.enumeratedDevices()というWeb APIを使ってデバイスのIDを取得することができます。リンク先にもサンプルコードがありますが一応こちらにも抜粋させていただきます。

navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
  devices.forEach(function(device) {
    console.log(device.kind + ": " + device.label +
                " id = " + device.deviceId);
  });
})
.catch(function(err) {
  console.log(err.name + ": " + err.message);
});


上記コードでコンソールにデバイス一覧が表示されるので、使いたいデバイスのIDを以下にようにp5.jsのcreateCapture()呼び出し時に指定してあげるとOKです。

var options = {
    video: {
        optional: [{
            sourceId: 'hogehoge' // put device id
        }]
    }
};

capture = createCapture(options);


……と思って久しぶりに該当箇所を動かしたらダメだったので以下に修正（すみません）。

var options = {
        video: {
            deviceId: 'hogehoge' // put device id
        }
};

capture = createCapture(options);

github.com


ただし、私の場合は接続しているUSBカメラがMediaDevices.enumeratedDevices()でも表示されませんでした。そもそもPC側にデバイスが認識されていないようです。原因はよく分かりませんでしたが、PC再起動したり以下の手順を試したりしながらカメラを抜き差ししているうちに認識されました。
dandashokai.com


とりあえずUSBカメラ使えてよかったです。ml5.jsを試したりしています。


hahaeatora.hateblo.jp