Thiết lập SDK IMA cho DAI

SDK IMA giúp bạn dễ dàng tích hợp quảng cáo đa phương tiện vào trang web và ứng dụng của mình. SDK IMA có thể yêu cầu quảng cáo từ bất kỳ máy chủ quảng cáo tuân thủ VAST nào và quản lý việc phát quảng cáo trong ứng dụng của bạn. Với SDK DAI của IMA, các ứng dụng sẽ đưa ra yêu cầu về luồng cho quảng cáo và video nội dung – có thể là nội dung VOD hoặc nội dung trực tiếp. Sau đó, SDK sẽ trả về một luồng video kết hợp, nhờ đó bạn không phải quản lý việc chuyển đổi giữa quảng cáo và video nội dung trong ứng dụng của mình.

Chọn giải pháp DAI mà bạn quan tâm

Phát các luồng VOD đã đăng ký bằng API Công cụ kết hợp video trên đám mây của Google

Hướng dẫn này minh hoạ cách sử dụng SDK DAI IMA cho HTML5 để yêu cầu và phát phiên phát trực tiếp VOD trên Google Cloud.

Hướng dẫn này mở rộng ví dụ cơ bản trong Hướng dẫn bắt đầu cho IMA DAI.

Để biết thông tin về cách tích hợp với các nền tảng khác hoặc cách sử dụng SDK phía máy khách IMA, hãy xem SDK quảng cáo trên phương tiện truyền thông tương tác.

Để xem hoặc làm theo một mẫu tích hợp đã hoàn tất, hãy tải ví dụ về trình ghép video trên đám mây xuống cho HLS hoặc DASH.

Thiết lập một dự án trên Google Cloud

Thiết lập một dự án trên Google Cloud và định cấu hình tài khoản dịch vụ để truy cập vào dự án.

Nhập các biến sau để sử dụng trong SDK IMA:

Vị trí
Khu vực Google Cloud nơi bạn tạo cấu hình VOD: LOCATION
Số hiệu dự án
Số dự án trên Google Cloud sử dụng Video Stitcher API: PROJECT_NUMBER
Mã thông báo OAuth

Mã thông báo OAuth có thời hạn ngắn của tài khoản dịch vụ với vai trò người dùng Video Stitcher: 

OAUTH_TOKEN

Đọc thêm về cách tạo mã thông báo OAuth có thời hạn ngắn. Bạn có thể sử dụng lại mã thông báo OAuth cho nhiều yêu cầu miễn là mã thông báo đó chưa hết hạn.

Mã mạng

Mã mạng Ad Manager để yêu cầu quảng cáo: NETWORK_CODE

Mã cấu hình VOD

Mã cấu hình VOD cho luồng VOD: VOD_CONFIG_ID

Đọc thêm về cách tạo mã nhận dạng cấu hình VOD trong Hướng dẫn tạo cấu hình VOD bằng tính năng ghép nối trên đám mây.

Định cấu hình môi trường phát triển

Các ứng dụng mẫu IMA chỉ minh hoạ các yêu cầu về luồng HLS. Bạn vẫn có thể sử dụng luồng DASH khi tạo lớp VideoStitcherVodStreamRequest. Khi thiết lập trình phát tương thích với DASH, bạn cần thiết lập một trình nghe cho các sự kiện tiến trình của trình phát video. Trình nghe này có thể cung cấp siêu dữ liệu của video cho StreamManager.processMetadata(). Hàm này có 3 tham số:

  1. type: Một chuỗi phải được đặt thành 'ID3' cho luồng HLS và 'urn:google:dai:2018' cho luồng DASH.

  2. data: Đối với thông báo sự kiện DASH, đây là chuỗi dữ liệu thông báo.

  3. timestamp: Một số là thời gian bắt đầu thông báo sự kiện cho luồng DASH.

Gửi siêu dữ liệu sớm và thường xuyên nhất có thể khi các sự kiện của trình phát cung cấp. Nếu thiếu hoặc không có siêu dữ liệu chính xác, IMA DAI SDK có thể không kích hoạt các sự kiện quảng cáo, dẫn đến việc báo cáo không đúng các sự kiện quảng cáo.

Tải các ví dụ về DAI của IMA cho HTML5 xuống rồi giải nén tệp zip mẫu hls_js/simple vào một thư mục mới. Ví dụ này là một ứng dụng web mà bạn có thể lưu trữ cục bộ cho mục đích kiểm thử.

Để lưu trữ ví dụ cục bộ, hãy chuyển đến thư mục mới rồi chạy lệnh python sau để khởi động một máy chủ web:

python3 -m http.server 8000

http.server chỉ có trong Python 3.x. Bạn có thể sử dụng bất kỳ máy chủ web nào khác, chẳng hạn như Máy chủ HTTP Apache hoặc Node JS.

Mở trình duyệt web rồi chuyển đến localhost:8000 để xem trình phát video. Trình duyệt của bạn phải hỗ trợ thư viện HLS.js.

Nếu mọi thứ hoạt động bình thường, khi bạn nhấp vào nút phát trên trình phát video, phim ngắn "Tears of Steel" sẽ bắt đầu phát, với các khoảng chèn quảng cáo sau mỗi 30 giây.

Yêu cầu luồng VOD

Để thay thế luồng mẫu bằng luồng VOD được ghép quảng cáo, hãy sử dụng lớp VideoStitcherVodStreamRequest để tự động tạo một phiên quảng cáo bằng Google Ad Manager. Bạn có thể sử dụng giao diện người dùng Google Ad Manager để xác định vị trí các phiên DAI đã tạo nhằm theo dõi và gỡ lỗi.

Trong mẫu hiện có, có các hàm để yêu cầu một luồng VOD hoặc một luồng phát trực tiếp. Để sử dụng API Google Cloud Video Stitcher, bạn cần thêm một hàm mới để trả về đối tượng VideoStitcherVodStreamRequest.

Ví dụ:

// StreamManager which will be used to request DAI streams.
let streamManager;
...

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  streamManager.addEventListener(
    [
      google.ima.dai.api.StreamEvent.Type.LOADED,
      google.ima.dai.api.StreamEvent.Type.ERROR,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
    ],
    onStreamEvent, false);

  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });

  videoElement.addEventListener('pause', () => {
    playButton.style.display = "block";
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Tải lại trang. Sau đó, bạn có thể yêu cầu và phát luồng VOD tuỳ chỉnh.

(Không bắt buộc) Thêm các lựa chọn về phiên phát trực tiếp

Tuỳ chỉnh yêu cầu phát trực tuyến bằng cách thêm các lựa chọn về phiên để ghi đè cấu hình mặc định của Cloud Video Stitcher API bằng cách sử dụng VideoStitcherVodStreamRequest.videoStitcherSessionOptions. Nếu bạn cung cấp một lựa chọn không được nhận dạng, Cloud Video Stitcher API sẽ phản hồi bằng lỗi HTTP 400. Hãy tham khảo hướng dẫn khắc phục sự cố để được trợ giúp.

Ví dụ: bạn có thể ghi đè các lựa chọn trong tệp kê khai bằng đoạn mã sau. Đoạn mã này yêu cầu 2 tệp kê khai luồng có các bản kết xuất được sắp xếp theo thứ tự từ tốc độ bit thấp nhất đến cao nhất.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Dọn dẹp

Giờ đây, bạn đã lưu trữ thành công một luồng VOD bằng cách sử dụng Google Cloud Video Stitcher API và yêu cầu luồng đó bằng IMA DAI SDK cho HTML5, điều quan trọng là bạn phải dọn dẹp mọi tài nguyên phân phát.

Làm theo hướng dẫn Dọn dẹp VOD để xoá mọi tài nguyên và thành phần không cần thiết.

Cuối cùng, trong cửa sổ dòng lệnh mà bạn đã khởi động máy chủ web Python 3, hãy dùng lệnh ctrl+C để kết thúc máy chủ cục bộ.