JavaScript로 사진 찍고 싶어요(8·)

브라우저에서 사진을 찍는 경우가 있어 API를 확인한 후navigator.getUserMedia() 추천하지 않으니 다음에 사용하세요navigator.mediaDevices.getUserMedia()
사운드와 이미지를 캡처한 Media Capture and Streams API로 스냅샷을 찍어봤다.
소스 코드

자바의 준비

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>MediaDevices.getUserMedia()</title>
</head>
<body>

<button onclick="startVideo()">ビデオ開始！</button>
<button onclick="stopVideo()">ビデオ終了！</button>
<button onclick="snapshot()">写真撮影！</button>

<h2>JavaScriptでカメラ表示(・８・)</h2>
<video autoplay width="320" height="240"></video>

<h2>スナップショット！</h2>
<img/>


<canvas style="display: none" width="320" height="240"></canvas>
<script src="app.js"></script>
</body>
</html>

이벤트 클릭 버튼 및

캡처용 비디오 레이블 및

스냅샷 결과가 있는 canvas 라벨

(탭에 잠시 저장된 그림의 공간이기 때문에 숨겨진 스타일로)

캡처 결과의 레이블을 표시합니다.

어, 필요 없을 것 같아.
그러고 보면 비디오 요소가 없는 autooplay는 영상이 재생되지만 멋있어진다.왜 그랬을까

비디오 캡처

ビデオ開始！ボタンで走るやつ

function startVideo() {
    console.info('入出力デバイスを確認してビデオを開始するよ！');

    Promise.resolve()
        .then(function () {
            return navigator.mediaDevices.enumerateDevices();
        })
        .then(function (mediaDeviceInfoList) {
            console.log('使える入出力デバイスs->', mediaDeviceInfoList);

            var videoDevices = mediaDeviceInfoList.filter(function (deviceInfo) {
                return deviceInfo.kind == 'videoinput';
            });
            if (videoDevices.length < 1) {
                throw new Error('ビデオの入力デバイスがない、、、、、。');
            }

            return navigator.mediaDevices.getUserMedia({
                audio: false,
                video: {
                    deviceId: videoDevices[0].deviceId
                }
            });
        })
        .then(function (mediaStream) {
            console.log('取得したMediaStream->', mediaStream);
            videoStreamInUse = mediaStream;
            document.querySelector('video').src = window.URL.createObjectURL(mediaStream);
            // 対応していればこっちの方が良い
            // document.querySelector('video').srcObject = mediaStream;


        })
        .catch(function (error) {
            console.error('ビデオの設定に失敗、、、、', error);
        });
}

이번에 사용navigator.mediaDevices.enumerateDevices()과navigator.mediaDevices.getUserMedia()하면 Promise가 반환되므로 Promise를 사용하세요.resolve().then()......then () 형식으로 순서대로

터미널에서 사용할 수 있는 입력과 출력 장치를 얻기

비디오를 획득한 MediaStream

비디오 요소 삽입

전화를 하고 있습니다.

enumerateDevices()

MediaDeviceInfo(정렬)의 속성kind로 돌아가기

videoinput

audioinput

audiooutput

중 하나, 이걸 보고 어떤 설비인지 확인하세요.이번 목표는 deviceInfo.kind == 'videoinput';의...

getUserMedia()

매개변수에 지정된 Stream을 가져옵니다.

{ audio: true, video: false }

기다리다

{ audio: false, video: { width: 1280, height: 720 } }

그렇다면 원하는 설비의 희망은?제출둘 다 진실로 받아들이면 어떤 보답이 있을까?
이번에 ↑에서 가져온 deviceId를 들고 video: {deviceId: hogehoge } 형식으로 설비를 지정한다.
사실 프런트, 뒤에 각각 카메라의 단말기가 있는 상황에서

{ audio: true, video: { facingMode: { exact: "environment" } } }

기다리다

{ audio: true, video: { facingMode: "environment" } }

이렇게 쓰는 게 좋지만 손 옆에 있는 스마트폰 단말기라면 기본은?앞에 있는 카메라의 스트림 이외에는 얻지 못했습니다.가능하다면,,, fmm

비디오 중지

의외로 스마트폰으로 포착되면 따뜻해지기 때문에 정지된 처리도 적어본다.말은 그렇지만 여기 녀석들은 여전히 그렇다

//ビデオ停止！ボタンで走るやつ

function stopVideo() {
    console.info('ビデオを止めるよ！');

    videoStreamInUse.getVideoTracks()[0].stop();

    if (videoStreamInUse.active) {
        console.error('停止できかた、、、', videoStreamInUse);
    } else {
        console.log('停止できたよ！', videoStreamInUse);
    }
}

스냅샷 캡처

비디오 라벨의 내용CanvasRenderingContext2D.drawImage()이 canvas 요소에 유입될 수 있기 때문에 이것과 HTMLCanvasElement.toDataURL()를 결합하여 라벨로 데이터 URI 형식의 이미지를 표시합니다.


function snapshot() {
    console.info('スナップショットをとるよ！');

    var videoElement = document.querySelector('video');
    var canvasElement = document.querySelector('canvas');
    var context = canvasElement.getContext('2d');

    context.drawImage(videoElement, 0, 0, videoElement.width, videoElement.height);
    document.querySelector('img').src = canvasElement.toDataURL('image/webp');
}

첫 번째 방문 시 권한을 묻습니다. 허락해 주십시오.

잘 됐다!(・8・)

Reference

이 문제에 관하여(JavaScript로 사진 찍고 싶어요(8·)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/TatsuyaYamamoto/items/98d791ef1bb7658a9395

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)