Hi, I have problems- this option does not work… Give a real example of connecting this library zappar/video-recorder. For the screenshot- yes, it is normal, but not for the video…Who has already done such a thing help! Canvas in Unity3d- makes a mistake. Video Recording WebAR - #7
1 Like
I’m working on the same thing. I got this demo link from the Zappar support.
When it loads, a record button will appear, which, when tapped, will record for five (5) seconds and then prompt an .MP4 download. Just a word of warning that this has not yet been tested on iOS devices, but has been tested on a browser and Android, with the latest version of Chrome. Using a Samsung Galaxy Note 20 Ultra, we’ve been able to get around fifteen (~15) frames per second whilst recording.
I was also given this help.
Instructions I was able to find!
First, a polite foreword that since the demo was developed, we’ve condensed these snapshot/video type of packages into @zappar/sharing; so for newer WebAR builds you’ll need this package, as well as the @zappar/video-recorder package add-on. You can still likely use the older version that was used in creating the original example, but I did just want to let you know in case you wanted to try a more modern approach!
Here are the steps that allowed us to create the demo:
First, make a WebGL build of your project. Once your project has built, you’ll want to go into your index.html file. Inside the of this file, include our video recorder:
Then, find the gameInstance constructor, and pass in an additional setting so it looks something like this:
var gameInstance = UnityLoader.instantiate(“gameContainer”, “Build/webgl-dist.json”, {
onProgress: UnityProgress,
Module: {
webglContextAttributes: {
“preserveDrawingBuffer”: true
},
}
});
Adding this will make sure that we can actually capture previous frames. Now, at the end of the tag inside the body, you’ll want to get the canvas by it’s ID:
let canvas = document.getElementById(’#canvas’);
You can then refer to docs on the npm package page for usage of the recorder:
ZapparVideoRecorder.createCanvasVideoRecorder(canvas, {
audio: false,
maxFrameRate: 30,
quality: 10,
speed: 10,
}).then((r) => {
r.start();
setTimeout(() => {
r.stop();
}, 5000);
r.onComplete.bind(async res => {
let a = document.createElement(“a”);
a.href = await res.asDataURL();
a.download = “test.mp4”;
a.click();
});
})
As you saw, this should record a 5 second clip and then provide a test.mp4 download.
When I get it working I’ll Let you know.
Steve
1 Like
If you need to record your Unity webgl experience, I’ve made a plugin for that. It will work with UniversalAR, and it has the advantage of being able to record in-game audio as well. Zappar’s video recording can only record audio from the microphone.
If you need to play videos, check out my other plugin.
Stevesanerd.
Hello. I did it. But only in the Untiy3d version 2019.3.15. It means that it is a very old version and it has not developed. Another point is the speed, frame rate.the quality is all very low. And if I change it, it doesn’t get any better…Why are there so many barriers?
How to make the recording quality excellent? HD is trending now.
Hello @zizi-xsa,
Great to see the community’s traction regarding this feature. So I decided to give this a more formal touch by providing an easy to use unity package. Please find below the steps for including the package in your UAR project and user guide. I look forward to your feedback and suggestions.
Steps to import.
- Download the zip file containing
uar_videorecorder.unitypackagefrom this thread (PFA). - Import the package and in unity prompt select all and hit
importbutton. - The package contains some scripts, a WebGL plugin, and a template required for working with @zappar/video-recorder package.
User guide:
- You are looking for
ZVideoRecorderclass, which contains the essential APIs for communicating with the WebGL plugin. - The typical flow is -
ZVideoRecorder.Initialize: to setup the video recorder
ZVideoRecorder.StartRecording: start recording if initialization was a success
ZVideoRecorder.StopRecording: stop recording if the recording is in progress
and a few other helper methods to help in the flow. - For building you would want to select
ZapparVideoRecordertemplate in your player settings - Note that this plugin is only supported for Unity version 2021.x LTS and above. Due to limitations around the support for async methods with emscripten used by older versions of unity.
There’s a sample face mesh tracking project to demonstrate it’s usage and here’s a published URL for testing: zapworks site
Note that this is very much an experimental package, which means it hasn’t gone through proper testing across all the platforms yet. And lastly there are licensing implications in regards to using H264 and AAC encoding - please seek your own legal advice and obtain licenses as appropriate.
Cheers,
uar_videorecorder.zip (101.5 KB)
4 Likes
Thank you, I will try.
I was glad that such an easy installation is Package. Only the error came unexpectedly, tell me- what does it mean? There seems to be a problem with the server
The error is complaining about ZapparVideoRecorder! Are you using the right WebGL template for build? Please note that using Zappar>Editor>Update Project Settings To Publish uses the default template of Zappar or Zappar2019… In this case you would want to use ZapparVideoRecording template, which you would have to manually select before building.
If this is not the case can you share any test URL or stripped unity project for me to test this?
Best,
1 Like
If you want to record you Unity UAR game on webgl, check out my plugin. It can record in game audio in addition to microphone audio (the Zappar package can’t record in game audio).
2 Likes
Hello. Shubham 
I tried to do it on Unity 3d version 2021.2.11 
And I had problems with the Web. Reinstalled version lower than 2021.2. 9 .OK. 
I use ZapparVideoRecording template,
But, there is a problem that there is no full loading of the scene. There’s a breakdown somewhere inside. Will you help?
Zap_video_test.zip (2.9 MB)
Hi @zizi-xsa,
your zipped unitypackage doesn’t contain any WebGLTemplate or plugin! Can you share the experience url or unity project in working condition for me to inspect.
Have you tried reading web console for any error?
Regards,
Hi @zizi-xsa,
So it seems you didn’t have the right WebGL compression settings in the project. You can either enable the Decompression Fallback or set the Compression Format to Disable instead of Brotli under the Publishing Settings.
Best,
1 Like
Shubham 
Huge thanks!! I have a video really making a record. You are talented! I put - this Decompression Fallback . And another question, I don’t need a face tracking scene, but a world one. And my camera doesn’t switch from the face. I’ve had two cameras. Perhaps there are settings deep in the scripts?
Nicely done @zizi-xsa,
If you’re looking to switch between front and rear facing camera at runtime, then checkout SwitchToFrontCameraMode/SwitchToRearCameraMode in ZapparCamera.cs. You can use this instead of placing two different Zappar Camera objects in scene… and subsequently switch between tracking targets as per your requirements.
1 Like