云星穹铁道适配 | Support cloud HSR
LmeSzinc opened this issue · 11 comments
要做的肯定是网页端,有跨平台优势,web生态也丰富。因为云游戏是画面串流,所以你可以在无 GPU 的服务器上运行并且占用很低,对,就是那种常见的云服务器。这下游戏都完全上云了,让我看看谁还在玩星穹铁道
目前还在选择技术栈,需要决定的事情:
- 无头浏览器的选择:Playwright / Puppeteer / DrissionPage,selenium已死,需要评估获取画面和操作网页的性能
- 画面捕获方式的选择:全屏截图/解码串流画面。全屏截图的话,性能肯定就差点。解码的话,还得再研究一下,未来也要看米桑脸色,改了接口啥的也要跟着更新
仅以当前版本的云铁道而言,这个方式已经可以获取截图:
function getscreenshot(){
const video = document.querySelector('.game-player__video');
// Create a canvas element
const canvas = document.createElement('canvas');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
// Draw the video frame onto the canvas
const ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
// Convert the canvas content to a data URL
const dataURL = canvas.toDataURL('image/png');
// Create a link for downloading the screenshot
const a = document.createElement('a');
a.href = dataURL;
a.download = 'screenshot.png';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
};
getscreenshot();
运行后会下载一个图片。。 但是不排除什么时候米忽悠会把“.game-player__video”这个video元素名称改掉那样肯定也要跟着改
运行一下得200ms, 似乎有点慢= =
console.time('screenshot');
getscreenshot();
console.timeEnd('screenshot')
screenshot:219 毫秒 - 倒计时结束
当前采用的1920x1080分辨率,降低分辨率也许可以提高速度。。
不过话说回来我把画质调到最低,得到的canvas还是1920x1080的
我感觉全屏截图好点,性能虽然差点,但胜在稳定
仅以当前版本的云铁道而言,这个方式已经可以获取截图:
function getscreenshot(){ const video = document.querySelector('.game-player__video'); // Create a canvas element const canvas = document.createElement('canvas'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; // Draw the video frame onto the canvas const ctx = canvas.getContext('2d'); ctx.drawImage(video, 0, 0, canvas.width, canvas.height); // Convert the canvas content to a data URL const dataURL = canvas.toDataURL('image/png'); // Create a link for downloading the screenshot const a = document.createElement('a'); a.href = dataURL; a.download = 'screenshot.png'; document.body.appendChild(a); a.click(); document.body.removeChild(a); }; getscreenshot();
运行后会下载一个图片。。 但是不排除什么时候米忽悠会把“.game-player__video”这个video元素名称改掉那样肯定也要跟着改
运行一下得200ms, 似乎有点慢= =
console.time('screenshot'); getscreenshot(); console.timeEnd('screenshot') screenshot:219 毫秒 - 倒计时结束
当前采用的1920x1080分辨率,降低分辨率也许可以提高速度。。
后面应该会把分辨率限制成1280×720,毕竟现在模拟器运行的就是这个,分辨率一致的话没那么容易出奇怪的问题
问题就是游戏内改画质死活都是1920x1080,似乎改不动分辨率,虽然也可能是我没测试到,但是我测试结果是没法改分辨率,实际要改可能只能做点hack什么的,那就更不好支持了
方便抽象个接口来适应不同后端吗,就不用管后端是安卓、web串流还是pc触屏版了
如果是要获取网页端的图像,不需要用2L的方法,性能太低,而且图片落盘后还需要再通过IO读取。
context.getImageData()
这个API可以获取canvas指定区域的图像数据-一个一维的RGBA数组,其实也就是bitmap,拿到这个数据之后其实就可以做图像处理了。
如果只能依赖png或者jpeg编码的话可以拿这个图像数据再处理。