Unity 在WebGL上录制视频和截图

最近有个项目需要发布到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中找一下，有空再写篇文章介绍下吧。
哈哈哈哈哈，国庆要去浪了~~~