日本熟妇hd丰满老熟妇,中文字幕一区二区三区在线不卡 ,亚洲成片在线观看,免费女同在线一区二区

AI 助理
備案控制臺
文檔
輸入文檔關(guān)鍵字查找
首頁 智能媒體服務(wù) 開發(fā)參考 SDK參考 云剪輯Web SDK接入指南 接入直播剪輯Web SDK

接入直播剪輯Web SDK

更新時間：
產(chǎn)品詳情
我的收藏

智能生產(chǎn)制作提供專業(yè)在線的直播剪輯能力，針對時效性內(nèi)容，您可以同時進行直播和剪輯。通過閱讀本文，您可以了解如何接入直播剪輯Web SDK。

使用說明

本文中引入的直播剪輯Web SDK的版本號1.1.2僅供參考。獲取最新的版本，請參見直播剪輯工程——幫助信息。

操作步驟

  1. 引入直播剪輯Web SDK。

    在項目前端頁面文件中的<head>標(biāo)簽處引入直播剪輯Web SDK的CSS文件，如下所示：

    <head>
  <link rel="stylesheet" >
</head>

    在<body>標(biāo)簽處添加一個用以掛載剪輯界面的<div>節(jié)點，并在<body>標(biāo)簽?zāi)┪蔡砑右隬eb SDK的JS文件，同時添加一個用以調(diào)用Web SDK的<script>節(jié)點。

    <body>
  <div id="aliyun-live-editor" style="height:700px"></div> // 您可以根據(jù)需要改變 container 高度
  <script src="https://g.alicdn.com/thor-server/live-editing-websdk/1.1.2/index.js"></script>
  <script>
    // 調(diào)用 SDK 的代碼放在這里
  </script>
</body>

  2. 初始化直播剪輯Web SDK。

    window.AliyunLiveEditor.init(config);

config屬性說明

參數(shù)

類型

必填

描述

引入版本

locale

string

否

界面語言，取值：

  • zh-CN（默認(rèn)值）：中文。

  • en-US：英文。

1.0.0

container

Element

是

Web SDK生成界面掛載的DOM節(jié)點。

1.0.0

projectId

string

是

直播剪輯工程ID。

1.0.0

onBackButtonClick

() => void;

否

左上角返回按鈕響應(yīng)函數(shù)，如果不傳，則不顯示此按鈕。

1.0.0

updateEditingProject

(req: { ProjectId: string; Title: string }) => Promise<void>;

否

修改剪輯工程標(biāo)題，如果不傳，則不允許修改，參數(shù)及返回值詳情請參見UpdateEditingProject。

1.0.0

getEditingProject

(req: { ProjectId: string }) => Promise<Response<GetEditingProjectRsp>>;

是

獲取剪輯工程的元信息，例如：工程標(biāo)題、保存路徑等信息，參數(shù)及返回值詳情請參見GetEditingProject。

1.0.0

getEditingProjectMaterials

(req: { ProjectId: string }) => Promise<Response<GetEditingProjectMaterialsRsp>>;

是

獲取直播工程關(guān)聯(lián)的直播流和片段，參數(shù)及返回值詳情請參見GetEditingProjectMaterials。

1.0.0

getLiveEditingIndexFile

(req: { ProjectId: string; DomainName: string; AppName: string; StreamName: string }) => Promise<Response<{ IndexFile: string }>>;

是

獲取直播錄制流的播放地址，參數(shù)及返回值詳情請參見GetLiveEditingIndexFile。

1.0.0

describeLiveDomainConfigs

(req: { DomainName: string; FunctionNames: string }) => Promise<Response<DomainConfigs>>;

是

查詢直播域名配置，參數(shù)及返回值詳情請參見DescribeLiveDomainConfigs。

1.0.0

submitLiveEditingJob

(req: SubmitLiveEditingJobReq) => Promise<Response<{ MediaId: string }>>;

是

提交合成片段任務(wù)，參數(shù)及返回值詳情請參見SubmitLiveEditingJob。

1.0.0

getMediaInfo

(req: { MediaId: string }) => Promise<Response<{ MediaInfo: MediaInfo }>>;

是

查詢合成片段的狀態(tài)，參數(shù)及返回值詳情請參見GetMediaInfo。

1.0.0

onExport

(segments: Segment[]) => void;

是

右上角導(dǎo)出到視頻剪輯功能響應(yīng)函數(shù)，segments為您選中的片段數(shù)組。

1.0.0

getDescribeLiveSnapshotConfig

(req: { DomainName: string; AppName: string }) => Promise<Response<GetDescribeLiveSnapshotConfigList>>;

否

查詢直播截圖配置，參數(shù)及返回值詳情請參見DescribeLiveSnapshotConfig。

1.1.0

getDescribeLiveStreamSnapshotInfo

(req: { DomainName: string; AppName: string; StreamName: string; StartTime: string; EndTime: string; Limit: number; Order: string }) => Promise<Response<LiveStreamSnapshotInfoList>>;

否

查詢截圖內(nèi)容，參數(shù)及返回值詳情請參見DescribeLiveStreamSnapshotInfo。

1.1.0

batchGenOSSUrlWithSign

(req: { signList: SnapshotOssInfo[] }) => Promise<Response<SignedUrl[]>>;

否

批量生成帶鑒權(quán)串的OSS地址，即SignedUrl。

說明

如果截圖配置的存儲位置為私有Bucket，您需要在自己的服務(wù)端實現(xiàn)接口（用于批量生成帶臨時訪問憑證的OSS資源地址），同時需要注意過期時間。具體操作，請參見簽名版本1。

1.1.2

數(shù)據(jù)結(jié)構(gòu)說明：

  • Segment

    interface Segment {
  title: string; // 片段的標(biāo)題
  mediaId: string; // 片段的媒資ID
  coverUrl: string | null; // 片段的封面圖地址，可能為 null
  duration: number; // 片段的時長，單位為毫秒
}

  • SnapshotOssInfo

    interface SnapshotOssInfo {
  region: string; // 接入?yún)^(qū)域
  bucketName: string; // OSS存儲 Bucket 名稱
  objectName: string; // OSS存儲的文件名，path/to/object.*
}

init()示例代碼

重要

Web SDK只負(fù)責(zé)界面交互，不會發(fā)起請求，您需要通過Web SDK調(diào)用請求邏輯。請求本身應(yīng)該先發(fā)送給您自己的服務(wù)端，您自己的服務(wù)端再根據(jù)AccessKey信息（AccessKey ID和AccessKey Secret）轉(zhuǎn)發(fā)給相關(guān)的阿里云OpenAPI。

// 注意，WebSDK 本身并不提供 request 這個方法，這里僅作為示例，您可以使用您喜歡的網(wǎng)絡(luò)請求庫，如 axios 等

const projectId = 'exampleId';

window.AliyunLiveEditor.init({
  locale: 'zh-CN',
  container: document.getElementById('aliyun-live-editor'),
  projectId,
  onBackButtonClick: () => {
    // 跳轉(zhuǎn)回列表頁
    window.location.href = '/mediaEdit/list/live';
  },
  updateEditingProject: req => {
    return request('UpdateEditingProject', req);
  },
  getEditingProject: req => {
    return request('GetEditingProject', req);
  },
  getEditingProjectMaterials: req => {
    return request('GetEditingProjectMaterials', req);
  },
  getLiveEditingIndexFile: req => {
    return request('GetLiveEditingIndexFile', req);
  },
  describeLiveDomainConfigs: req => {
    return request('DescribeLiveDomainConfigs', req);
  },
  submitLiveEditingJob: req => {
    return request('SubmitLiveEditingJob', req);
  },
  getMediaInfo: req => {
    return request('GetMediaInfo', req);
  },
  getDescribeLiveSnapshotConfig: req => {
    return request('DescribeLiveSnapshotConfig', req);
  },
  getDescribeLiveStreamSnapshotInfo: req => {
    return request('DescribeLiveStreamSnapshotInfo', req);
  },
  batchGenOSSUrlWithSign: req => {
    return request('multiGenerateOSSURLWithSign', req); // http://bestwisewords.com/document_detail/31952.htm
  },
  onExport: async segments => {
    const { ProjectMaterials = [] } = await request('GetEditingProjectMaterials', {
      ProjectId: projectId
    }).then(res => res.data);
    let videoEditingProjectId;
    if (ProjectMaterials.length) {
      // 已經(jīng)有綁定的視頻剪輯工程
      videoEditingProjectId = ProjectMaterials[0];
    } else {
      // 創(chuàng)建新的普通剪輯工程
      const { Project } = await request('CreateEditingProject', {
        Title: `直播剪輯視頻_${projectId}`,
      }).then(res => res.data);
      // 綁定直播剪輯工程和普通剪輯工程
      await request('AddEditingProjectMaterials', {
        ProjectId: projectId,
        MaterialMaps: JSON.stringify({ editingProject: Project.ProjectId })
      });
      videoEditingProjectId = Project.ProjectId;
    }

    const mediaIds = segments.map(s => s.mediaId);

    await handleBindingMaterials(mediaIds, videoEditingProjectId);

    // 打開普通剪輯工程的頁面
    window.open(`/mediaEdit/detail/${videoEditingProjectId}`);
  },
});

// 因為新增素材綁定接口有一次請求最多綁定10條的限制，故分批操作
async function handleBindingMaterials(MediaIds, ProjectId) => {
  const promiseGroup = [];

  const addTimes = Math.ceil(MediaIds.length / 10);
  for (let i = 0; i < addTimes; i++) {
    const newMap = {};
    const videoList = MediaIds.slice(i * 10, (i + 1) * 10);

    if (videoList.length) {
      newMap.video = videoList.join(',');
    }

    promiseGroup.push(
      request('AddEditingProjectMaterials', {
        ProjectId,
        MaterialMaps: JSON.stringify(newMap)
      })
    );
  }

  await Promise.all(promiseGroup);
};

相關(guān)接口說明：