本文介绍如何通过 Windows 自带的 Xbox Game Bar 录制游戏视频，并通过 Python 使用 u2net 的 AI 模型对视频进行背景去除，生成含有透明通道的视频。最后结合 Html5 的相机并播放 webm 视频，实现简单的 AR 能力。

文章目录

前言
实现思路
录制素材
视频处理
- 视频帧提取
- 逐帧去背景
- 视频合并
- 网页效果
食用教程
- 注意
总结

前言

作为一个天涯明月刀游戏的端游老玩家，天刀的画质是没的说的。玩天刀的七年，我唯一最大的收获就是拐了女朋友回家。至此，双十一来临之际，我紧急把之前想写的教程赶了出来。为了让单身的少侠可以在现实世界有自己游戏角色的陪伴，不再那么孤单，我可真是操碎了心，半夜把网页赶了出来。其实单身和非单身的双十一区别不是很大，只是吃土的方式不一样罢了。话不多说，我们先来看下效果：

啊，不对，放错图了，下面这个，下面这个……

在线演示地址：https://sangyuxiaowu.github.io/Wuxia_AR/

实现思路

增强现实（AR）这个概念想必大家都不陌生，根据其定义我们只需要将虚拟信息与真实世界融合就算的上是 AR 啦，这里我们不会用到三维建模、空间注册定位、智能交互等高大上的技术，也不会用到 ARCore、ARKit、Vuforia 等相关平台，今天仅实现简单的视频叠加效果。

在最终呈现上，我们通过天涯明月刀客户端提供的天涯一瞬功能录制视频素材，然后使用 AI 去除视频中的背景，生成含有 alpha 透明通道的视频。接着设计一个网页，打开摄像头并播放这个视频，这样一来，一个简单的 AR 功能就实现了。

录制素材

在游戏中打开天涯一瞬拍照系统，使用自由镜头，将视角画面翻转 90 度，在装饰中更改画面背景为第一个，这样便于后期抠图处理。关于灯光效果等其他设置大家按照自己的喜好来设置即可，当然衣服配饰什么的，优先考虑下后期抠图的效果。

设置完成播放自己想录制的动作就可以准备录制了，这里我使用的是 Windows 系统自带的 Xbox Game Bar ，按住 Win + G 呼出录制界面，点击录制按钮即可开始录制，你也可以直接按 Win + Alt + R 使用快捷按键直接开始录制。对于 N 卡的用户，也可直使用 NVIDIA GeForce Experience 的游戏录制功能进行录制。

这里我选择的动作是晨夕杏时茶时装的春时舞，动作拖放后会重复执行，但是音乐只有一次，开始录制的时机可能会不好把握，那么动作可以在结束前开始录制，然后记得要 Ctrl + U 隐藏游戏 UI ，后期做裁剪就可以了。后期处理可以使用必剪等工具进行，导出 mov 格式。

视频处理

视频帧提取

视频抠图我们使用 Python 处理，当然为什么不用 After Effect 或是其他处理软件，甚至必剪都带有抠图。话不能这么说，软件自己扣了，哪轮得到我写点代码呢？

这里会用到 OpenCV 、rembg 、PIL 等库。关于 AI 去背景可以看这一篇文章：《AI一键去背景》。

#导入所需的库
import cv2
import os
import math
from PIL import Image
from rembg import remove

接下来，我们定义视频转换图片函数，先使用 cv2 将视频文件逐帧存储为 .jpg 文件

def getFrame(video_name, save_path):video = cv2.VideoCapture(video_name)# 获取视频帧率fps = video.get(cv2.CAP_PROP_FPS)print(fps)# 获取画面大小width = int(video.get(cv2.CAP_PROP_FRAME_WIDTH))height = int(video.get(cv2.CAP_PROP_FRAME_HEIGHT))size = (width, height)# 获取帧数frame_num = str(video.get(7))name = int(math.pow(10, len(frame_num)))ret, frame = video.read()while ret:cv2.imwrite(save_path + str(name) + '.jpg', frame)ret, frame = video.read()name += 1video.release()return fps, size, frame_num

执行调用后，程序会将 video.mov 视频逐帧：

#将视频按帧保存为图片
frame_path = "./frames/"
if not os.path.exists(frame_path):os.makedirs(frame_path)
fps, size, frame_number = getFrame("video.mov", frame_path)
print(fps, size, frame_number)

逐帧去背景

对逐帧保存的所有图片逐个进行去除背景操作：

def getRemoveBg(frames):output_dir='./output/'if not os.path.exists(output_dir):os.makedirs(output_dir)files = [frames + i for i in os.listdir(frames)]for fi in files:fisave = fi.replace("frames","output").replace("jpg","png")if not os.path.exists(fisave):input =Image.open(fi)output=remove(input)output.save(fisave)getRemoveBg("./frames/")

图片背景处理好的放在文件夹 output，上面的逐帧抠图确实很慢，反正还要写文章，一边写一边等了，没必要现在优化成多线程了。

视频合并

在我们得到一堆透明 PNG 的序列图后，只需要通过 ffmpeg 工具将其合并成视频即可。

需要安装有 ffmpeg 软件，Windows 电脑需要配置好环境变量。

ffmpeg -r 30 -i output/1%06d.png -i music.mp3 -y output.webm

参数解释：生成 30 帧的视频，输入一个是 png 序列，一个是 music.mp3 配乐文件，最后导出为 webm 格式。

网页效果

网页的设计非常简单，提供了强制的手机背面摄像头画面的渲染，以及 webm 视频文件的播放。操作控制按钮提供了全屏，视频文件的放大和缩小，以及开始播放功能。轻触角色会询问是否允许访问摄像头，点击允许，之后就可以点击角色，将其拖放到合适位置了。

食用教程

克隆或下载存储库 https://github.com/sangyuxiaowu/Wuxia_AR/
VsCode 打开该存储库文件夹，访问 main.ipynb
下载或生成 video.mov 录制的角色视频，放到这个文件夹中
执行 main.ipynb 中的代码块
打开或部署 index.html 文件

网页视频的图片预览可替换 1000000.png 文件。

注意

需要注意的是，经过测试，因为摄像头调用和视频播放没有适配 IOS设备，另外是透明背景视频 webm 的视频编码 VP9 是一个由 Google 开发的开放格式，只有在 webkit 内核的浏览器才可以播放，所以这个网页仅有安卓用户可以正常访问，在微信中或是手机版的 Chrome，Edge 浏览器访问即可看到效果。

总结

录制的素材和春时舞的配乐大家可前往 Github 仓库，或前往 CSDN 下载。

总体来说，最终的效果还算可以，就是抠图确实还是存在很大的瑕疵。

希望天刀天涯一瞬功能后期可以将背景增加一个绿幕，或者可以直接录制透明背景的视频，为少侠们创造更多的快乐和灵感。另外，N 卡的亮点，自动录制，图片模式等各种功能在 64 位出现后就一直没再支持了，现在 32 位也没有就彻底用不了了。

“掌中舞罢箫声绝，三十六宫秋夜长。”

正午的阳光真好，少侠们，带上自己的游戏角色，去尽情起舞吧！

打破次元壁，让游戏角色在指尖跳舞，简易的 AR 教程相关推荐

我们造出了打破次元壁的锤子，然后呢？
大多数游戏玩家或多或少萌生过这样一个念头:如果可以化身游戏中的角色,生活在游戏中的世界里会是一种什么样的体验? 擅长琢磨观众心理的科幻电影大师们早就给出了答案:斯皮尔伯格在<头号玩家>讲述 ...
手机虚拟摄像头_新游 | 打破次元壁障，《猪猪侠AR虚拟使命》现实约战，一切尽在创酷互动！...
今日,创酷互动游戏<猪猪侠AR虚拟使命>全网震撼首发,冬季火爆登陆.本款游戏采用知名IP<猪猪侠>,更采用<口袋妖怪GO>所应用的AR增强现实技术,全新科技AR制作 ...
用帽子戏法打破次元壁：当武磊牵手科大讯飞
最近留心体育行业的人会发现,体育界正和AI界产生奇妙的交织. 西班牙当地时间8月5日,科大讯飞旗下消费者产品讯飞翻译机与皇家西班牙人足球俱乐部及武磊签约仪式在巴塞罗那正式举办.自此武磊正式成为科大讯飞 ...
MAYA游戏角色建模的快速方法介绍，教程简单步骤具体！助你早日月薪2W+
MAYA游戏角色建模的快速方法和一些具体的步骤,教程写的比较简单,当然这些也是一个熟练的角色建模师应该具备的知识.希望朋友们喜欢这篇教程. 1.把背景放到FRONT视图里对齐中线.polygon--- ...
杜甫在线演唱《奇迹再现》、兵马俑都能开口说话……微博网友用AI技术分分钟打破次元壁...
鱼羊发自凹非寺量子位报道 | 公众号 QbitAI 霍格沃茨的同学们都知道,想要进入格兰芬多休息室,得先过胖夫人这一关. 所以,会说话的照片/画像它科学吗? 其实,在AI时代的麻瓜世界里,这早 ...
杜甫在线演唱《奇迹再现》、兵马俑真人还原……用AI技术打破次元壁的大谷来参加腾讯全球数字生态大会啦！...
近期,一位凭借AI技术的复原古代影像的独立艺术家大谷Spitzer,通过发布系列「人工智能+艺术的趣味应用」视频,在微博上先后被人民日报 .央视新闻.头条新闻等诸多媒体和微博大号"点名&qu ...
Soul App打造社交元宇宙，打破次元壁
人际交往占据了人们日常生活的绝大部分,而这绝大部分都仅局限于熟人社交,就连社交应用也几乎以熟人社交为主.为了打破这一传统,Soul所提倡的兴趣社交为Z世代带来了新的社交可能. 在Soul创始人特别助理 ...
在“打破次元壁”这件事上，以太坊做得超乎你想象
原文来自 Decrypt 作者 | Robert Stevens 译者 | 秦晓峰出品 | Odaily星球日报(ID:o-daily) 以太坊是目前最大的用于去中心化应用程序(DAPP)的区块链 ...
汤唯、胡歌、姚明打破次元壁同框在线教育代言
近日,汤唯为沪江网校旗下在线英语品牌Hitalk拍摄的多组广告在北上深地铁内亮相,立即吸引了大批粉丝及路人的关注.两个月前,沪江网校还签约了吴磊作为代言人. 上周五(7月14日),孙俪以代言人的身份为 ...
Python实现照片卡通化，一拳打破次元壁 | 机器学习
目录前言项目结构核心代码总结前言接着我上一篇开源机器学习的使用:如何将照片变成卡通图,animegan2-pytorch机器学习项目使用 | 机器学习_阿良的博客-CSDN博客我还是继续 ...

打破次元壁，让游戏角色在指尖跳舞，简易的 AR 教程