Read Manga Online Hapus Orang dari Video dengan AI dan JavaScript

Dalam tutorial ini, kami akan menunjukkan kepada Anda cara menggunakan Tensorflow.js dan model pembelajaran mesin segmentasi manusia terlatih BodyPix untuk menghapus orang secara real-time dari video (Tutorial ini terinspirasi oleh ini proyek dari Jason Mayes tetapi kodenya ditulis ulang dari awal)

Pengaturan Dasar

Pertama mari tambahkan tag video ke halaman html kita. Saya akan mengatur atribut video menjadi sunyi, loop dan kontrol. Kita juga perlu membuat kanvas keluaran agar dapat menampilkan video yang telah diproses.

<video id="video" width="800" src="https://redstapler.co/remove-person-from-video-ai-javascript/test4.mp4" muted loop controls></video>
<canvas id="output-canvas" width="800" height="450"></canvas>

Selanjutnya saya akan membuat fungsi inisialisasi untuk mendapatkan elemen video kami (yang akan digunakan nanti) dan konteks 2d kanvas keluaran kami. Buat juga kanvas lain sebagai ruang kerja sementara. Kami akan menggunakan kanvas ini untuk menangkap setiap bingkai video dan data gambar, kemudian memproses dan memasukkannya ke dalam kanvas keluaran untuk ditampilkan.

Terakhir, kami akan mulai memutar video dan memanggil fungsi baru kami "computeFrame" untuk memulai pemrosesan.

function init() {
  video = document.getElementById("video");

  c_out = document.getElementById("output-canvas");
  ctx_out = c_out.getContext("2d");

  c_tmp = document.createElement("canvas");
  c_tmp.setAttribute("width",800);
  c_tmp.setAttribute("height",450);
  ctx_tmp = c_tmp.getContext("2d");

  video.play();
  computeFrame();
}

Penyiapan Model ML

Kami akan menyiapkan tensorflow.js dan BodyPix menggunakan CDN.

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]"></script>

Selanjutnya setup model dan konfigurasi segmentasi.

Pertama adalah arsitektur jaringan saraf. BodyPix mendukung MobileNetV1 dan ResNet50. Dalam tutorial ini, kita akan menggunakan MobileNet yang lebih cepat tetapi memiliki akurasi yang lebih rendah. Berikutnya adalah outputStride, multiplier, dan quantBytes. Semakin tinggi angka untuk pengaturan ini, semakin banyak akurasi segmentasi pada biaya kecepatan pemrosesan. (Anda dapat menemukan detail lebih lanjut tentang setiap pengaturan tentang ini halaman)

const bodyPixConfig = {
  architechture: 'MobileNetV1',
  outputStride: 16,
  multiplier: 1,
  quantBytes: 4
};

Selanjutnya adalah konfigurasi segmentasi. Pengaturan pertama adalah internalResolution yang dapat Anda pilih untuk memperkecil ukuran gambar input sebelum memprosesnya untuk meningkatkan kinerja. Dalam tutorial ini, saya akan mengaturnya ke "full" yang berarti tidak ada pengubahan ukuran. segmentationThreshold adalah ambang batas keyakinan minimum sebelum setiap piksel dianggap sebagai bagian dari tubuh manusia. Saya akan menetapkannya menjadi 0,01 yang berarti menerima sesuatu yang lebih tinggi dari 1% dengan keyakinan. Yang terakhir adalah scoreThreshold yang merupakan ambang batas kepercayaan minimum untuk mengenali seluruh tubuh manusia. Sekali lagi saya akan mengaturnya menjadi 0,01 (lihat gambar dari Tensorflow blog di bawah tentang cara kerja ambang)

segmentasi ambang bodypix

const segmentationConfig = {
  internalResolution: 'high',
  segmentationThreshold: 0.05,
  scoreThreshold: 0.05
};

Lalu saya akan memuat model BodyPix dengan konfigurasi kami.

document.addEventListener("DOMContentLoaded", () => {
  bodyPix.load(bodyPixConfig).then((m) => {
    model = m;
    init();
  });
});

Sekarang kembali ke fungsi computeFrame kami. Pertama kita akan menggunakan kanvas temp dan menggambar bingkai video saat ini di atasnya menggunakan metode drawImage. Kemudian dapatkan data piksel di kanvas menggunakan getImagedata.

Setelah itu kita akan memanggil metode segmentPerson menggunakan data gambar saat ini di kanvas dan konfigurasi kita untuk mulai menganalisis. Hasilnya akan dikembalikan dalam bentuk janji.

function computeFrame() {
  ctx_tmp.drawImage(video,0,0,video.videoWidth,video.videoHeight);
  let frame = ctx_tmp.getImageData(0,0,video.videoWidth,video.videoHeight);

  model.segmentPerson(c_tmp,segmentationConfig).then((segmentation) => {
     //frame processing
  });
}

Menghapus Manusia Dari Video

Setelah segmentasi selesai, kita akan membuat loop bersarang untuk melakukan iterasi melalui setiap piksel pada gambar. Karena data gambar dalam format array dimensi tunggal. Saya akan membuat variabel indeks. “N” untuk mengakses setiap piksel.

model.segmentPerson(c_tmp,segmentationConfig).then((segmentation) => {
        let out_image = ctx_out.getImageData(0,0,video.videoWidth,video.videoHeight);

        for(let x=0;x<video.videoWidth;x++){
          for(y=0;y<video.videoHeight;y++) {
            let n = x + (y * video.videoWidth);
....

Berikut hasil segmentasi dari model tersebut. Ini adalah array dimensi tunggal yang hanya berisi 0 dan 1. Semua piksel non-manusia akan memiliki nilai nol (Gambar dari Tensorflow.js blog)

segmentasi bodypix

Jadi saya akan membuat pernyataan if untuk memeriksa apakah piksel saat ini BUKAN bagian dari manusia, lalu kita akan menyalin data piksel dari video ke kanvas keluaran. Jika itu manusia, kami akan melewatkan proses pembaruan.
Dengan trik sederhana ini, kita dapat menghapus orang tersebut dari video.

if(segmentation.data[n] == 0) {
  out_image.data[n * 4] = frame.data[n * 4];         //R
  out_image.data[n * 4 + 1] = frame.data[n * 4 + 1]; //G
  out_image.data[n * 4 + 2] = frame.data[n * 4 + 2]; //B
  out_image.data[n * 4 + 3] = frame.data[n * 4 + 3]; //A
}

Anda akan melihat bahwa saya mengalikan indeks dengan 4. Ini karena setiap piksel memiliki 4 data, RGB dan alpha yang membutuhkan 4 ruang array untuk satu piksel (lihat gambar di bawah)

piksel array data gambar

struktur larik data gambar

Langkah terakhir adalah meletakkan hasilnya ke kanvas keluaran. Juga pindahkan pembaruan di dalam janji. Dan inilah tampilan fungsi computeFrame terakhir

function computeFrame() {
  ctx_tmp.drawImage(video,0,0,video.videoWidth,video.videoHeight);
  let frame = ctx_tmp.getImageData(0,0,video.videoWidth,video.videoHeight);

  model.segmentPerson(c_tmp,segmentationConfig).then((segmentation) => {
    let out_image = ctx_out.getImageData(0,0,video.videoWidth,video.videoHeight);

    for(let x=0;x<video.videoWidth;x++){
      for(y=0;y<video.videoHeight;y++) {
        let n = x + (y * video.videoWidth);

        if(segmentation.data[n] == 0) {
          out_image.data[n * 4] = frame.data[n * 4]; //R
          out_image.data[n * 4 + 1] = frame.data[n * 4 + 1]; //G
          out_image.data[n * 4 + 2] = frame.data[n * 4 + 2]; //B
          out_image.data[n * 4 + 3] = frame.data[n * 4 + 3]; //A
        }
      }
    }
    ctx_out.putImageData(out_image,0,0);
    setTimeout(computeFrame,0);
  });
}

Dan inilah hasilnya. Tidak sempurna tapi tetap luar biasa!

Anda dapat mengunduh kode sumber dari tutorial ini di sini atau lihat video di bawah untuk demo.

[embed]https://www.youtube.com/watch?v=K00jm5A4E8c[/embed]

Bawa pulang

Anda mungkin harus menyesuaikan konfigurasi model untuk setiap video. Menetapkan ambang batas rendah akan mengakibatkan beberapa piksel non-manusia dihapus (lihat cabang di kanan bawah)

tensorflow.js bodypix menghapus orang dari video

Harap perhatikan juga bahwa trik ini memiliki beberapa kekurangan. Pertama jika selalu ada manusia di area tertentu di video itu tidak akan berfungsi. Juga teknik ini membutuhkan video latar belakang tetap (Tanpa zooming / panning)

Dan itu saja untuk tutorial ini. Semoga kalian menikmati. Jika Anda ingin melihat lebih banyak tips pengembangan dan video tutorial, silakan berlangganan saluran untuk tetap mendengarkan!

Ditulis oleh

Chapter List For Manga: Hapus Orang dari Video dengan AI dan JavaScript

Chapter 	1
Chapter 	2
Chapter 	3
Chapter 	4
Chapter 	5
Chapter 	6
Chapter 	7
Chapter 	8
Chapter 	9
Chapter 	10
Chapter 	11
Chapter 	12
Chapter 	13
Chapter 	14
Chapter 	15
Chapter 	16
Chapter 	17
Chapter 	18
Chapter 	19
Chapter 	20
Chapter 	21
Chapter 	22
Chapter 	23
Chapter 	24
Chapter 	25
Chapter 	26
Chapter 	27
Chapter 	28
Chapter 	29
Chapter 	30
Chapter 	31
Chapter 	32
Chapter 	33
Chapter 	34
Chapter 	35
Chapter 	36
Chapter 	37
Chapter 	38
Chapter 	39
Chapter 	40
Chapter 	41
Chapter 	42
Chapter 	43
Chapter 	44
Chapter 	45
Chapter 	46
Chapter 	47
Chapter 	48
Chapter 	49
Chapter 	50
Chapter 	51
Chapter 	52
Chapter 	53
Chapter 	54
Chapter 	55
Chapter 	56
Chapter 	57
Chapter 	58
Chapter 	59
Chapter 	60
Chapter 	61
Chapter 	62
Chapter 	63
Chapter 	64
Chapter 	65
Chapter 	66
Chapter 	67
Chapter 	68
Chapter 	69
Chapter 	70
Chapter 	71
Chapter 	72
Chapter 	73
Chapter 	74
Chapter 	75
Chapter 	76
Chapter 	77
Chapter 	78
Chapter 	79
Chapter 	80
Chapter 	81
Chapter 	82
Chapter 	83
Chapter 	84
Chapter 	85
Chapter 	86
Chapter 	87
Chapter 	88
Chapter 	89
Chapter 	90
Chapter 	91
Chapter 	92
Chapter 	93
Chapter 	94
Chapter 	95
Chapter 	96
Chapter 	97
Chapter 	98
Chapter 	99
Chapter 	100
Chapter 	101
Chapter 	102
Chapter 	103
Chapter 	104
Chapter 	105
Chapter 	106
Chapter 	107
Chapter 	108
Chapter 	109
Chapter 	110
Chapter 	111
Chapter 	112
Chapter 	113
Chapter 	114
Chapter 	115
Chapter 	116
Chapter 	117
Chapter 	118
Chapter 	119
Chapter 	120
Chapter 	121
Chapter 	122
Chapter 	123
Chapter 	124
Chapter 	125
Chapter 	126
Chapter 	127
Chapter 	128
Chapter 	129
Chapter 	130
Chapter 	131
Chapter 	132
Chapter 	133
Chapter 	134
Chapter 	135
Chapter 	136
Chapter 	137
Chapter 	138
Chapter 	139
Chapter 	140
Chapter 	141
Chapter 	142
Chapter 	143
Chapter 	144
Chapter 	145
Chapter 	146
Chapter 	147
Chapter 	148
Chapter 	149
Chapter 	150
Chapter 	151
Chapter 	152
Chapter 	153
Chapter 	154
Chapter 	155
Chapter 	156
Chapter 	157
Chapter 	158
Chapter 	159
Chapter 	160
Chapter 	161
Chapter 	162
Chapter 	163
Chapter 	164
Chapter 	165
Chapter 	166
Chapter 	167
Chapter 	168
Chapter 	169
Chapter 	170
Chapter 	171
Chapter 	172
Chapter 	173
Chapter 	174
Chapter 	175
Chapter 	176
Chapter 	177
Chapter 	178
Chapter 	179
Chapter 	180
Chapter 	181
Chapter 	182
Chapter 	183
Chapter 	184
Chapter 	185
Chapter 	186
Chapter 	187
Chapter 	188
Chapter 	189
Chapter 	190
Chapter 	191
Chapter 	192
Chapter 	193
Chapter 	194
Chapter 	195
Chapter 	196
Chapter 	197
Chapter 	198
Chapter 	199
Chapter 	200
Chapter 	201
Chapter 	202
Chapter 	203
Chapter 	204
Chapter 	205
Chapter 	206
Chapter 	207
Chapter 	208
Chapter 	209
Chapter 	210
Chapter 	211
Chapter 	212
Chapter 	213
Chapter 	214
Chapter 	215
Chapter 	216
Chapter 	217
Chapter 	218
Chapter 	219
Chapter 	220
Chapter 	221
Chapter 	222
Chapter 	223
Chapter 	224
Chapter 	225
Chapter 	226
Chapter 	227
Chapter 	228
Chapter 	229
Chapter 	230
Chapter 	231
Chapter 	232
Chapter 	233
Chapter 	234
Chapter 	235
Chapter 	236
Chapter 	237
Chapter 	238
Chapter 	239
Chapter 	240
Chapter 	241
Chapter 	242
Chapter 	243
Chapter 	244
Chapter 	245
Chapter 	246
Chapter 	247
Chapter 	248
Chapter 	249
Chapter 	250
Chapter 	251
Chapter 	252
Chapter 	253
Chapter 	254
Chapter 	255
Chapter 	256
Chapter 	257
Chapter 	258
Chapter 	259
Chapter 	260
Chapter 	261
Chapter 	262
Chapter 	263
Chapter 	264
Chapter 	265
Chapter 	266
Chapter 	267
Chapter 	268
Chapter 	269
Chapter 	270
Chapter 	271
Chapter 	272
Chapter 	273
Chapter 	274
Chapter 	275
Chapter 	276
Chapter 	277
Chapter 	278
Chapter 	279
Chapter 	280
Chapter 	281
Chapter 	282
Chapter 	283
Chapter 	284
Chapter 	285
Chapter 	286
Chapter 	287
Chapter 	288
Chapter 	289
Chapter 	290
Chapter 	291
Chapter 	292
Chapter 	293
Chapter 	294
Chapter 	295
Chapter 	296
Chapter 	297
Chapter 	298
Chapter 	299
Chapter 	300
Chapter 	301
Chapter 	302
Chapter 	303
Chapter 	304
Chapter 	305
Chapter 	306
Chapter 	307
Chapter 	308
Chapter 	309
Chapter 	310
Chapter 	311
Chapter 	312
Chapter 	313
Chapter 	314
Chapter 	315
Chapter 	316
Chapter 	317
Chapter 	318
Chapter 	319
Chapter 	320
Chapter 	321
Chapter 	322
Chapter 	323
Chapter 	324
Chapter 	325
Chapter 	326
Chapter 	327
Chapter 	328
Chapter 	329
Chapter 	330
Chapter 	331
Chapter 	332
Chapter 	333
Chapter 	334
Chapter 	335
Chapter 	336
Chapter 	337
Chapter 	338
Chapter 	339
Chapter 	340
Chapter 	341
Chapter 	342
Chapter 	343
Chapter 	344
Chapter 	345
Chapter 	346
Chapter 	347
Chapter 	348
Chapter 	349
Chapter 	350
Chapter 	351
Chapter 	352
Chapter 	353
Chapter 	354
Chapter 	355
Chapter 	356
Chapter 	357
Chapter 	358
Chapter 	359
Chapter 	360
Chapter 	361
Chapter 	362
Chapter 	363
Chapter 	364
Chapter 	365
Chapter 	366
Chapter 	367
Chapter 	368
Chapter 	369
Chapter 	370
Chapter 	371
Chapter 	372
Chapter 	373
Chapter 	374
Chapter 	375
Chapter 	376
Chapter 	377
Chapter 	378
Chapter 	379
Chapter 	380
Chapter 	381
Chapter 	382
Chapter 	383
Chapter 	384
Chapter 	385
Chapter 	386
Chapter 	387
Chapter 	388
Chapter 	389
Chapter 	390
Chapter 	391
Chapter 	392
Chapter 	393
Chapter 	394
Chapter 	395
Chapter 	396
Chapter 	397
Chapter 	398
Chapter 	399
Chapter 	400
Chapter 	401
Chapter 	402
Chapter 	403
Chapter 	404
Chapter 	405
Chapter 	406
Chapter 	407
Chapter 	408
Chapter 	409
Chapter 	410
Chapter 	411
Chapter 	412
Chapter 	413
Chapter 	414
Chapter 	415
Chapter 	416
Chapter 	417
Chapter 	418
Chapter 	419
Chapter 	420
Chapter 	421
Chapter 	422
Chapter 	423
Chapter 	424
Chapter 	425
Chapter 	426
Chapter 	427
Chapter 	428
Chapter 	429
Chapter 	430
Chapter 	431
Chapter 	432
Chapter 	433
Chapter 	434
Chapter 	435
Chapter 	436
Chapter 	437
Chapter 	438
Chapter 	439
Chapter 	440
Chapter 	441
Chapter 	442
Chapter 	443
Chapter 	444
Chapter 	445
Chapter 	446
Chapter 	447
Chapter 	448
Chapter 	449
Chapter 	450
Chapter 	451
Chapter 	452
Chapter 	453
Chapter 	454
Chapter 	455
Chapter 	456
Chapter 	457
Chapter 	458
Chapter 	459
Chapter 	460
Chapter 	461
Chapter 	462
Chapter 	463
Chapter 	464
Chapter 	465
Chapter 	466
Chapter 	467
Chapter 	468
Chapter 	469
Chapter 	470
Chapter 	471
Chapter 	472
Chapter 	473
Chapter 	474
Chapter 	475
Chapter 	476
Chapter 	477
Chapter 	478
Chapter 	479
Chapter 	480
Chapter 	481
Chapter 	482
Chapter 	483
Chapter 	484
Chapter 	485
Chapter 	486
Chapter 	487
Chapter 	488
Chapter 	489
Chapter 	490
Chapter 	491
Chapter 	492
Chapter 	493
Chapter 	494
Chapter 	495
Chapter 	496
Chapter 	497
Chapter 	498
Chapter 	499
Chapter 	500

Such is the Manga Hapus Orang dari Video dengan AI dan JavaScript

That's all the Manga's Chapter Hapus Orang dari Video dengan AI dan JavaScript this time, hopefully it can be of benefit to all of you. well, see you in another manga article post.

You are now reading manga Hapus Orang dari Video dengan AI dan JavaScript with the link address https://tumbalbl.blogspot.com/2021/02/hapus-orang-dari-video-dengan-ai-dan.html

TumbalTech

Ad Unit (Iklan) BIG

Hapus Orang dari Video dengan AI dan JavaScript

Pengaturan Dasar

Penyiapan Model ML

Menghapus Manusia Dari Video

Bawa pulang

Chapter List For Manga: Hapus Orang dari Video dengan AI dan JavaScript

Such is the Manga Hapus Orang dari Video dengan AI dan JavaScript

Related Posts

Posting Komentar

Posting Komentar

Recent

Genre:

Popular Manga