Set the max camera resolution before commencing video streaming cont'd

This commit is contained in:
afiq.hamzah
2023-05-23 13:44:53 +08:00
parent b88af639da
commit df8455a857
4 changed files with 10 additions and 9 deletions
+1 -1
View File
@@ -153,6 +153,6 @@ class MarhunPhotoService
$webpCompiler = $this->getWebpCompilerByOS(); $webpCompiler = $this->getWebpCompilerByOS();
exec($webpCompiler . ' -preset photo ' . ' -resize 1280 720 ' . ' -mt ' . $originalFilePath . ' -o ' . $convertedFilePath); exec($webpCompiler . ' -preset photo ' . ' -resize 1920 1080 ' . ' -mt ' . $originalFilePath . ' -o ' . $convertedFilePath);
} }
} }
+5 -4
View File
@@ -18,12 +18,13 @@ function marhunPhotoCapturerFactory(modal_selector) {
let canvas = document.createElement('canvas'); let canvas = document.createElement('canvas');
let captureImage = () => { let captureImage = () => {
let videoTag = modal.querySelector('.video-tag-overallmarhun.video-data');
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
try { try {
let modal = document.querySelector(modal_selector); let modal = document.querySelector(modal_selector);
let videoTag = modal.querySelector('.video-tag-overallmarhun.video-data'); let videoTag = modal.querySelector('.video-tag-overallmarhun.video-data');
canvas.width = 1920; canvas.width = 3200;
canvas.height = 1080; canvas.height = 1800;
canvas.getContext("2d").drawImage(videoTag, 0, 0, canvas.width, canvas.height) canvas.getContext("2d").drawImage(videoTag, 0, 0, canvas.width, canvas.height)
resolve(canvas); resolve(canvas);
} catch (error) { } catch (error) {
@@ -160,8 +161,8 @@ function marhunPhotoCapturerFactory(modal_selector) {
function composeConstraint(camera) { function composeConstraint(camera) {
let constraints = { let constraints = {
width: { exact: 3200 }, width: { exact: 1920 },
height: { exact: 1800 }, height: { exact: 1080 },
}; };
if (camera.deviceId !== '') { if (camera.deviceId !== '') {
@@ -21,7 +21,7 @@
<img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()" <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
src="" width="960" src="" width="960"
class="border border-dark d-none"> class="border border-dark d-none">
<video class="video-tag-overallmarhun video-preview" width="960" autoplay=true /> <video class="video-tag-overallmarhun video-preview" width="960" height="540" autoplay=true />
<video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true /> <video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true />
</div> </div>
<input accept="image/png, 'image/jpeg'" type="file" id="inputGroupFile04" name="gambarMarhun" <input accept="image/png, 'image/jpeg'" type="file" id="inputGroupFile04" name="gambarMarhun"
@@ -80,7 +80,7 @@
<img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()" <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
src="" width="960" src="" width="960"
class="border border-dark d-none"> class="border border-dark d-none">
<video class="video-tag-overallmarhun video-preview" width="960" autoplay=true /> <video class="video-tag-overallmarhun video-preview" width="960" height="540" autoplay=true />
<video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true /> <video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true />
</div> </div>
</div> </div>
@@ -23,7 +23,7 @@
<img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()" <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
src="" width="960" src="" width="960"
class="border border-dark d-none"> class="border border-dark d-none">
<video class="video-tag-overallmarhun video-preview" width="960" autoplay=true /> <video class="video-tag-overallmarhun video-preview" width="960" height="540" autoplay=true />
<video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true /> <video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true />
</div> </div>
<input accept="image/png, 'image/jpeg'" type="file" id="inputGroupFile04" name="gambarMarhun" class="d-none"> <input accept="image/png, 'image/jpeg'" type="file" id="inputGroupFile04" name="gambarMarhun" class="d-none">
@@ -80,7 +80,7 @@
<img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()" <img class="image-tag-overallmarhun" onclick="viewCapturedPhoto()"
src="" width="960" src="" width="960"
class="border border-dark d-none"> class="border border-dark d-none">
<video class="video-tag-overallmarhun video-preview" width="960" autoplay=true /> <video class="video-tag-overallmarhun video-preview" width="960" height="540" autoplay=true />
<video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true /> <video class="video-tag-overallmarhun d-none video-data" width="1920" height="1080" autoplay=true />
</div> </div>
<input accept="image/png, 'image/jpeg'" type="file" id="inputGroupFile04" name="gambarMarhun" class="d-none"> <input accept="image/png, 'image/jpeg'" type="file" id="inputGroupFile04" name="gambarMarhun" class="d-none">