【智体OS】官方上新发布智体电视：基于rtpc和rttouchpad实现智体电视的手机遥控-可安装任意PC应用用于智体电视
dtns.network是一款主要由JavaScript编写的智体世界引擎（内嵌了three.js编辑器的定制版-支持以第一视角浏览3D场馆），可以在浏览器和node.js、deno、electron上运行，它是一个跨平台的软件，支持多个操作系统使用！
dtns.connector是dtns.network的客户端软件，允许多用户方便自由地连接dtns.network的智体设备。支持使用内置的poplang智体编程语言实现3D组件的智能化编程------语法超简单，一句话语法，人人轻松上手！通过poplang智体编程，可轻松创建、编辑、分发xverse-3D智体应用。
本次上新的主要内容为：使用rtpc实时分布式PC远程访问和实时控制智体电视，并基于rttouchpad实现智体电视遥控器（rtpc3.3.dpkg版本）
更新内容
1、使用dpkg机制，集成和拓展dtns-rtpc-api，开发了rtpc分布式远程访问和实时控制的DPKG插件rtpc3.3.dpkg（dtns.top官网下载）
2、rtpc和rttouchpad共同支持屏幕同步功能、鼠标点击功能、文字输入功能
3、支持访问内网算力设备，主要是依赖于dtns-api来进行访问（分布式设备终端远程访问），可取代大部分的代理访问机制。
4、可方便集成到了dtns.os的系统应用面板中。
5、可使用poplang调用dtns-rtpc-api，实现桌面操作系统和智体电视的控制机器人
6、可在手机上安装dtns.connector智体OS的客户端，打开rtpc3.3dpkg，点击在上角的【触屏】以激活遥控器功能，实现鼠标移动、点击、鼠标滚动、方向键操作（手机触控版浏览器）
7、利用dtns.network的智体OS操作系统，安装rtpc和rttouchpad智体应用，可以方便地将PC电脑（macos、windows）升级为智体电视机。可以安装数以千万计的第三方应用，并且方便地手机-PC电脑共享视频应用会员等等诸多好处。
完全开源：rtpc和rttouhpad开源、dtns.os和dtns.network等项目均开源。详见文末、或访问dtns.top智体OS官网。
使用教程
一、打开dtns.connector的dweb头榜界面，点击上传了的rtpc3.3.dpkg（或任意其它最新版本）
二、进入rtpc远程访问和实时管理的智体应用，可以看到最新的macos桌面内容（点击锁屏可见到输入密码提示框，使用右上角的功能-input可以输入文本密码）
三、点击右上角的"功能"，再点击input输入密码*****
四、输入完密码，点击->登录箭头登录
五、进入macos系统后，可以看到视频应用界面
六、点击右上角的【画面】后，可见状态为【触屏】，可使用移动鼠标、上下滚动鼠标、进行运作操作（前后左右的移动来控制键盘上的前后左右键------用于调整音量、前进后退等）
Input的poplang代码如下：
poplang
set tips 请输入：
$.prompt tips
= keystr $ret
$.g_rtpc.hideTools
#发送键盘输入内容
set p **{"string":""}
object.set p.string keystr
/rtpc/string/type p注：使用了全局函数 . p r o m p t 来提示输入，并使用 .prompt来提示输入，并使用 .prompt来提示输入，并使用.g_rtpc.hideTools来隐藏功能栏，并最终调用dtns-rtpc-api：/rtpc/string/type来实现文本密码的输入。
rtpc3.3.dpkg的源码分享
js
/* eslint-disable */
<!--
* @Description: RtPcClient
* @Author: poplang
* @Date: 2024-12-5
* @LastEditors:
* @LastEditTime:
-->
<template>
<div style="width: 100%;height: 100%;padding:0px;margin: 0px;" >
<div @click="back" style="color:black;position: fixed;left:8px;top:8px;z-index: 399;"> ❮返回 </div>
<div style="color:black;position: fixed;left:0;right:0;top:8px;z-index: 359;text-align: center; font-size: 18px;font-weight: 800;">{{ title }}</div>
<div style="color:black;position: fixed;right:8px;top:8px;z-index: 399;"><span @click="showTouchPadFlag=!showTouchPadFlag" style="margin-right: 8px">{{ showTouchPadFlag?'触屏':'画面' }}</span><span @click="syncScreen" style="margin-right: 8px">{{ syncScreenTips }}</span><span @click="showFlag=true" style="margin-right: 8px">功能</span>
<!-- <span @click="queryScreen">刷新</span> -->
</div>
<!-- <div style="color:red;position: fixed;right:8px;top:8px;z-index: 399;"><b>[分数] {{ top_cnt }} : {{ success_cnt }}</b></div> -->
<!-- <div v-show="showInput" style="position: fixed;z-index: 199; display:flex;bottom: 5px;left:0;right: 0;height: auto;text-align: center;margin-bottom: 2px;padding:0px 10px 0px 10px;">
<input @keydown.enter="keyDown" style="width:100%; height:28px; padding-left:5px; border:1px solid #eeeeee; font-size:13px;" v-model="msg" />
<button @click="send" style="color: rgb(255, 255, 255);width:70px;border-radius: 0px; font-size: 13px; height: 28px; background-color: rgb(18, 173, 245); border: none;">发送</button>
</div> -->
<RtTouchPad v-if="showTouchPadFlag"/>
<div v-else style="position:fixed;top: 50px;bottom: 0px;left: 0px;right: 0px;z-index: 9;overflow-x: auto;overflow-y: auto;">
<img :src="base64" style="width: auto;height: auto;" @mousedown="mousedown"/>
</div>
<van-popup v-model="showFlag" position="top" :style="{ height: '35%' }" >
<van-grid>
<van-grid-item @click="call(item)" v-for="(item,index) in list" :key="index" icon="photo-o" :text="item.title"></van-grid-item>
</van-grid>
</van-popup>
</div>
</template>
<script>
import RtTouchPad from './RtTouchPad.vue';
export default {
name: "RtPcClient",
props: ["value"],
components: { RtTouchPad },
data() {
return {
title:'RTPC客户端',
// showInput:false,
base64:null,
// syncScreenId:0,
syncScreenNowFlag:false,
syncScreenTips:'同步',
syncScreenTipsStart:'同步',
syncScreenTipsStop:'静止',
showFlag:false,
list:[],
popRutimes:[],
showTouchPadFlag:false,
}
},
async created()
{
this.user_id = localStorage.user_id
// setInterval(this.queryScreen,10000)
},
mounted(){
// this.queryScreen()
this.syncScreen()
//允许使用poplang脚本进行功能拓展。
this.queryPopPlugins()
window.g_rtpc = {}
g_rtpc.queryPopPlugins = this.queryPopPlugins
g_rtpc.stopSyncScreen = this.stopSyncScreen
g_rtpc.syncScreen = this.syncScreen
g_rtpc.queryScreen = this.queryScreen
g_rtpc.hideTools = this.hideTools
g_rtpc.showTools = this.showTools
},
beforeRouteLeave(to,from,next){
// if(this.syncScreenId) clearInterval(this.syncScreenId)
console.log('beforeRouteLeave-to-from:',to,from)
if(to.path != from.path)
{
this.stopSyncScreen()
console.log('into beforeRouteLeave')
next();
}
},
methods: {
back(){
this.stopSyncScreen()
this.$router.go(-1)
},
hideTools()
{
this.showFlag = false
},
showTools()
{
this.showFlag = true
},
stopSyncScreen()
{
if(this.syncScreenNowFlag)
{
// clearInterval(this.syncScreenId)
this.syncScreenNowFlag = false
this.syncScreenTips = this.syncScreenTipsStart
}
//对poplang进行资源回收
if(this.popRutimes)
{
for(let i=0;i<this.popRutimes.length;i++)
{
this.popRutimes[i].quit() //退出所有循环和脚本。
console.log('quit-poplang-',i)
}
}
},
async syncScreen()
{
if(this.syncScreenNowFlag) return this.stopSyncScreen()
this.syncScreenNowFlag = true//setInterval(this.queryScreen,5000)
this.syncScreenTips = this.syncScreenTipsStop
while(this.syncScreenNowFlag)
{
await this.queryScreen() //得到查询结果（可能1-15s完成600kb的png截图下载）
await new Promise((res)=>setTimeout(res,100))
}
},
async queryScreen()
{
if(typeof g_dtnsManager =='undefined') return false
let ret = await g_dtnsManager.run('dtns://web3:'+rpc_client.roomid+'/rtpc/screen/cap')
if(ret && ret.ret) this.base64 = ret.base64
else console.log('query-screen-ret:',ret)
},
async mousedown(e)
{
if(this.click_event_now_flag) console.log('this.click_event_now_flag is true')
console.log('RtPcClient.vue mousedown-event:',e)
let x = e.offsetX , y = e.offsetY//e.layerX, y = e.layerY//e.clientX, y = e.clientY
if(typeof g_dtnsManager =='undefined') return false
this.click_event_now_flag = true
let ret = await g_dtnsManager.run('dtns://web3:'+rpc_client.roomid+'/rtpc/mouse/move',{x,y,click:true})//,click:true
if(!ret || !ret.ret) g_dchatManager.viewContext.$toast('移动鼠标失败，原因：'+(ret ? ret.msg:'未知网络原因'))
// else{
// ret = await g_dtnsManager.run('dtns://web3:'+rpc_client.roomid+'/rtpc/mouse/click')
// if(!ret || !ret.ret) g_dchatManager.viewContext.$toast('点击屏幕执行失败，原因：'+(ret ? ret.msg:'未知网络原因'))
// await new Promise((res)=>setTimeout(res,100))
// await this.queryScreen()
// }
await new Promise((res)=>setTimeout(res,100))
this.click_event_now_flag = false
},
async call(item)
{
let data = await g_dchatManager.goFile(item.fileid,true)
if(!data) return false
let binaryData = data.filedata
let utf8decoder = new TextDecoder()
let poplangStr = utf8decoder.decode(binaryData)
let poplang = new PopRuntime()
this.popRutimes.push(poplang)
console.log('run-item-popRuntimes:',item.title,item,data,poplangStr,this.popRutimes)
let rets = await poplang.runScript(null,poplangStr) //注意while 循环
console.log('run-item-result:',rets)
return true
},
async queryPopPlugins()
{
if(typeof g_dtnsManager =='undefined') return false
let ret = await g_dtnsManager.run('dtns://web3:'+rpc_client.roomid+'/rtpc/poplang/apps')
if(ret && ret.ret)
{
return this.list = ret.list
}
return false
},
send()
{
},
keyDown()
{
}
}
}
</script>
<style scoped>
</style>
注：对比rtpc2.*版本，主要是引入了RtTouchPad组件，用于实现手机端的触控板遥控智体电视机（功能类似笔记本电脑键盘下方中间的touch-pad触控面板）。并且，调整了【功能】栏的能力，使得直接使用.pop代码可以轻松拓展任意的rtpc智体电视的控制代码（基于poplang构建的智体应用插件）。
总结：rtpc和rttouchpad的结合，使得智体电视变成了一个非常易于使用的智体设备。功能强大，应用丰富（千万级），并且支持poplang拓展智体电视机的功能插件，从而大大提升了智体电视的用户体验------内容极度丰富、使用超级简单。