全部产品
Search
文档中心

SuperApp:Kamera

更新时间:Jun 28, 2025

Topik ini menjelaskan API JavaScript dari WVCamera. Anda dapat merujuk pada topik ini saat membuat aplikasi HTML5 atau MiniApps. Gunakan API JavaScript dari WVCamera untuk mengambil foto, mengunggah foto, dan mengunggah beberapa foto sekaligus.

WVCamera.takePhoto

Memungkinkan Anda memanggil kamera untuk mengambil foto atau langsung memilih foto dari album. Setelah mendapatkan foto, fungsi unggah foto dapat diimplementasikan di sisi program mini.

Penting

Di iOS 11, tambahkan kunci "NSPhotoLibraryAddUsageDescription" ke Info.plist. Kunci ini digunakan untuk menjelaskan alasan aplikasi meminta akses ke album pengguna.

Contoh kode:

var photoLocalPath; // Jalur untuk menyimpan file lokal.
var params = {
        mode: 'both',
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
      var uploadParams = {
            // Jalur tempat foto yang ingin Anda unggah disimpan.
            path: e.localPath
      };
      // Implementasikan transmisi file ke layanan backend untuk penyimpanan file.
      ...
      ...
}, function(e) {
        alert('takePhoto gagal: ' + JSON.stringify(e));
});

Parameter Input

  • [string] mode: opsional. 'camera' menunjukkan pengambilan foto, 'photo' menunjukkan pemilihan foto dari album, default adalah 'both'.

  • [boolean] compatible: opsional, harus diatur true setelah miniapp ditampilkan.

Parameter Callback

Parameter callback diteruskan menggunakan metode callback. Jika foto berhasil diperoleh, success callback dipanggil. Jika gagal atau operasi dibatalkan, failure callback dipanggil.

Parameter untuk callback sukses:

  • [string] url: URL akses. URL ini ditentukan dalam properti src elemen <img>. Digunakan untuk melihat pratinjau foto.

    Penting

    URL ini bukan URL jaringan pengiriman konten (CDN) yang sebenarnya dan tidak dapat diakses dari browser.

  • [string] localPath: jalur lokal foto. Jalur ini dapat digunakan untuk mengunggah foto.

  • [string] identifier: pengenal foto. Jika menggunakan Mtop untuk mengunggah foto, nilai parameter identifier dalam parameter input dikembalikan. Atur parameter v menjadi '2.0', lalu gunakan Mtop untuk mengunggah foto.

  • [string] base64Data: data Base64 dari foto. Parameter ini hanya valid jika needBase64 diatur ke true. Saat menggunakan parameter base64Data, tambahkan awalan data:image/png;base64, ke nilai tersebut.

Parameter untuk callback gagal:

  • [string] errorType: jenis kesalahan.

  • [string] errorCode: kode kesalahan.

  • [string] errorMsg: pesan kesalahan.

  • [string] identifier: pengenal foto. Jika menggunakan Mtop untuk mengunggah foto, nilai parameter identifier dalam parameter input dikembalikan. Atur parameter v menjadi '2.0', lalu gunakan Mtop untuk mengunggah foto.

Catatan

Jika operasi pengambilan foto dibatalkan, callback gagal dipanggil. Di iOS, {ret:'HY_RET_PHOTO_CANCLE'} adalah satu-satunya parameter callback. Di Android, {ret:'HY_FAILED'} adalah satu-satunya parameter callback. Jika klien tidak memiliki izin untuk mengakses kamera atau album, callback gagal juga dipanggil. Dalam hal ini, {msg:'NO_PERMISSION'} termasuk dalam parameter callback iOS dan Android.

Pemantauan Event

WVPhoto.Event.takePhotoSuccess

Event WVPhoto.Event.takePhotoSuccess dipicu ketika foto diperoleh dan akan diunggah. Dalam hal ini, JavaScript memungkinkan Anda melihat pratinjau foto di halaman.

Parameter event:

  • [string] url: URL akses. URL ini ditentukan dalam properti src elemen <img>. Digunakan untuk melihat pratinjau foto.

    Penting

    URL ini bukan URL jaringan pengiriman konten (CDN) yang sebenarnya dan tidak dapat diakses dari browser.

  • [string] localPath: jalur lokal foto. Jalur ini dapat digunakan dalam proses unggah berikutnya.

Mode pemilihan gambar multi

Catatan

Fitur ini didukung hanya di WindVane iOS.

Anda dapat memilih beberapa foto dari album untuk mengunggah foto secara bersamaan. Fitur ini hanya didukung di WindVane iOS. Anda hanya dapat memilih satu foto jika mengambil foto. Kami merekomendasikan mengonfigurasi mode: 'photo' untuk langsung mengakses album.

Parameter Input

  • [string] mutipleSelection: (opsional) menentukan apakah menggunakan mode pemilihan gambar multi. Jika diatur ke '1', mode pemilihan gambar multi digunakan. Jika diatur ke '0', mode pemilihan gambar multi tidak digunakan. Nilai default: '0'.

  • [int] maxSelect: (opsional) jumlah maksimum foto yang dapat dipilih dalam mode pemilihan gambar multi. Nilai default: 9.

Parameter Callback

Parameter callback diteruskan menggunakan metode callback. Jika foto berhasil diperoleh, success callback dipanggil. Jika gagal atau operasi dibatalkan, failure callback dipanggil.

Parameter untuk callback sukses:

  • [array] images: array foto yang dipilih. Setiap item dalam array berisi properti berikut:

    • [string] url: URL akses. URL ini ditentukan dalam properti src elemen <img>. Digunakan untuk melihat pratinjau foto.

      Penting

      URL ini bukan URL jaringan pengiriman konten (CDN) yang sebenarnya dan tidak dapat diakses dari browser.

    • [string] localPath: jalur lokal foto. Jalur ini dapat digunakan saat memanggil WVCamera.confirmUploadPhoto untuk mengunggah foto.

Parameter untuk callback gagal:

  • [string] errorType: jenis kesalahan.

  • [string] errorCode: kode kesalahan.

  • [string] errorMsg: pesan kesalahan.

  • [string] identifier: pengenal foto. Jika menggunakan Mtop untuk mengunggah foto, nilai parameter input identifier dikembalikan. Atur parameter v menjadi '2.0', lalu gunakan Mtop untuk mengunggah foto.

Penting

Jika operasi pengambilan foto dibatalkan, callback gagal dipanggil. Di iOS, {ret:'HY_RET_PHOTO_CANCLE'} adalah satu-satunya parameter callback. Di Android, {ret:'HY_FAILED'} adalah satu-satunya parameter callback. Jika klien tidak memiliki izin untuk mengakses kamera atau album, callback gagal juga dipanggil. Dalam hal ini, {msg:'NO_PERMISSION'} termasuk dalam parameter callback iOS dan Android.

Pemantauan Event

Event WVPhoto.Event.takePhotoSuccess dipicu ketika foto diperoleh dan akan diunggah. Dalam hal ini, JavaScript memungkinkan Anda melihat pratinjau foto di halaman.

Parameter event:

  • [string] url: URL akses. URL ini ditentukan dalam properti src elemen <img>. Digunakan untuk melihat pratinjau foto.

    Penting

    URL ini bukan URL jaringan pengiriman konten (CDN) yang sebenarnya dan tidak dapat diakses dari browser.

  • [string] localPath: jalur lokal foto. Jalur ini dapat digunakan dalam proses unggah berikutnya dan hanya digunakan di WindVane Android.

Event berikut hanya dipicu ketika foto langsung diunggah setelah diambil:

WVPhoto.Event.uploadPhotoSuccess: Event ini menunjukkan bahwa foto telah diunggah. Event ini dipicu setiap kali foto diunggah.

Parameter event:

  • [string] url: URL akses. URL ini ditentukan dalam properti src elemen <img>. Digunakan untuk melihat pratinjau foto.

    Penting

    URL ini bukan URL jaringan pengiriman konten (CDN) yang sebenarnya dan tidak dapat diakses dari browser.

  • [string] localPath: jalur lokal foto. Jalur ini dapat digunakan saat memanggil WVCamera.confirmUploadPhoto untuk mengunggah foto.

  • [string] identifier: pengenal foto. Jika menggunakan Mtop untuk mengunggah foto, nilai parameter input identifier dikembalikan. Atur parameter v menjadi '2.0', lalu gunakan Mtop untuk mengunggah foto.

WVPhoto.Event.uploadPhotoFailed

Event ini menunjukkan bahwa foto gagal diunggah. Event ini dipicu setiap kali foto gagal diunggah.

Parameter event:

  • [string] errorType: jenis kesalahan.

  • [string] errorCode: kode kesalahan.

  • [string] errorMsg: pesan kesalahan.

  • [string] identifier: pengenal foto. Jika menggunakan Mtop untuk mengunggah foto, nilai parameter input identifier dikembalikan. Atur parameter v menjadi '2.0', lalu gunakan Mtop untuk mengunggah foto.

document.addEventListener('WVPhoto.Event.uploadPhotoSuccess', function (e) {
        alert('event uploadPhotoSuccess: ' + JSON.stringify(e.param));
});
document.addEventListener('WVPhoto.Event.uploadPhotoFailed', function (e) {
        alert('event uploadPhotoFailed: ' + JSON.stringify(e.param));
});

var params = {
        // Menentukan apakah akan mengunggah foto secara otomatis setelah foto diperoleh.
        type: '1',
        // Menentukan apakah hanya mengizinkan Anda mengambil foto atau memilih foto dari album.
        mode: 'photo',
        // Metode unggah.
        v: '2.0',
        // Menentukan apakah akan menggunakan mode pemilihan gambar multi.
        mutipleSelection: '1',
        // Jumlah maksimum foto yang dapat dipilih dalam mode pemilihan gambar multi.
        maxSelect: 6
};
window.WindVane.call('WVCamera', 'takePhoto', params, function(e) {
        alert('takePhoto sukses: ' + JSON.stringify(e));
}, function(e) {
        alert('takePhoto gagal: ' + JSON.stringify(e));
});