Hướng dẫn tích hợp Bizfly VOD vào Website của bạn

HƯỚNG DẪN TÍCH HỢP PLUG-IN QUẢN LÝ VIDEO LÊN CMS

Bizfly VOD hỗ trợ tích hợp một công cụ quản lý tài nguyên video lên hệ thống quản trị nội dung Website (CMS) của bạn dưới dạng một plugin nhúng với nhiều tiện ích trực quan. Plugin VOD này sẽ kết nối tới 1 kho video của khách hàng trên Bizfly VOD. Khi sử dụng Plugin VOD này, mỗi user trên CMS sẽ có một thư mục lưu trữ video riêng tương ứng với 1 thư mục trong kho video. Thư mục này được hệ thống đặt tên giống với tên của user trên CMS.

Khi user đăng nhập vào CMS và mở trang quản lý video, CMS Client sẽ chạy mã nhúng hiển thị Plugin VOD. Để khởi chạy plugin, CMS Client cần dùng một plugin token để xác thực. CMS Client lấy plugin token bằng cách gọi lên CMS Server (có xác thực đảm bảo chỉ user đã đăng nhập mới gọi được). CMS Server tiếp tục gọi sang Bizfly VOD để lấy token.

Như vậy, để tích hợp Plugin VOD, cần thực hiên các bước dưới đây:

1. VIẾT API LẤY PLUGIN TOKEN TRÊN CMS SERVER

Khi bật tính năng này, những video được tải lên sau đó sẽ được mã hóa

Bạn cần viết 1 backend API trên CMS Server cho phép CMS Client gọi lên lấy plugin token. API này cần được xác thực giữa CMS Client và CMS Server để đảm bảo user phải đăng nhập trên CMS mới gọi được. Ví dụ API có cấu trúc như sau: GET /plugin-vod-token

Khi CMS Client gọi API này, CMS Server xác định user nào đang gọi, lấy CMS username và tiến hành gọi sang Bizfly VOD để lấy plugin token trả cho CMS Client.

Khi CMS Server gọi sang Bizfly VOD lấy plugin token cần gửi sang các thông tin sau (Lấy dữ liệu trong phần hướng dẫn tích hợp):

Dưới đây là Code minh họa request từ CMS Server tới Bizfly VOD để lấy plugin token:

  • C#
var client = new RestClient("[TokenUrl]");  
client.Timeout = -1;  
var request = new RestRequest(Method.POST);  
request.AddHeader("Content-Type", "application/x-www-form-urlencoded");  
request.AddParameter("username", "[Username của CMS]");  
request.AddParameter("grant_type", "authorization_code");  
request.AddParameter("code", "[Code/X-Api-Key]");  
request.AddParameter("scope", "[Scope/ChannelId]");  
IRestResponse response = client.Execute(request);  
Console.WriteLine(response.Content);  
  • Python
import requests
url = "[TokenUrl]"
payload = {'username': [username],
          'grant_type': 'authorization_code',
          'code': [code],
          'scope': [scope]}
headers = {
 'Content-Type': 'application/x-www-form-urlencoded'
}
response = requests.request("POST", url, headers=headers, data=payload)
print(response.text)
  • Nodejs
var request = require('request');  
var options = {  
  'method': 'POST',  
  'url': '[TokenUrl]',  
  'headers': {  
    'Content-Type': 'application/x-www-form-urlencoded'  
  },  
  form: {  
    'username': '[Username của CMS]',  
    'grant_type': 'authorization_code',  
    'code': '[Code/X-Api-Key]',  
    'scope': '[Scope/ChannelId]'  
  }  
};  
request(options, function (error, response) {  
  if (error) throw new Error(error);  
  console.log(response.body);  
});  
  • CURL
curl --location --request POST '[TokenUrl]'

--header 'Content-Type: application/x-www-form-urlencoded'

--data-urlencode 'username=[Username của CMS]'

--data-urlencode 'grant_type=authorization_code'

--data-urlencode 'code=[Code/X-Api-Key]'

--data-urlencode 'scope=[Scope/ChannelId]'

2. CÀI ĐẶT MÃ NHÚNG PLUGIN TRÊN CMS CLIENT

Sau khi đã có API lấy plugin token trên CMS Server, chúng ta tiến hành tích hợp mã nhúng Plugin VOD vào trang web muốn hiển thị công cụ Quản lý video tương tự ví dụ sau:

<html>
   <button id="media" class="test-button">Open Plugin VOD</button>
   <div id="preview"></div>
</html>

<!-- Load thư viện JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Load thư viện Plugin VOD -->
<script src="https://ims.mediacdn.vn/micro/media/vod/beta/plugins/dist/ims-plugin-media.js"></script>

<script>
   // Hàm lấy plugin vod token
   function getTokenFunction(callback) {
           var xhr = new XMLHttpRequest();
           xhr.withCredentials = true;
           xhr.addEventListener("readystatechange", function () {
               if (xhr.readyState === XMLHttpRequest.DONE) {
                   var status = xhr.status;

                   if (status === 200)
                       callback(null, this.responseText)
                   else
                       callback(new Error('Error2 get token'))
               } else if (xhr.readyState === XMLHttpRequest.ERROR) {
                   callback(new Error('Error2 get token'))
               }
           });
           xhr.open("GET", "https://quangnneflask-app.herokuapp.com/plugin-vod-token", true); // Cần cài đặt API GET /plugin-vod-token ở CMS Server
           xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
           xhr.send();
       }

   // Event click vào button "Mở Plugin VOD"
   $('#media').off('click').on('click', function () {
       // Khởi tạo Plugin VOD
       IMSWidgetMedia.init({
           locale: 'vi',
           plugins: {
               name: 'media',
               options: {
                   getTokenFunction: getTokenFunction
               },
               methods: {
                   name: 'mediaManager',
                   options: {
                       callback(arrMedia) {
                           console.log('Callback =>', arrMedia);

                           arrMedia.forEach(media => {
                           $('#preview').append('<div style="width:500px;height:400px;">' + media.embedCode + '</div>');
                           });
                       },
                   },
               },
           },
       });
   });
</script>

XEM THÊM VỀ THÀNH PHẦN MẪU NHÚNG PLUGIN

Options:

- locale: Ngôn ngữ sử dụng. Mặc định vi (tiếng Việt).
    Type: String
    Optional
    Value: vi | en
    Default: vi
- platform: Nền tảng triển khai plugin. Mặc định auto theo nền tảng.
    Type: String
    Optional
    Value: mobile | tablet | desktop | auto
    Default: auto
- load: Hàm trả về một instance của chính plugin đó. Instance chứa id, các methods và các hàm utils của từng plugin.
    Type: Function
    Optional
- plugin: Nơi khai báo các plugin được sử dụng.
    Type: Object | Array(Object)
    Required
        Options:
        name: Tên của plugin (danh sách plugin).
            Type: String
            Required
        options: Danh sách các options bắt buộc của plugin.
            Type: Object
            Required
        methods: Các phương thức được plugin sử dụng. Xem chi tiết tại từng plugin.
            Type: Object | Array(Object)
            Required
            Options:
                name: Tên phương thức.
                    Type: String
                    Required
                options: Các options.
                    Type: Object
                    Optional