> 文档中心 > JS分布式流转基础学习

JS分布式流转基础学习


前言

 使用鸿蒙JS端分布式方法去实现简单的视频流转功能

正文

1.创建鸿蒙JS端空项目

分布式拉起将文件命名为Distributrd,选择保存路径,选择API6或者API7,设备勾选Phonet,最后点击Finish按钮。

若用API7的话,需要把compatibleSdkVersion改为6(我们所使用的虚拟机版本为6)

2.添加权限

    "reqPermissions": [      { "name": "ohos.permission.DISTRIBUTED_DATASYNC"      }    ],

3.在MainAbility.java中动态调用权限

public class MainAbility extends AceAbility {    @Override    public void onStart(Intent intent) { super.onStart(intent); //检测设备是否被授予多设备协同权限 // 动态判断权限 if (verifySelfPermission("ohos.permission.DISTRIBUTED_DATASYNC") != IBundleManager.PERMISSION_GRANTED) {     // 应用未被授予权限     if (canRequestPermission("ohos.permission.DISTRIBUTED_DATASYNC")) {  // 是否可以申请弹框授权(首次申请或者用户未选择禁止且不再提示)  手机本身也会有禁止弹窗的服务,该if方法为是否可以进行弹窗  requestPermissionsFromUser(new String[]{"ohos.permission.DISTRIBUTED_DATASYNC"}, 0);     } }    }    @Override    public void onStop() { super.onStop();    }}

4.页面分布式拉起

在index.js中编写代码

我们书写一个点击事件方法来实现分布式流转,使用FeatureAbility.startAbility(OBJECT)方法拉起一个FA,无回调结果,允许以显式的方式,拉起远程或本地的FA。其中OBJECT是StartAbilityParameter类型方法,需要填写各项对应的系统能力如必填的bundleName(启动包名)、abilityName(启动的Ability名称),另外entities为用户需要流转的部分(我们该部分是流转的视频)

export default {    data: { title: "0", event:'', seekingtime:'', timeupdatetime:'', seekedtime:'', isStart: true, duration: '', video:'/common/video/onepiece.mp4'    },    onInit() {     },    distributed(){ let target = {     bundleName: "com.example.distributed",     abilityName: "com.example.distributed.MainAbility",     video:this.video }; let result = FeatureAbility.startAbility(target);    },    preparedCallback:function(e){ this.event = '视频连接成功'; this.duration = e.duration;},    startCallback:function(){ this.event = '视频开始播放';},    pauseCallback:function(){ this.event = '视频暂停播放'; },    finishCallback:function(){ this.event = '视频播放结束';},    errorCallback:function(){ this.event = '视频播放错误';},    seekingCallback:function(e){ this.seekingtime = e.currenttime; },    timeupdateCallback:function(e){ this.timeupdatetime = e.currenttime;},    change_start_pause: function() { if(this.isStart) {     this.$element('videoId').pause();     this.isStart = false; } else {     this.$element('videoId').start();     this.isStart = true; }    },}

video组件编写可参考官网文档中心

5.效果展示