obnizのフォーラムは新しいシステムに移行しております。

新しいフォーラムはこちらになります

ArduCAMMiniを使用してライブカメラ機能を実現したい



  • パーツライブラリにあるArduCAMMiniを使用し、定期的に撮影および画像更新することで、ライブカメラのような機能を実現したいのですが、どのようなプログラムを書けばいいでしょうか??(最終的にはobnizでカメラおよびモーターを制御し、ドローンのようなラジコンを作りたいと考えております)
    setIntervalでawait cam.takeWaitを定期的に呼び出せばできると思ったんですが、Errorが出てできなかったので・・・

    プログラミング勉強中の初心者なので、解説と共にプログラムを教えていただけると幸いです。よろしくお願いいたします。



  • @abe-dai さん

    ライブカメラのようなものを作る場合、まさに「setIntervalでawait cam.takeWaitを定期的に呼び出せば」作ることができます。

    この際に出てきたエラーはどのようなエラーでしたでしょうか。
    @abe-dai さんのコードをもとに、エラーを修正したほうがより理解しやすいのかなと思っています。



  • @kido さま
    ご返答ありがとうございます。
    コードを下に記載しました。一秒ごとに撮影および画像表示するという機能を目標にコードを書きました。

    下記コードをobnizのOnline Editor画面にて記載すると、<!>マークと共に下記のメッセージが出ます。
    ・<script> の行にて
     SyntaxError in this script tag

    ・setInterval(function(){ の行にて
     To use 'await', function must be 'async function'

    ・const data = await cam.takeWait('1024x768'); の行にて
     cam.takeWait is maybe async function. Do you mean 'await cam.takeWait'?

    また、プログラムを実行しても撮影した画像は表示されず、コンソールにて下記メッセージが表示されます。
     Uncaught SyntaxError: await is only valid in async function
     Object
      message:"Uncaught SyntaxError: await is only valid in async function"
      line:40
      colmun:22
      error:SyntaxError{}

    0_1548646535438_8c4e8f0b-bf63-476e-a12e-e018468c6141-image.png

    コードの修正についてご教授願います。

    【追記】
    setIntervalをそのまま「while構文+obniz.wait(1000)」に置き換えた場合、1秒ごとに撮影および画像更新という機能を問題なく実現できました。しかしながら、これだと、例えば「モーターを制御しながら撮影を繰り返す」という機能は達成できないですよね?可能であればsetIntervalで定期的に撮影しつつ、ほかの何かを実行するというようなプログラムを作りたいと考えております。

    ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
    <html>

    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>カメラテスト</title>

    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/obniz@1.14.1/obniz.js" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <style>
    footer{
    margin-top: 20px;
    }
    </style>
    </head>

    <body>

    <div class="container">
    <img id="image">
    </div><!--container-->

    <footer>
    <div id="obniz-debug"></div>
    </footer>

    <script>
    var obniz = new Obniz("xxxx-xxxx");
    obniz.onconnect = async function () {

      var cam = obniz.wired("ArduCAMMini", { cs:9, mosi:8, miso:7, sclk:6, sda:5, scl:4 });
      await cam.startupWait();
      
      setInterval(function(){
        const data = await cam.takeWait('1024x768');
        console.log("image size = " + data.length + " bytes");
        const base64 = cam.arrayToBase64(data);
        document.getElementById("image").src = "data:image/jpeg;base64, " + base64;
      }, 1000);    
    
    }//obniz.onconnect
    

    </script>

    </body>
    </html>
    ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



  • @abe-dai さん

    プログラムありがとうございます。
    Online Editor画面のエラーを修正すると、おそらく予想通り動くと思います。

    @abe-dai さんのプログラムですと、

     setInterval(function(){
      ...
     })
    

     setInterval(async function(){
      ...
     })
    

    に変更したら動くかと思います。

    JavaScriptには関数の種類として、通常のfunctionと非同期処理を行えるasync functionがあります。
    await cam.takeWait()のように、awaitが必要な関数はasync functionの中でしか使えませんので、そのエラーが発生しているようです。

    【追記】
    setIntervalをそのまま「while構文+obniz.wait(1000)」に置き換えた場合、1秒ごと> に撮影および画像更新という機能を問題なく実現できました。しかしながら、これ > だと、例えば「モーターを制御しながら撮影を繰り返す」という機能は達成できないですよね?可能であればsetIntervalで定期的に撮影しつつ、ほかの何かを実行するというようなプログラムを作りたいと考えております。

    はい、仰る通り「while構文+obniz.wait(1000)」では1秒間動きを止めますので、その間は制御はできなくなります。



  • @kido さま
    ご回答ありがとうございます。
    おかげさまで、ライブカメラ付きラジコンを作成できました。

    0_1548921722676_7fbb55d1-5dba-4223-86e1-b8db783ca1d1-image.png

    0_1548921192353_f4d504ad-0249-49b9-b134-169e2f6946f8-image.png

    0_1548921226771_81894c3c-6118-46c0-95e6-963d28012e97-image.png



SUGGESTED TOPICS