|
1 | | -import { DeepAR } from 'deepar'; |
2 | | -import deeparWasmPath from 'deepar/wasm/deepar.wasm'; |
3 | | -import faceTrackingModelPath from 'deepar/models/face/models-68-extreme.bin'; |
4 | | -import segmentationModelPath from 'deepar/models/segmentation/segmentation-160x160-opt.bin'; |
5 | | -import poseEstimationWasmPath from 'deepar/wasm/libxzimgPoseEstimation.wasm'; |
6 | | -import footDetectorPath from 'deepar/models/foot/foot-detection-96x96x6.bin'; |
7 | | -import footTrackerPath from 'deepar/models/foot/foot-tracker-96x96x18-test.bin'; |
8 | | -import footObjPath from 'deepar/models/foot/foot-model.obj'; |
9 | | -import * as effects from './effects'; |
| 1 | +import * as deepar from 'deepar'; |
10 | 2 |
|
| 3 | +// Log the version. Just in case. |
| 4 | +console.log("Deepar version: " + deepar.version); |
11 | 5 |
|
12 | | -const canvas = document.getElementById('deepar-canvas'); |
13 | | -canvas.width = window.innerWidth > window.innerHeight ? Math.floor(window.innerHeight * 0.66) : window.innerWidth; |
14 | | -canvas.height = window.innerHeight; |
| 6 | +// Top-level await is not supported. |
| 7 | +// So we wrap the whole code in an async function that is called immediatly. |
| 8 | +(async function() { |
15 | 9 |
|
16 | | -const deepAR = new DeepAR({ |
17 | | - licenseKey: 'your_license_key_goes_here', |
18 | | - deeparWasmPath, |
19 | | - canvas, |
20 | | - segmentationConfig: { |
21 | | - modelPath: segmentationModelPath, |
22 | | - }, |
23 | | - footTrackingConfig: { |
24 | | - poseEstimationWasmPath, |
25 | | - detectorPath: footDetectorPath, |
26 | | - trackerPath: footTrackerPath, |
27 | | - objPath: footObjPath, |
28 | | - }, |
29 | | - callbacks: { |
30 | | - onInitialize: () => { |
31 | | - // start video immediately after the initalization, mirror = true |
32 | | - deepAR.startVideo(true); |
| 10 | + // Resize the canvas according to screen size. |
| 11 | + const canvas = document.getElementById('deepar-canvas'); |
| 12 | + canvas.width = window.innerWidth > window.innerHeight ? Math.floor(window.innerHeight * 0.66) : window.innerWidth; |
| 13 | + canvas.height = window.innerHeight; |
33 | 14 |
|
34 | | - // or we can setup the video element externally and call deepAR.setVideoElement (see startExternalVideo function below) |
35 | | - |
36 | | - deepAR.switchEffect(0, 'slot', effects.viking, () => { |
37 | | - // effect loaded |
38 | | - }); |
39 | | - } |
40 | | - }, |
41 | | -}); |
42 | | - |
43 | | -deepAR.callbacks.onCameraPermissionAsked = () => { |
44 | | - console.log('camera permission asked'); |
45 | | -}; |
46 | | - |
47 | | -deepAR.callbacks.onCameraPermissionGranted = () => { |
48 | | - console.log('camera permission granted'); |
49 | | -}; |
50 | | - |
51 | | -deepAR.callbacks.onCameraPermissionDenied = () => { |
52 | | - console.log('camera permission denied'); |
53 | | -}; |
54 | | - |
55 | | -deepAR.callbacks.onScreenshotTaken = (photo) => { |
56 | | - console.log('screenshot taken ' + photo); |
57 | | -}; |
58 | | - |
59 | | -deepAR.callbacks.onImageVisibilityChanged = (visible) => { |
60 | | - console.log('image visible ' + visible); |
61 | | -}; |
62 | | - |
63 | | -deepAR.callbacks.onFaceVisibilityChanged = (visible) => { |
64 | | - console.log('face visible ' + visible); |
65 | | -}; |
66 | | - |
67 | | -deepAR.callbacks.onVideoStarted = () => { |
68 | | - const loaderWrapper = document.getElementById('loader-wrapper'); |
69 | | - loaderWrapper.style.display = 'none'; |
70 | | -}; |
71 | | - |
72 | | -deepAR.downloadFaceTrackingModel(faceTrackingModelPath); |
73 | | - |
74 | | -let isRecording = false; |
75 | | -document.getElementById('recording-btn').onclick = (e) => { |
76 | | - if (!isRecording) { |
77 | | - isRecording = true; |
78 | | - deepAR.startVideoRecording(); |
79 | | - console.log("Recording started!"); |
80 | | - } else { |
81 | | - deepAR.finishVideoRecording((video) => { |
82 | | - window.open(URL.createObjectURL(video), '_blank').focus(); |
83 | | - console.log("Recording finished!"); |
84 | | - isRecording = false; |
85 | | - }); |
86 | | - } |
87 | | -}; |
88 | | - |
89 | | -// Store video objects for cleanup |
90 | | -let videoObjects = {}; |
91 | | - |
92 | | -function startExternalVideo() { |
93 | | - cleanupVideoObjects(); |
94 | | - // create video element |
95 | | - const video = document.createElement('video'); |
96 | | - video.muted = true; |
97 | | - video.loop = true; |
98 | | - video.controls = true; |
99 | | - video.setAttribute('playsinline', 'playsinline'); |
100 | | - video.style.width = '100%'; |
101 | | - video.style.height = '100%'; |
102 | | - |
103 | | - // put it somewhere in the DOM |
104 | | - const videoContainer = document.createElement('div'); |
105 | | - videoContainer.appendChild(video); |
106 | | - videoContainer.style.width = '1px'; |
107 | | - videoContainer.style.height = '1px'; |
108 | | - videoContainer.style.position = 'absolute'; |
109 | | - videoContainer.style.top = '0px'; |
110 | | - videoContainer.style.left = '0px'; |
111 | | - videoContainer.style['z-index'] = '-1'; |
112 | | - document.body.appendChild(videoContainer); |
113 | | - |
114 | | - videoObjects.videoContainer = videoContainer; |
115 | | - videoObjects.video = video; |
116 | | - |
117 | | - navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => { |
118 | | - try { |
119 | | - video.srcObject = stream; |
120 | | - } catch (error) { |
121 | | - video.src = URL.createObjectURL(stream); |
122 | | - } |
123 | | - setTimeout(function () { |
124 | | - video.play(); |
125 | | - }, 50); |
126 | | - }).catch(function (error) { |
127 | | - console.log('error in video play:', error); |
| 15 | + // All the effects are in the public/effects folder. |
| 16 | + // Here we define the order of effect files. |
| 17 | + const effectList = [ |
| 18 | + 'effects/viking_helmet.deepar', |
| 19 | + 'effects/MakeupLook.deepar', |
| 20 | + 'effects/Split_View_Look.deepar', |
| 21 | + 'effects/flower_face.deepar', |
| 22 | + 'effects/Stallone.deepar', |
| 23 | + 'effects/galaxy_background_web.deepar', |
| 24 | + 'effects/Humanoid.deepar', |
| 25 | + 'effects/Neon_Devil_Horns.deepar', |
| 26 | + 'effects/Ping_Pong.deepar', |
| 27 | + 'effects/Pixel_Hearts.deepar', |
| 28 | + 'effects/Snail.deepar', |
| 29 | + 'effects/Hope.deepar', |
| 30 | + 'effects/Vendetta_Mask.deepar', |
| 31 | + 'effects/Fire_Effect.deepar', |
| 32 | + 'effects/Elephant_Trunk.deepar' |
| 33 | + ]; |
| 34 | + |
| 35 | + // Initialize DeepAR with an effect file. |
| 36 | + const deepAR = await deepar.initialize({ |
| 37 | + licenseKey: 'your_license_key_goes_here', |
| 38 | + canvas: canvas, |
| 39 | + rootPath: "./deepar-resources", // See webpack.config.js and package.json build script. |
| 40 | + effect: effectList[0] |
128 | 41 | }); |
129 | 42 |
|
130 | | - // tell the DeepAR SDK about our new video element |
131 | | - deepAR.setVideoElement(video, true); |
132 | | - |
133 | | - const loaderWrapper = document.getElementById('loader-wrapper'); |
134 | | - loaderWrapper.style.display = 'none'; |
135 | | -} |
136 | | - |
137 | | -function cleanupVideoObjects() { |
138 | | - if (videoObjects.length > 0) { |
139 | | - videoObjects.videoContainer.parentNode.removeChild(videoObjects.videoContainer); |
140 | | - videoObjects.videoContainer = null; |
141 | | - if (videoObjects.video.srcObject) { |
142 | | - // getUserMedia starts a stream, all tracks on all streams need to be stopped before calling getUserMedia again |
143 | | - videoObjects.video.srcObject.getTracks().forEach((track) => track.stop()); |
144 | | - } |
145 | | - videoObjects.video.pause(); |
146 | | - videoObjects = {}; |
| 43 | + // Hide the loading screen. |
| 44 | + document.getElementById("loader-wrapper").style.display = "none"; |
| 45 | + |
| 46 | + // Position the carousel to cover the canvas |
| 47 | + if (window.innerWidth > window.innerHeight) { |
| 48 | + const width = Math.floor(window.innerHeight * 0.66); |
| 49 | + const carousel = document.getElementsByClassName('effect-carousel')[0]; |
| 50 | + carousel.style.width = width + 'px'; |
| 51 | + carousel.style.marginLeft = (window.innerWidth - width) / 2 + "px"; |
147 | 52 | } |
148 | | -} |
149 | | - |
150 | | -// Position the carousel to cover the canvas |
151 | | -if (window.innerWidth > window.innerHeight) { |
152 | | - const width = Math.floor(window.innerHeight * 0.66); |
153 | | - const carousel = document.getElementsByClassName('effect-carousel')[0]; |
154 | | - carousel.style.width = width + 'px'; |
155 | | - carousel.style.marginLeft = (window.innerWidth - width) / 2 + "px"; |
156 | | -} |
| 53 | + |
| 54 | + // Configure carousel. |
| 55 | + $(document).ready(() => { |
| 56 | + $('.effect-carousel').slick({ |
| 57 | + slidesToShow: 1, |
| 58 | + centerMode: true, |
| 59 | + focusOnSelect: true, |
| 60 | + arrows: false, |
| 61 | + accessibility: false, |
| 62 | + variableWidth: true, |
| 63 | + }); |
| 64 | + |
| 65 | + // Switch the effect when carusel moves. |
| 66 | + $('.effect-carousel').on('afterChange', async function (event, slick, currentSlide) { |
| 67 | + await deepAR.switchEffect(effectList[currentSlide]); |
| 68 | + }); |
157 | 69 |
|
158 | 70 |
|
159 | | -$(document).ready(function () { |
160 | | - $('.effect-carousel').slick({ |
161 | | - slidesToShow: 1, |
162 | | - centerMode: true, |
163 | | - focusOnSelect: true, |
164 | | - arrows: false, |
165 | | - accessibility: false, |
166 | | - variableWidth: true, |
167 | 71 | }); |
168 | 72 |
|
169 | | - const effectList = [ |
170 | | - effects.viking, |
171 | | - effects.makeup, |
172 | | - effects.makeup_split, |
173 | | - effects.stallone, |
174 | | - effects.flower_face, |
175 | | - effects.galaxy_bacground, |
176 | | - effects.humaniod, |
177 | | - effects.devil_horns, |
178 | | - effects.ping_pong, |
179 | | - effects.hearts, |
180 | | - effects.snail, |
181 | | - effects.hope, |
182 | | - effects.vendetta, |
183 | | - effects.fire, |
184 | | - effects.elephant_trunk |
185 | | - ]; |
186 | | - |
187 | | - $('.effect-carousel').on('afterChange', function (event, slick, currentSlide) { |
188 | | - deepAR.switchEffect(0, 'slot', effectList[currentSlide]); |
189 | | - }); |
190 | | -}); |
| 73 | +})(); |
0 commit comments