Как сделать фотографию с помощью мобильных камер и сохранить ее в базе данных с предварительным просмотром с помощью мобильного браузера

Question

Сначала я хочу сделать фотографию, затем выполнить предварительный просмотр и, наконец, сохранить ее в базе данных.Я создал код, используя HTML, Javascript, PHP и отлично работает в браузере компьютеров.

Но мне нужен код для мобильных браузеров.Я пытался много раз, но не смог получить правильный код.Поэтому, пожалуйста, помогите мне сделать это.Спасибо.

Вот мои коды

HTML

    <div align="center">
<p><input type="file"  accept="image/*" capture="camera" name="image" id="file"  onchange="loadFile(event)" style="display: none;"></p>
<br />
<p><label for="file" style="cursor: pointer;">Take SnapShot</label></p>  
<br />      
<input type=button value="Save Snapshot" onClick="saveSnap()">
<p><img id="output" width="200" style="display: none;"/></p>
<div id="results"></div>
</div>

JAVASCRIPT

var loadFile = function(event) 
{
var image = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
document.getElementById('results').innerHTML = '<img id="imageprev" style="height: 200px; width: 200px;" src="'+image.src+'"/>';
};
//Code to handle taking the snapshot and displaying it locally
function saveSnap()
{           
var base64image =  document.getElementById("imageprev").src;
alert(base64image);
Webcam.upload( base64image, 'upload.php', function(code, text) {
console.log('Save successfully');                
});
}

PHP - Загрузить файл

$filename = 'Snap_'.date('YmdHis') . '.jpeg';
    $url = '';
    if( move_uploaded_file($_FILES['webcam']['tmp_name'],'upload/'.$filename) ){
       $url = 'http://' . $_SERVER['HTTP_HOST'] . dirname($_SERVER['REQUEST_URI']) . '/upload/' . $filename;
    }
    echo $url;

Сожалею.Я знаю много ошибок или путаницы.Проблема в том, что я могу сохранить изображение в папке «UPLOAD».пожалуйста, помогите мне исправить это.