📐 🙆🏽 👩🏻‍💼 Arduino dan video? Mudah 🚎 🕺🏼 💅🏻

Diketahui bahwa mikrokontroler Arduino yang lemah tidak dapat melewatkan aliran video.
Dan jika Anda mendekati tugas ini dari sisi lain?

... dan regangkan proses pemotretan tepat waktu.

Heh, banyak yang sudah menebak sendiri bahwa teknik ini disebut timelapse (slow-motion shooting single-frame). Artinya, ini bukan perekaman video, melainkan pemotretan, sebagai akibatnya video dibuat.

Saya akui, awalnya saya tidak berencana melakukan gerakan lambat. Saya hanya ingin mendaftar acara untuk arduins saya, termasuk dengan foto. Nah, lalu matikan dan hidupkan. Jika pembaca saya tidak terlibat dalam pengembangan, maka ia bisa melihat hasilnya (pergi dari bawah Chrome).

Terdiri dari apa sistem saya:

Arduino Mega Board
Modul kamera JPEG;
utilitas dan database MongoDB;
Server WEB untuk hosting file HTML;

Ketika arduina mengirim datanya ke server, timestamp-nya sendiri dilampirkan ke setiap parameter.
Parameter dikirim - catatan ditambahkan ke repositori, dua kali lagi dikirim - dua catatan lagi disimpan.

Semua pekerjaan dengan repositori dilakukan melalui program utilitas (selanjutnya disebut perantara), yang diluncurkan pada komputer yang tidak bergerak. Pada saat yang sama, server WEB sendiri hanya memberikan konten statis. Artinya, semua klien melakukan pertukaran informasi melalui program utilitas perantara, mirip dengan protokol MQTT yang populer. Perbedaan utama dari MQTT adalah bahwa perantara ini bekerja langsung dengan gudang data, menyediakan pekerjaan dengan data historis. Fakta ini menyederhanakan skema interaksi, dan tidak memerlukan lalu lintas jaringan tambahan untuk menyimpan data.

Untuk kenyamanan mengembangkan aplikasi web saya, saya membuat perpustakaan javascript dengan API berikut:

Ini membuat klien untuk bekerja dengan penyimpanan jaringan:

var client = new MgtClient("localhost", "login", "password", onDebugLog);

Argumen fungsi:

alamat jaringan yang menjalankan program perantara, Anda cukup menentukan IP, misalnya, "127.0.0.1";
login pengguna;
kata sandi pengguna
fungsi callback, untuk men-debug pesan string;

Fungsi panggilan balik untuk men-debug pesan mungkin terlihat seperti ini:

function onDebugLog(aStr) {
  //          
  console.log((new Date()).getTimeString() + ' ' + aStr + '\n'); 
}

Belum sulit? Lebih jauh lagi akan sulit.

Struktur permintaan penyimpanan:

var request = {
  name: " 1", //   
  placeId: 1, //                         
  beginTime: 1458108472000, //      1  1970 
  endTime: 1458194872000, //      1  1970  ( )
  limit: 10000 //   ,    (   )
};

Belum bingung?

Maka di sini adalah struktur respons terhadap permintaan:

var result = {
  times: [], //      (    1  1970 )
  values: [], //    
  position: 20, //         (   )
  status: "progress", //    ("progress", "abort", "done", "fail")
  progress: 91 //   ( )   
};

Ya, apakah ini lebih rumit?

Status bidang "status":

"Selesai" - menerima semua yang diminta (baik data untuk seluruh rentang waktu diterima, atau batas jumlah catatan berhasil);
"Kemajuan" - menunjukkan bahwa ini bukan data terakhir, proses pengunduhan belum selesai;
"Batalkan" - pengunduhan data terputus (pembatasan jumlah total data yang dipompa berfungsi), Anda dapat segera menghasilkan permintaan baru untuk menerima data yang hilang;
"Gagal" - ada yang salah (mungkin tidak ada arus di outlet?)

Apakah Anda pikir itu saja? Sayangnya tidak.

Parameter yang diminta dapat dari berbagai jenis.

Jika parameternya numerik, maka angka-angka akan muncul dalam array nilai.
Jika string, maka dalam array nilai akan menjadi string.
Jika boolean, maka array nilai akan "benar" atau "salah".
Jika itu biner (misalnya, gambar JPEG), maka array byte akan berada dalam array nilai.
Jika ini adalah peristiwa, maka kembalikan array yang dibentuk dengan cara khusus.

Contoh rekaman acara tunggal:

var event = [
  "  ", //   
  "", //   1
  27.5, //   1
  "", //   2
  true, //   2
  ...
  "", //   
  1458108472000 // !!!       ,
                //        .
];

Artinya, setiap catatan acara dapat berisi set parameter yang sewenang-wenang. Pengelompokan seperti ini sangat mudah untuk menganalisis gambaran keseluruhan.

Uff, bagian tersulit sudah berakhir.

Maka permintaan pengiriman itu sendiri terlihat:

// aRequest -  
// onReadArchive -     /
client.readArchive(aRequest, onReadArchive);

Fungsi terbalik untuk mendapatkan jawaban:

// aResult -  
onReadArchive(aResult) {
  // TODO       

  //   "false",     (    )
  //   "true",      (    ) 
  return false; 
}

Akhirnya, kami sampai di pengeditan video itu sendiri.

Untuk membuat video, saya menggunakan perpustakaan javascript Whammy, lebih detail di sini.

Fungsi yang membuat video:


<script src="whammy.js"></script>
<canvas id="canvas" style="display:none"></canvas>
<video id="player" controls autoplay loop></video>

function createVideo() {
  var canvas = document.getElementById("canvas");
  var context = canvas.getContext("2d");
  canvas.width = '640'; //     
  canvas.height = '480'; //     
  var framerate = 10; //     
  var quality = 0.8; //    

  var video = new Whammy.Video(framerate, quality); //       WebM
 
  for (var i = 0; i < images.length; i++) { //    
    var image = images[i];
    context.globalAlpha = 1;
    context.drawImage(image, 0, 0, 640, 480); //     
    video.add(context); //   
  }

  var output = video.compile(); //    
  var url = URL.createObjectURL(output); //    

  document.getElementById('player').src = url; //    
}

Sayangnya, Anda tidak dapat membuat video di semua browser. Misalnya, Firefox favorit saya tidak tahu cara mengonversi gambar ke format WebP, yang menjadi dasar konversi menjadi video. Dan meskipun saya menemukan perpustakaan javascript untuk konversi seperti itu, itu dikonversi sangat lambat (dan ada begitu banyak frame) sehingga saya menolak untuk menggunakannya. Namun, di semua browser dengan mesin Chrome, hal ini akan berhasil.

Di sini Anda dapat melihat apa yang saya lakukan.

Tanpa dokumentasi lengkap, saya dapat menawarkan artikel saya sebelumnya.
Artikel 1
Pasal 2

Ya, itu saja, dan saya tidak bisa mengatakan apa-apa lagi.

Arduino dan video? Mudah

More articles: