Как создать веб-страницу, которая захватывает камеру пользователя в телефоне и кемпингах?

getUserMedia(), как вы заметили, работает непоследовательно в разных браузерах и на разных устройствах. (Совместимость — общеизвестная головная боль в этой области.) Вы можете использовать образец по этому URL-адресу, чтобы протестировать основные функции моментальных снимков. https://webrtc.github.io/samples/src/content/getusermedia/canvas/

Этот пример кода помещает свой результат в обычный двухмерный холст (холсты на самом деле работают в нескольких браузерах).

Я не буду пытаться описать здесь операцию обрезки, скажу только, что она работает с элементами холста и помещает результат на другой холст. Вы можете найти множество из реализации с помощью простого поиска в Интернете.

В Javascript, когда у вас есть кадрированный холст с нужным изображением, вы используете toBlob() следующим образом:

  var quality = 0.8
  croppedCanvas.toBlob(
     function callback (blob) {
       /* POST the blob here */
     }, 
     'image/jpg',
     quality);

В обратном вызове вы получаете Объект большого двоичного объекта, содержащий закодированное (jpegged) изображение. Затем вы можете из обратного вызова отправить его на свой сервер с помощью операции аякс или принести.

Я боюсь, что ваш вопрос касается многих тем, поэтому я не написал пример кода для всего. Но это должно заставить вас начать. (Недавно мне самому пришлось ползать по всему этому, и мне сложно во всем этом разобраться.)