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

ダンスしたりアプリ開発したり旅したりしているBBOYのブログ

【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);


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


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


hahaeatora.hateblo.jp