Re @Epeny,

D'accord, le soucis c'est que tu as fais un mélange des deux tutoriels 😂

Il faut que tu suives le tutoriel que je t'ai envoyé (cf. ce tuto) et uniquement celui la pour le moment 😉

Re @Space001,

J'ai lu ce tutoriel, ensuite j'ai lu encore un autre tutoriel et j'ai collé tous les codes dans mon fichier.

Sur le navigateur dans le console il y a un message d'erreur apparaît lorsque je clique sur Play :

Uncaught (in promise) MediaStreamError { name: "OverconstrainedError", message: "Constraints could be not satisfied.", constraint: "width", stack: "" }

Uncaught (in promise)
startStream http://localhost/Media-Devices/script.js:57

    AsyncFunctionThrow self-hosted:694

    (Asynchrone : async)
    onclick http://localhost/Media-Devices/script.js:51

    (Asynchrone : EventHandlerNonNull)
    <anonyme> http://localhost/Media-Devices/script.js:37

Le message d'erreur m'indique qu'il y a un problème dans cette ligne de code à cause du parenthèse de stream :

const startStream = async (constraints) => {
  const stream = await navigator.mediaDevices.getUserMedia(constraints);
  handleStream(stream);
};

Voici le code de source du fichier script.js :

feather.replace();

const controls = document.querySelector('.controls');
const cameraOptions = document.querySelector('.video-options>select');
const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const screenshotImage = document.querySelector('img');
const buttons = [...controls.querySelectorAll('button')];
let streamStarted = false;

const [play, pause, screenshot] = buttons;

const constraints = {
  video: {
    width: {
      min: 1280,
      ideal: 1920,
      max: 2560,
    },
    height: {
      min: 720,
      ideal: 1080,
      max: 1440
    },
  }
};

const getCameraSelection = async () => {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const videoDevices = devices.filter(device => device.kind === 'videoinput');
  const options = videoDevices.map(videoDevice => {
    return `<option value="${videoDevice.deviceId}">${videoDevice.label}</option>`;
  });
  cameraOptions.innerHTML = options.join('');
};

play.onclick = () => {
  if (streamStarted) {
    video.play();
    play.classList.add('d-none');
    pause.classList.remove('d-none');
    return;
  }
  if ('mediaDevices' in navigator && navigator.mediaDevices.getUserMedia) {
    const updatedConstraints = {
      ...constraints,
      deviceId: {
        exact: cameraOptions.value
      }
    };
    startStream(updatedConstraints);
  }
};

const startStream = async (constraints) => {
  const stream = await navigator.mediaDevices.getUserMedia(constraints);
  handleStream(stream);
};

const handleStream = (stream) => {
  video.srcObject = stream;
  play.classList.add('d-none');
  pause.classList.remove('d-none');
  screenshot.classList.remove('d-none');
  streamStarted = true;
};

getCameraSelection();


cameraOptions.onchange = () => {
  const updatedConstraints = {
    ...constraints,
    deviceId: {
      exact: cameraOptions.value
    }
  };
  startStream(updatedConstraints);
};

const pauseStream = () => {
  video.pause();
  play.classList.remove('d-none');
  pause.classList.add('d-none');
};

const doScreenshot = () => {
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  canvas.getContext('2d').drawImage(video, 0, 0);
  screenshotImage.src = canvas.toDataURL('image/webp');
  screenshotImage.classList.remove('d-none');
};

pause.onclick = pauseStream;
screenshot.onclick = doScreenshot;

Re @Epeny,

Je vais aller suivre le tutoriel que tu m'as conseillé, puis je te ferais signe lorsque je vais terminer de suivre le tutoriel et intégrer sur l'application.

Pas de soucis 😉

Je voudrais savoir est-ce que je peux aussi suivre ce tutoriel ou bien c'est différent de celui de l'autre tutoriel ?

Pourquoi pas 😜

C'est à peu près le même sujet 😁

Bonjour @Space001,

Je vais aller suivre le tutoriel que tu m'as conseillé, puis je te ferais signe lorsque je vais terminer de suivre le tutoriel et intégrer sur l'application.

Je voudrais savoir est-ce que je peux aussi suivre ce tutoriel ou bien c'est différent de celui de l'autre tutoriel ?

Bonjour @Epeny,

Tout d'abord, merci à toi d'avoir pris le temps de bien expliquer ce que tu as au préalable réalisé et ce que tu comptes intégrer à ton site 😉

Je te propose donc de lire attentivement ce tutoriel, il est assez long mais il te permettra de demander l'autorisation d'utilisation de la caméra à l'utilisateur et d'afficher une valeur en retour, cela est essentiel pour la suite 😉

Une fois que tu auras lu le tutoriel ci-dessus, essaye de l'intégrer sur ton site et préviens nous si tu rencontres des difficultés 😉

A très bientôt 😎