123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- const video = document.getElementById('arjs-video');
- const button = document.getElementById('button');
- const select = document.getElementById('select');
- let currentStream;
- function stopMediaTracks(stream) {
- stream.getTracks().forEach(track => {
- track.stop();
- });
- }
- function gotDevices(mediaDevices) {
- select.innerHTML = '';
- select.appendChild(document.createElement('option'));
- let count = 1;
- mediaDevices.forEach(mediaDevice => {
- if (mediaDevice.kind === 'videoinput') {
- const option = document.createElement('option');
- option.value = mediaDevice.deviceId;
- const label = mediaDevice.label || `Camera ${count++}`;
- const textNode = document.createTextNode(label);
- option.appendChild(textNode);
- select.appendChild(option);
- }
- });
- }
- button.addEventListener('click', event => {
- if (typeof currentStream !== 'undefined') {
- stopMediaTracks(currentStream);
- }
- const videoConstraints = {};
- if (select.value === '') {
- videoConstraints.facingMode = 'environment';
- } else {
- videoConstraints.deviceId = { exact: select.value };
- }
- const constraints = {
- video: videoConstraints,
- audio: false
- };
- // navigator.mediaDevices
- // .getUserMedia(constraints)
- // .then(stream => {
- // currentStream = stream;
- // video.srcObject = stream;
- // return navigator.mediaDevices.enumerateDevices();
- // })
- // .then(gotDevices)
- // .catch(error => {
- // console.error(error);
- // });
- navigator.mediaDevices
- .getUserMedia(constraints)
- .then((stream) => {
- currentStream = stream;
- document.getElementById('arjs-video').srcObject = stream;
- var event = new CustomEvent("camera-init", { stream: stream });
- window.dispatchEvent(event);
- document.body.addEventListener("click", function () {
- document.getElementById('arjs-video').play();
- });
- return navigator.mediaDevices.enumerateDevices();
- })
- .then(gotDevices)
- .catch((error) => {
- console.error(error);
- });
- });
- navigator.mediaDevices.enumerateDevices().then(gotDevices);
|