更新记录
1.0.3(2024-11-01)
- 修改已知问题
- 更新文档
1.0.1(2024-03-23)
- iOS端支持vue页面防截屏
1.0.0(2023-12-27)
新账号发布
查看更多平台兼容性
Android | Android CPU类型 | iOS |
---|---|---|
适用版本区间:5.0 - 14.0 | armeabi-v7a:未测试,arm64-v8a:未测试,x86:未测试 | 适用版本区间:11 - 17 |
原生插件通用使用流程:
- 购买插件,选择该插件绑定的项目。
- 在HBuilderX里找到项目,在manifest的app原生插件配置中勾选模块,如需要填写参数则参考插件作者的文档添加。
- 根据插件作者的提供的文档开发代码,在代码中引用插件,调用插件功能。
- 打包自定义基座,选择插件,得到自定义基座,然后运行时选择自定义基座,进行log输出测试。
- 开发完毕后正式云打包
付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios
注意事项:使用HBuilderX2.7.14以下版本,如果同一插件且同一appid下购买并绑定了多个包名,提交云打包界面提示包名绑定不一致时,需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
特别提醒
- 购买本插件前,请先试用,并充分自测确认满足需求之后再行购买。虚拟物品一旦购买之后无法退款;
- 如有使用上的疑问、bug,进交流群联系作者;
- 作者可承接各种插件定制;
- 请在合法范围内使用,若使用本插件做非法开发,本方概不负责;
- vue3版本使用iOS防截屏功能需将vite.config.js文件放到项目根目录下(vite.config.js文件可在示例demo中获取)
功能
- 支持截屏(iOS&Android)
- 支持录屏(iOS&Android)
- 支持防截屏/录屏(iOS&Android)
- 支持图片与视频保存相册(iOS&Android)
- 可控制录屏是否录制音频(iOS&Android)
- 可监听截物理按键屏通知,并获取截屏图(仅iOS支持)
- 支持删除指定路径文件(iOS&Android)
使用
- 引入插件
const Screen = uni.requireNativePlugin('YT-screen');
- 监听物理快键截屏动作(iOS监听是否可录屏/截屏也需要实现下面的方法)
onLoad() {
// 监听物理按钮截屏Android无效
// #ifdef APP-PLUS
if (plus.os.name == "iOS") {
Screen.screenshotNotification(res => {
if (res.code == 200) {
// 路径
this.imagePath = res.path
// base64
// this.imagePath = res.base64
}
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1500
})
})
}
// #endif
},
- 截屏
//截屏
var imagePath = plus.io.convertLocalFileSystemURL("_doc/screen");
var name = new Date().getTime() + ".jpg";
Screen.screenCaptureWithPath({
imagePath: imagePath,//保存文件路径
imageName: name,//保存文件名称
saveToAlbum: true//是否保存至相册
}, res => {
console.log(res);
if (res.code == 200) {
//截屏成功
this.imagePath = res.path;
console.log('截屏成功:' + res.path)
} else {
//失败
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1500
})
}
});
- 录屏
注意:iOS只能录制应用内视频。
var videoPath = plus.io.convertLocalFileSystemURL('_doc');
var name = new Date().getTime() + ".mp4";
Screen.starScreenRecord({
path: videoPath,//保存视频路径
videoName: name,//保存视频名称
isMicrophone: true,//是否录制音频
saveToAlbum: true//视频是否保存相册
}, res => {
if (res.code == 200) {
//录制结束回调
console.log("录屏本地路径:" + res.path)
this.path = res.path;
}
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1500
})
});
- 取消录屏
Screen.cancelScreenRecord();
- 停止录屏-(会在Screen.starScreenRecord中回调录制的视频路径)
Screen.stopScreenRecord();
- 停止录制带回调
Screen.finshScreenRecord(res=>{
console.log(res.path)
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1500
})
})
- 开启与关闭防截屏/防录屏
开启与关闭防截屏、录屏 由于iOS无法通过api进行防截屏,所以iOS端要实现防截屏需要在最外层套一个component组件(component组件只在nvue有效。如果无iOS端防止截屏需求可不使用该component组件,直接使用module组件即可。使用component组件也不影响Android,在android相当于一个view),详情见下方完整实例代码。
//开启防录屏截屏
if (plus.os.name == "Android") {
Screen.openPreventScreenRecording();
} else if (plus.os.name = "iOS") {
this.$refs.screen.openPreventScreenRecording();
}
//关闭防录屏截屏
if (plus.os.name == "Android") {
Screen.offPreventScreenRecording();
} else if (plus.os.name = "iOS") {
this.$refs.screen.offPreventScreenRecording();
}
- 删除指定路径文件(图片或视频)
Screen.removePath(path, res => {
if (res.result == true) {
uni.showToast({
title: "删除成功",
icon: 'none',
duration: 1500
})
} else {
uni.showToast({
title: "删除失败",
icon: 'none',
duration: 1500
})
}
});
完整示例代码
<template>
<view class="content1">
<!-- yt-screen:component组件需在nvue中使用,不影响Android端。用于iOS开启/关闭防截屏录屏。 -->
<yt-screen ref="screen" style="width: 750rpx;flex: 1;flex-direction: column;align-items: center;">
<navigator url="screen2"
style="width: 600rpx;height: 80rpx;background-color: cornflowerblue;display: flex;align-items: center;justify-content: center;">
跳转</navigator>
<view class="btn" @click="starLP()">
<text>开始录屏</text>
</view>
<view class="btn" @click="stopLP()">
<text>停止录屏</text>
</view>
<view class="btn" @click="stopLP2()">
<text>停止录屏(带回调)</text>
</view>
<view class="btn" @click="cancelLP()">
<text>取消录屏</text>
</view>
<view class="btn" @click="jp()">
<text>截屏</text>
</view>
<view class="btn" @click="starUnLP()">
<text>开启防录屏/截屏</text>
</view>
<view class="btn" @click="endUnLP()">
<text>停止防录屏/截屏</text>
</view>
<view class="btn" @click="removePath(0)">
<text>删除视频</text>
</view>
<view class="btn" @click="removePath(1)">
<text>删除截屏</text>
</view>
<!-- <web-view src="https://www.baidu.com" style="width: 750rpx;height: 400rpx;"></web-view> -->
<video :src="path" :autoplay="true" :loop="true" style="width: 750rpx;height: 400rpx;"></video>
</yt-screen>
</view>
</template>
<script>
const Screen = uni.requireNativePlugin('YT-screen'); //插件
export default {
data() {
return {
imagePath: "",
// path1: "_doc/screen/1697679077184.mp4",
path: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
}
},
onLoad() {
// 监听物理按钮截屏Android无效
// #ifdef APP-PLUS
if (plus.os.name == "iOS") {
Screen.screenshotNotification(res => {
if ("200" == res.code) {
// 路径
this.imagePath = res.path
// base64
// this.imagePath = res.base64
}
uni.showToast({
title: res.msg,
icon: 'none'
})
})
}
// #endif
},
onUnload() {
console.log('销毁')
// 取消录制
Screen.cancelScreenRecord();
},
onHide() {
},
onShow() {
},
methods: {
starLP() {
var videoPath = plus.io.convertLocalFileSystemURL('_doc/screen');
var name = new Date().getTime() + ".mp4";
Screen.starScreenRecord({
path: videoPath,
videoName: name,
isMicrophone: true,
saveToAlbum: true
}, res => {
console.log("res: " + JSON.stringify(res));
if (res.code == 200) {
//录制结束回调
console.log("录屏本地路径:" + res.path)
this.path = res.path;
}
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1500
})
});
},
stopLP() {
//停止录屏
Screen.stopScreenRecord();
},
stopLP2() {
// 停止录屏带回调
Screen.finshScreenRecord(res => {
console.log(res.path)
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1500
})
})
},
cancelLP() {
Screen.cancelScreenRecord();
},
jp() {
//截屏
var imagePath = plus.io.convertLocalFileSystemURL("_doc/screen");
var name = new Date().getTime() + ".jpg";
Screen.screenCaptureWithPath({
imagePath: imagePath,
imageName: name,
saveToAlbum: false
}, res => {
console.log(res);
if (res.code == 200) {
//截屏成功,保存图片到相册
this.imagePath = res.path;
uni.saveImageToPhotosAlbum({
filePath: res.path,
success: function() {
console.log('save success');
}
});
console.log('截屏成功:' + res.path)
} else {
//失败
uni.showToast({
title: res.msg,
icon: 'none',
duration: 1500
})
}
});
},
starUnLP() {
//开启防录屏截屏
if (plus.os.name == "Android") {
Screen.openPreventScreenRecording();
} else if (plus.os.name = "iOS") {
this.$refs.screen.openPreventScreenRecording();
}
},
endUnLP() {
//关闭防录屏截屏
if (plus.os.name == "Android") {
Screen.offPreventScreenRecording();
} else if (plus.os.name = "iOS") {
this.$refs.screen.offPreventScreenRecording();
}
},
removePath(index) {
let path = "";
if (index == 0) {
path = this.path
} else if (index == 1) {
path = this.imagePath
}
if (path == "") {
return;
}
Screen.removePath(path, res => {
if (res.result == true) {
uni.showToast({
title: "删除成功",
icon: 'none',
duration: 1500
})
} else {
uni.showToast({
title: "删除失败",
icon: 'none',
duration: 1500
})
}
});
}
}
}
</script>
<style>
.content1 {
display: flex;
flex-direction: column;
width: 750rpx;
align-items: center;
flex: 1;
background-color: aqua;
}
.btn {
display: flex;
align-items: center;
justify-content: center;
width: 400rpx;
height: 80rpx;
margin-top: 30rpx;
border-radius: 8rpx;
background-color: bisque;
}
</style>
注意事项
iOS防截屏/录屏在iOS13及以上版本有效。