Streaming langsung di halaman web - ApsaraVideo Live - Alibaba Cloud Documentation Center

ApsaraVideo Live mendukung berbagai SDK platform dan metode ingest aliran adaptif untuk perangkat yang berbeda. Anda dapat menggabungkan SDK pemutar apa pun dengan metode ingest apa pun agar sesuai dengan skenario bisnis Anda.

Prasyarat

ApsaraVideo Live telah diaktifkan. Untuk informasi selengkapnya, lihat Memulai ApsaraVideo Live.
Domain ingest dan domain streaming yang digunakan untuk live streaming telah dikonfigurasi. Untuk informasi selengkapnya, lihat Langkah 1: Tambahkan domain ingest dan streaming, Langkah 2: Tambahkan Rekaman CNAME untuk mengaktifkan akselerasi, dan Langkah 3: Kaitkan domain ingest dan streaming.

Langkah 1: Hasilkan URL ingest dan URL streaming

Gunakan URL ingest untuk mendorong aliran langsung dan URL streaming untuk menariknya guna diputar. Untuk informasi selengkapnya, lihat Hasilkan URL ingest dan streaming.

Pada halaman Pembuat URL, konfigurasikan streaming domain, ingest domain terkait (otentikasi default ke Mode A; URL berlaku selama 30 menit), AppName, StreamName, dan template transkoding. Klik Generate untuk membuat URL ingest dan streaming.

Langkah 2: Ingest aliran langsung

Pengambilan aliran mengirimkan audio dan video yang ditangkap ke pusat ApsaraVideo Live. Contoh berikut menggunakan OBS Studio untuk mengingest aliran.

Catatan

Streaming standar tidak menyediakan SDK stream ingest untuk web. Gunakan OBS Studio atau Push SDK sebagai gantinya. Untuk informasi selengkapnya tentang alat ingest aliran, lihat Ingest aliran langsung.

Unduh dan instal OBS Studio dari situs web OBS Studio.
Jalankan OBS Studio.
Pada bilah menu, pilih File > Settings.

Pada halaman Settings, klik Stream dan konfigurasikan parameter berikut:

Parameter	Deskripsi
Service	Pilih Custom.
Server	Masukkan URL ingest terotentikasi yang telah dihasilkan. Contoh: `rtmp://demo.aliyundoc.com/app/stream?auth_key=1543302081-0-0-9c6e7c8190c10bdfb3c0************`.
Stream Key	Biarkan Stream Key kosong.

Pada jendela utama OBS Studio, tambahkan sumber di bagian Sources, lalu klik Start Streaming.
Buka halaman Manajemen Aliran. Pada tab Active Streams, Anda dapat melihat dan mengelola aliran aktif Anda.

Langkah 3: Putar aliran langsung

Anda dapat menggunakan ApsaraVideo Player SDK for Web untuk memutar aliran langsung. Untuk informasi selengkapnya, lihat Pemutar web.

Untuk mengintegrasikan ApsaraVideo Player SDK for Web dan memutar aliran langsung di halaman web, lakukan langkah-langkah berikut.

Tambahkan file .js tertentu ke proyek Anda.

ApsaraVideo Player SDK for Web tidak bergantung pada library .js antarmuka depan. Tambahkan file .js berikut ke proyek Anda untuk menginisialisasi pemutar.

<head>
  <link rel="stylesheet" href="  https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/skins/default/aliplayer-min.css" />  // Opsional. Jika Anda ingin menggunakan pemutar HTML5 untuk pemutaran, tambahkan file .css ke proyek Anda. 
  <script charset="utf-8" type="text/javascript" src="  https://g.alicdn.com/apsara-media-box/imp-web-player/2.28.3/aliplayer-min.js"></script>  // Wajib. Impor file .js. 
</head>

Tentukan kontainer untuk pemutar.

<body>
  <div id="J_prismPlayer"></div>
</body>

Buat instance pemutar.

Untuk mengalirkan konten dari URL, atur parameter source ke URL streaming dan parameter isLive ke true. Untuk informasi selengkapnya tentang cara memperoleh URL streaming, lihat Langkah 1: Hasilkan URL ingest dan URL streaming.

Kode contoh untuk streaming dari URL:

<script>
  var player = new Aliplayer({
    id: 'J_prismPlayer',
    source: '<your play URL>'// URL streaming yang dihasilkan di ApsaraVideo Live. 
    isLive: true,// Tentukan apakah akan memutar aliran langsung. 
    },function(player){
      console.log('Pemutar berhasil dibuat.')
    });
</script>

Percobaan online dan kode sumber demo

Coba demo untuk PC

ApsaraVideo Player SDK for Web menyediakan percobaan online yang divisualisasikan. Kunjungi halaman Online Settings untuk mengonfigurasi fitur pemutaran dasar dan menyesuaikan tata letak UI.

Catatan

Jika Anda menggunakan pemutar HTML5 untuk live streaming, URL streaming harus dalam format ARTC, FLV, atau HLS. Format RTMP tidak didukung.

Halaman Online Settings memiliki lima tab: Basic Settings, More Settings, Skin Customization, Playback Preview, dan Code. Pada formulir Basic Settings, Anda dapat mengonfigurasi Video Type (VOD atau Live), Playback Method (URL), Playback URL, URL Cover, Width (default: 100%), dan Height (default: 500px), serta mengaktifkan opsi seperti Autoplay, Inline Playback, Preload, dan Loop.

Coba demo untuk perangkat seluler

Untuk mendapatkan demo untuk browser seluler, gunakan aplikasi DingTalk di perangkat seluler Anda untuk memindai kode QR berikut.

Penting

Pada perangkat Android, browser internal di WeChat dan QQ dapat mengubah pengaturan ApsaraVideo Player SDK tanpa otorisasi atau sepengetahuan Anda. Dalam kasus ini, fitur-fitur tertentu dari ApsaraVideo Player SDK tidak dapat digunakan.

二维码

Kode sumber demo terkait fitur

ApsaraVideo Player SDK for Web menyediakan showcase fitur online yang menampilkan fitur beserta implementasi kodenya. Untuk daftar lengkap fitur dan contoh kode, lihat Feature Showcase. Halaman Aliplayer Feature Showcase memiliki tiga tab navigasi: Basic Functions (seperti cover, delayed playback, screenshots, loop playback, dan video 4K), Components and Plugins (seperti iklan gambar, marquee, resume playback, Danmu, kontrol kecepatan pemutaran, dan komponen subtitle), dan Advanced Functions (seperti subtitle, multiple audio tracks, multiple sources, adaptive HLS, internationalization, dan custom skins). Saat fitur cover dipilih, panel kiri menampilkan pratinjau pemutar dengan gambar cover, sedangkan panel kanan menampilkan kode inisialisasi HTML yang sesuai. Kode ini mencakup parameter seperti source, width, height, cover, autoplay, preload, dan isLive. Anda dapat mengklik tombol Copy untuk menyalin kode tersebut.

Kode sumber demo untuk integrasi dengan Vue

ApsaraVideo Player SDK for Web menyediakan kode sumber demo untuk mengintegrasikan SDK dengan framework Vue.

Untuk informasi selengkapnya tentang demo tersebut, lihat Demo ApsaraVideo Player berbasis Vue.

Program mini WeChat

Program mini WeChat tidak memiliki DOM API dan BOM API. Dalam kasus ini, library tertentu yang umum digunakan dalam pengembangan antarmuka depan, seperti jQuery dan Zepto, tidak dapat dimuat di program mini WeChat. Demikian pula, ApsaraVideo Player SDK for Web yang bergantung pada dukungan browser tidak dapat dijalankan di program mini WeChat. Oleh karena itu, Anda harus menggunakan komponen video default yang disediakan oleh program mini WeChat untuk memutar video. Untuk informasi selengkapnya, kunjungi vod-mini-program.

Referensi

Saat menggunakan ApsaraVideo Player SDK for Web, pengaturan untuk fitur-fitur umum dapat bervariasi tergantung pada pemutar, metode pemutaran, atau lingkungan browser. Untuk informasi selengkapnya, lihat Fitur dasar.
ApsaraVideo Player SDK for Web juga menyediakan fitur lanjutan, termasuk kontrol pemutaran dan pemutaran video panjang. Untuk informasi selengkapnya, lihat Fitur lanjutan.
Untuk referensi API ApsaraVideo Player SDK for Web, lihat Referensi API Aliplayer.
Untuk FAQ tentang ApsaraVideo Player SDK for Web, lihat FAQ Player SDK for Web.