在上一篇文章零基礎開啟元宇宙——創建虛擬形象中，我們實作了創建虛擬形象，接下來我們可以利用虛擬形象“為所欲為”，今天我們利用虛擬形象在短視頻平臺如快手、抖音中直播，對于不希望露臉的主播們這是可是一大利器呀！話不多說，上絕活，
1 實作思路
通過即構免費提供的虛擬形象和實時RTC技術，結合抖音快手官方提供的直播伴侶，可以輕松實作虛擬形象在抖音快手平臺直播，整個實作流程如下：
2 Android接入RTC推送實時預覽畫面
2.1 接入RTC SDK
前往https://doc-zh.zego.im/article/2969下載即構RTC SDK，將壓縮包內容拷貝到app/libs中，并修改app/build.gradle添加如下內容：
// ...
// 其他略
// ...
android {
// ...
// 其他略
// ...
defaultConfig {
// ...
// 其他略
// ...
ndk {
abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
}
}
sourceSets {
main {
jniLibs.srcDirs = ['libs']
}
}
}
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar', "*.aar"]) //通配引入
// ...
// 其他略
// ...
}
在app/src/main/AndroidManifest.xml檔案中添加必要的權限資訊：
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.BLUETOOTH" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-feature
android:glEsVersion="0x00020000"
android:required="true" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />
2.1 虛擬形象實時推流
使用即構RTC SDK實作實時視頻通話程序如下圖：
根據我們目前的需求，只需實作在Android端推流，windows端拉流即可，因此我們接下來只介紹如何在android端推流，如果想實作更豐富的定制能力，參考官網https://doc-zh.zego.im/article/195即可，
出于篇幅考慮，我們這里只展示關鍵代碼：
private ZegoExpressEngine createRTCEngine(Application app, IZegoEventHandler handler) {
ZegoEngineProfile profile = new ZegoEngineProfile();
profile.appID = KeyCenter.APP_ID;
profile.scenario = ZegoScenario.GENERAL; // 通用場景接入
profile.application = app;
ZegoExpressEngine engine = ZegoExpressEngine.createEngine(profile, handler);
return engine;
}
public void start(String userId, String userName, String roomId, RTCListener listener) {
Log.e(TAG, "準備登陸房間");
loginRoom(userId, userName, roomId, listener);
}
public void stop() {
loginOut();
}
public void setCustomVideo(int videoWidth, int videoHeight, RTCMngr.CaptureListener listener) {
// 自定義視頻采集
ZegoCustomVideoCaptureConfig videoCaptureConfig = new ZegoCustomVideoCaptureConfig();
// 選擇 GL_TEXTURE_2D 型別視頻幀資料
videoCaptureConfig.bufferType = ZegoVideoBufferType.GL_TEXTURE_2D;
// 啟動自定義視頻采集
mRTCEngine.enableCustomVideoCapture(true, videoCaptureConfig, ZegoPublishChannel.MAIN);
// 設定自定義視頻采集回呼
mRTCEngine.setCustomVideoCaptureHandler(new IZegoCustomVideoCaptureHandler() {
@Override
public void onStart(ZegoPublishChannel zegoPublishChannel) {
if (listener != null) {
listener.onStartCapture();
}
}
@Override
public void onStop(ZegoPublishChannel zegoPublishChannel) {
if (listener != null) {
listener.onStopCapture();
}
}
});
// 設定視頻配置, 要跟 avatar 的輸出尺寸一致
ZegoVideoConfig videoConfig = new ZegoVideoConfig(ZegoVideoConfigPreset.PRESET_720P);
// 輸出紋理是正方形的, 要配置一下
videoConfig.setEncodeResolution(videoWidth, videoHeight);
mRTCEngine.setVideoConfig(videoConfig);
}
//實時推流
public void pushStream(String streamId, TextureView tv) {
mRTCEngine.startPublishingStream(streamId);
mRTCEngine.startPreview(new ZegoCanvas(tv));
}
public boolean loginRoom(String userId, String userName, String roomId, RTCListener listener) {
mRoomId = roomId;
mUserId = userId;
ZegoUser user = new ZegoUser(userId, userName);
ZegoRoomConfig config = new ZegoRoomConfig();
config.token = getToken(userId, roomId); // 請求開發者服務端獲取
config.isUserStatusNotify = true;
mRTCEngine.loginRoom(roomId, user, config, (int error, JSONObject extendedData) -> {
if (listener != null) {
listener.onLogin(error);
}
});
Log.e(TAG, "登錄房間：" + roomId);
return true;
}
public void loginOut() {
mRTCEngine.stopPublishingStream();
mRTCEngine.logoutRoom(mRoomId);
}
@Override
public void onRoomTokenWillExpire(String roomID) {
mRTCEngine.renewToken(roomID, getToken(mUserId, roomID));
}
/**
* 此函式應該放在服務器端執行，以防止泄露ServerSecret
*/
public static String getToken(String userId, String roomId) {
TokenEntity tokenEntity = new TokenEntity(KeyCenter.APP_ID, userId, roomId, 60 * 60, 1, 1);
String token = TokenUtils.generateToken04(tokenEntity);
return token;
}
首先執行順序如下：
- createRTCEngine, 獲取RTC引擎物件：engine，
- setCustomVideo, 用于設定自定義推流采樣視頻幀資料相關屬性，
- loginRoom，登錄房間，登錄房間函式會自動呼叫getToken獲取token令牌做權鑒，
這里注意在setCustomVideo函式內執行了setCustomVideoCaptureHandler，這里我們將他間接轉為了如下介面：
public interface CaptureListener {
void onStartCapture();
void onStopCapture();
}
上面物件用于監聽開始抓取推流資料和停止抓取事件，在Avatar側只需實作上面兩個介面即可：
// 獲取到 avatar 紋理后的處理
public void onCaptureAvatar(int textureId, int width, int height) {
if (mIsStop || mUser == null) { // rtc 的 onStop 是異步的, 可能activity已經運行到onStop了, rtc還沒
return;
}
boolean useFBO = true;
if (mBgRender == null) {
mBgRender = new TextureBgRender(textureId, useFBO, width, height, Texture2dProgram.ProgramType.TEXTURE_2D_BG);
}
mBgRender.setInputTexture(textureId);
float r = Color.red(mUser.bgColor) / 255f;
float g = Color.green(mUser.bgColor) / 255f;
float b = Color.blue(mUser.bgColor) / 255f;
float a = Color.alpha(mUser.bgColor) / 255f;
mBgRender.setBgColor(r, g, b, a);
mBgRender.draw(useFBO); // 畫到 fbo 上需要反向的
ZegoExpressEngine.getEngine().sendCustomVideoCaptureTextureData(mBgRender.getOutputTextureID(), width, height, System.currentTimeMillis());
}
@Override
public void onStartCapture() {
if (mUser == null) return;
// // 收到回呼后，開發者需要執行啟動視頻采集相關的業務邏輯，例如開啟攝像頭等
AvatarCaptureConfig config = new AvatarCaptureConfig(mUser.width, mUser.height);
// // 開始捕獲紋理
mCharacterHelper.startCaptureAvatar(config, this::onCaptureAvatar);
}
@Override
public void onStopCapture() {
Log.e(TAG, "結束推流");
mCharacterHelper.stopCaptureAvatar();
stopExpression();
}
以上步驟實作了Android端將虛擬形象推流到服務器端，詳細代碼可以看附件，
3 PC端拉取實時虛擬形象并展示
前往https://doc-zh.zego.im/article/3209下載Web版RTC SDK，檔案結構如下：
在keycenter.js中定義APPID等屬性值，
// 請從官網控制臺獲取對應的appID
const APPID = 從官網控制臺獲取appid
// 請從官網控制臺獲取對應的server地址，否則可能登錄失敗
const SERVER = 'wss://webliveroom510775561-api.imzego.com/ws'
//下面這個密鑰用于生成Token，最好不要客戶端暴露，應當在私人服務器使用
const SERVER_SECRET = 從官網控制臺獲取SERVER_SECRET
tokenUtils.js檔案用于創建token，這里跟android端的token是相同的改進，tokenUtils.js的內容比較多，這里不展示了，只需將它作為創建token的工具即可，
zego.js檔案用于創建RTC引擎，登錄房間以及監聽推流事件，一旦有推流事件立馬拉流，相關代碼如下：
function newToken(userId) {
const token = generateToken04(APPID, userId, SERVER_SECRET, 60 * 60 * 24, '');
console.log(">>>", generateToken04(APPID, '222', SERVER_SECRET, 60 * 60 * 24, ''))
return token;
}
function createZegoExpressEngine() {
var engine = new ZegoExpressEngine(APPID, SERVER);
return engine;
}
// Step1 Check system requirements
function checkSystemRequirements(engine, cb) {
console.log('sdk version is', engine.getVersion());
engine.checkSystemRequirements().then((result) => {
if (!result.webRTC) {
cb(false, 'browser is not support webrtc!!');
} else if (!result.videoCodec.H264 && !result.videoCodec.VP8) {
cb(false, 'browser is not support H264 and VP8');
} else if (!result.camera && !result.microphone) {
cb(false, 'camera and microphones not allowed to use');
} else {
if (result.videoCodec.VP8) {
if (!result.screenSharing) console.warn('browser is not support screenSharing');
} else {
console.log('不支持VP8，請前往混流轉碼測驗');
}
cb(true, null);
}
});
}
function initEvent(engine, onAddRemoteStream) {
engine.on('roomUserUpdate', (roomID, updateType, userList) => {
console.log('>>roomUserUpdate', roomId, state)
});
engine.on('roomStateUpdate', (roomId, state) => {
console.log('>>roomStateUpdate', roomId, state)
})
engine.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
console.log(">>update")
// streams added
if (updateType === 'ADD') {
const addStream = streamList[streamList.length - 1]
if (addStream && addStream.streamID) {
onAddRemoteStream(addStream.streamID)
}
} else if (updateType == 'DELETE') {
// del stream
const delStream = streamList[streamList.length - 1]
if (delStream && delStream.streamID) {
if (delStream.streamID === remoteStreamID) {
engine.stopPlayingStream(remoteStreamID)
}
}
}
});
}
// Step5 Start Play Stream
function playingStream(engine, videoId, streamId, cb, options = {
video: true,
audio: true
}) {
engine.startPlayingStream(streamId, options).then((remoteStream) => {
const remoteView = engine.createRemoteStreamView(remoteStream);
remoteView.play(videoId, {
objectFit: "cover",
enableAutoplayDialog: true,
})
cb(true, remoteStream);
}).catch((err) => {
cb(false, err)
});
}
function stopPlaying(engine, stremId) {
engine.stopPlayingStream(stremId)
}
// Login room
function loginRoom(engine, roomId, userId, userName, cb) {
var token = newToken(userId);
engine.loginRoom(roomId, token, {
userID: userId,
userName
}).then((result) => {
cb(true, result);
}).catch((err) => {
cb(false, err)
});
}
// Logout room
function logoutRoom(engine, roomId) {
engine.logoutRoom(roomId);
}
在index.html中參考如上javascript檔案，展示拉流內容：
<html>
<head>
<link href="https://www.cnblogs.com/RTCWang/p/index.css" type="text/css" rel="stylesheet"/>
<script src="https://www.cnblogs.com/RTCWang/p/express_sdk/ZegoExpressWebRTC.js"></script>
<script src="https://www.cnblogs.com/RTCWang/p/js/tokenUtils.js"></script>
<script src="https://www.cnblogs.com/RTCWang/p/js/zego.js"></script>
<script src="https://www.cnblogs.com/RTCWang/p/js/keycenter.js"></script>
</head>
<body>
<div >
<p id="toast"></p>
</div>
<div >
<div >
<label id="loginErrorMsg"></label>
</div>
<div >
<label>userId</label>
<input type="text" id="userId" value="https://www.cnblogs.com/RTCWang/p/S_0001"/>
</div>
<div >
<label>房間號</label>
<input type="text" id="roomId" value="https://www.cnblogs.com/RTCWang/p/R_0001"/>
</div>
<button id="loginBtn">登錄</button>
</div>
<div id="playVideo"></div>
<script src="https://www.cnblogs.com/RTCWang/p/js/index.js"></script>
</body>
</html>
4 快手、抖音直播推送實時虛擬畫面
接下來是振奮人心時刻，到了聯調時刻，在android打開畫面實時推理，并在瀏覽器中打開界面，可以看到如下畫面：
接下來只需使用直播伴侶軟體，將瀏覽器中的實時畫面實時轉發到快手或抖音，這里我們用快手直播伴侶實時截屏直播，可以看到如下畫面
5 附件
原始碼： https://github.com/RTCWang/Virtual-Live
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/539862.html
標籤：其他
下一篇：windows上用vs2017靜態編譯onnxruntime-gpu CUDA cuDNN TensorRT的坎坷之路