最近有个项目需要发布到web平台，项目中需要视频录制和截图，尝试了一些插件，在iOS和Android还可以，WebGL上没有找到合适的。网上查了下，WebGL2.0已经原生的支持视频录制和截图了，于是研究了下，目前已经应用在项目中了，现在把Unity在WebGL上视频录制和截图整理成一个Unity项目分享出来，以飨各位有兴趣的朋友。
1.WebGL中录制视频和截图
这个直接去官网找例子，不多说了，直接贴代码：
/** WebGLRecoder.js
** WebGL录制视频和截图
*/
let mediaRecorder;
let recordedBlobs;
let canvas;
let stream;
//截图
function ScreenShot(fileName) {
console.log('ScreenShot', fileName);
canvas = document.querySelector('canvas');
console.log(typeof(canvas));
console.log(canvas);
var dataURL = canvas.toDataURL('image/png');
//直接下载
var a = document.createElement("a");
a.style.display = 'none';
a.href = dataURL;
a.download = fileName;
document.body.appendChild(a);
a.click();
setTimeout(() =>{
document.body.removeChild(a);
//window.URL.revokeObjectURL(url);
},
100);
console.log('ScreenShot', dataURL);
}
function handleDataAvailable (event) {
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
function handleStop (event) {
console.log('Recorder stopped: ', event);
}
//开始录制
function StartRecording () {
canvas = document.querySelector('canvas');
stream = canvas.captureStream(); // frames per second
let options = {mimeType: 'video/webm'};
recordedBlobs = [];
try {
mediaRecorder = new MediaRecorder(stream, options);
} catch(e0) {
console.log('Unable to create MediaRecorder with options Object: ', e0);
try {
options = {
mimeType: 'video/webm,codecs=vp9'
};
mediaRecorder = new MediaRecorder(stream, options);
} catch(e1) {
console.log('Unable to create MediaRecorder with options Object: ', e1);
try {
options = 'video/vp8'; // Chrome 47
mediaRecorder = new MediaRecorder(stream, options);
} catch(e2) {
alert('MediaRecorder is not supported by this browser.\n\n' + 'Try Firefox 29 or later, or Chrome 47 or later, ' + 'with Enable experimental Web Platform features enabled from chrome://flags.');
console.error('Exception while creating MediaRecorder:', e2);
return;
}
}
}
console.log('Created MediaRecorder', mediaRecorder, 'with MIME_TYPE', options);
mediaRecorder.onstop = handleStop;
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start(100); // collect 100ms of data
console.log('MediaRecorder started', mediaRecorder);
}
//完成录制
function StopRecording () {
console.log("WebGLRecoder: Stopping recording"),
mediaRecorder.stop();
}
//下载
function RecordDownload (fileName) {
console.log('RecordDownload');
const blob = new Blob(recordedBlobs, {
type: 'video/webm'
});
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
//a.download = 'test.webm';
a.download = fileName;
document.body.appendChild(a);
a.click();
setTimeout(() =>{
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
},
100);
}
2.基于jslib的Unity与WebGL跨平台通信
在浏览器中，调用JavaScript的推荐方法是将JavaScript源添加到项目中，然后直接从脚本代码中调用这些函数，Unity有自己在WebGL中实现的库，而且Unity最终会使用emscripten将源代码从C / C ++代码编译为JavaScript。
其做法就是在Assets/Plugins/WebGL中新建一个.jslib的文件：
// WebGLRecoder.jslib
const WebGLRecoder = {
$sharedInstance: {
},
WebGLScreenShot: function(fileName) {
console.log('ScreenShot', Pointer_stringify(fileName));
ScreenShot(Pointer_stringify(fileName));
},
WebGLStartRecording: function() {
StartRecording();
},
WebGLStopRecording: function(obj) {
console.log("WebGLRecoder: Stopping recording");
StopRecording();
Runtime.dynCall('v', obj, 0);
},
WebGLRecordDownload: function(fileName) {
console.log('RecordDownload: ', Pointer_stringify(fileName));
RecordDownload(Pointer_stringify(fileName));
},
WebGLGetStudentName: function(){
var name = getStudentNameFromLocal();
console.log('name:'+name);
//Get size of the string
var bufferSize = lengthBytesUTF8(name) + 1;
//Allocate memory space
var buffer = _malloc(bufferSize);
//Copy old data to the new one then return it
stringToUTF8(name, buffer, bufferSize);
return buffer;
},
WebGLGetStudentNo: function(){
var no = getStudentNoFromLocal();
console.log('no:'+no);
//Get size of the string
var bufferSize = lengthBytesUTF8(no) + 1;
//Allocate memory space
var buffer = _malloc(bufferSize);
//Copy old data to the new one then return it
stringToUTF8(no, buffer, bufferSize);
return buffer;
},
WebGLIsLogin: function(){
if(hasLogin()){
return 1;
}else{
return 0;
}
},
WebGLLogin: function(){
console.log('login');
Login();
},
WebGLGetServerHost: function(){
var host = getServerHost();
console.log('host:'+host);
//Get size of the string
var bufferSize = lengthBytesUTF8(host) + 1;
//Allocate memory space
var buffer = _malloc(bufferSize);
//Copy old data to the new one then return it
stringToUTF8(host, buffer, bufferSize);
return buffer;
},
WebGLGetFileServerHost: function(){
var host = getFileServerHost();
console.log('host:'+host);
//Get size of the string
var bufferSize = lengthBytesUTF8(host) + 1;
//Allocate memory space
var buffer = _malloc(bufferSize);
//Copy old data to the new one then return it
stringToUTF8(host, buffer, bufferSize);
return buffer;
}
};
autoAddDeps(WebGLRecoder, "$sharedInstance"),
mergeInto(LibraryManager.library, WebGLRecoder);
这个jslib调用上述js中的方法，并且提供接口给C#调用：
using AOT;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Runtime.InteropServices;
using UnityEngine;
public class WebGLManager : SingletonMonoNewGO<WebGLManager>
{
/// <summary>
/// C#-->WebGLRecoder.jslib-->WebGLRecoder.js(index.html <script src="js/WebGLRecoder.js"></script>)
/// </summary>
/// <param name="fileName"></param>
#if UNITY_WEBGL && !UNITY_EDITOR
[DllImport(@"__Internal")]
public static extern void WebGLScreenShot(string fileName);
[DllImport(@"__Internal")]
public static extern void WebGLStartRecording();
[DllImport(@"__Internal")]
public static extern void WebGLStopRecording(Action callback);
[DllImport(@"__Internal")]
public static extern void WebGLRecordDownload(string fileName);
#endif
public void ScreenShot(string fileName)
{
#if UNITY_WEBGL && !UNITY_EDITOR
WebGLScreenShot(fileName);
#endif
}
public void StartRecording()
{
#if UNITY_WEBGL && !UNITY_EDITOR
WebGLStartRecording();
#endif
}
/// <summary>
/// 停止录屏
/// </summary>
/// <param name="callback">该回调一定是静态方法</param>
public void StopRecording(Action callback)
{
#if UNITY_WEBGL && !UNITY_EDITOR
WebGLStopRecording(callback);
#endif
}
public void RecordDownload(string fileName)
{
#if UNITY_WEBGL && !UNITY_EDITOR
WebGLRecordDownload(fileName);
#endif
}
}
3.发布WebGL，在html导入相关js
完成C#与jslib的对接后，就可以发布webgl工程了，
WebGL工程结构
这里我已经将第一步编写的录制视频和截图的WebGLRecoder.js文件放到js目录下(没有就创建一个)，index.html中导入js文件
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity WebGL Player | Holder-Hander</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">
<script src="TemplateData/UnityProgress.js"></script>
<script src="Build/UnityLoader.js"></script>
<!-- 录制和截图js-->
<script src="js/WebGLRecoder.js"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "Build/webgl.json", {
onProgress: UnityProgress,
Module: {
webglContextAttributes: {"preserveDrawingBuffer": true},
}
});
</script>
</head>
<body>
<div class="webgl-content">
<div id="gameContainer" style="width: 960px; height: 600px"></div>
<div class="footer">
<div class="fullscreen" onclick="gameInstance.SetFullscreen(1)"></div>
</div>
</div>
</body>
</html>
还有要注意WebGL必须要部署到一个web服务器上才能打开，不能直接通过浏览器打开。
到此终于，可以开心的去开发业务功能了。
项目我已经整理出来了，github地址：https://github.com/eangulee/UnityWebGLRecoder
好了，最近研究了下AR环境下的手势识别，demo已经上传到github，有兴趣的可以去笔者的github中找一下，有空再写篇文章介绍下吧。
哈哈哈哈哈，国庆要去浪了~~~
