1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

📷カメラ機能を作成しよう *フロントカメラ編

Last updated at Posted at 2022-01-08

カメラ機能が、パソコンに入ってなかった人優先でカメラ機能を
作ってみました
有線カメラを、パソコンに付けると監視カメラにもなりますね
それとピクチャインピクチャを利用するといつでも見れますね
それじゃ作ってみよう

<li><a href="#area-1">WEBカメラの映像を表示</a></li>
			<li><a href="#area-2">リアカメラでの、撮影</a></li>
			<li><a href="#area-3">フロントカメラでの撮影</a></li>



<section class="area" id="area-1">
			

<footer id="footer">
	<p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<section class="area" id="area-1">

  <h2>WEBカメラの映像を表示</h2>
</head>
<body>
    <div>
        <h1>WEBカメラの映像を表示</h1>
        <div>
            <video id="video"></video>
        </div>
    </div>  
    <script>
        const video = document.getElementById("video")
        navigator.mediaDevices.getUserMedia({
            video: true,
            audio: false,
        }).then(stream => {
            video.srcObject = stream;
            video.play()
        }).catch(e => {
          console.log(e)
        })
    </script>  


 


</body>
</html>

</body>
</html>



<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Camera Test</title>
  <style>
  canvas, video{
    border: 1px solid gray;
  }
  </style>
</head>
<body>


<html>
<body>
<ol>
<pre>
<section class="area" id="area-2">

<h1>撮影します。</h1>
撮影したものは、右側の画面です。
<video id="camera" width="300" height="200"></video>
<canvas id="picture" width="300" height="200"></canvas>
<form>
  <button type="button" id="shutter">撮影する</button>

</form>

<audio id="se" preload="auto">
  <source src="camera-shutter1.mp3" type="audio/mp3">
</audio>

<script>
window.onload = () => {
  const video  = document.querySelector("#camera");
  const canvas = document.querySelector("#picture");
  const se     = document.querySelector('#se');

  /** カメラ設定 */
  const constraints = {
    audio: false,
    video: {
      width: 300,
      height: 200,
    facingMode: "user"   // フロントカメラを利用する
//     facingMode: { exact: "environment" }  // リアカメラを利用する場合
    }
  };

  /**
   * カメラを<video>と同期
   */
  navigator.mediaDevices.getUserMedia(constraints)
  .then( (stream) => {
    video.srcObject = stream;
    video.onloadedmetadata = (e) => {
      video.play();
    };
  })
  .catch( (err) => {
    console.log(err.name + ": " + err.message);
  });

  /**
   * 撮影
   */
   document.querySelector("#shutter").addEventListener("click", () => {
    const ctx = canvas.getContext("2d");

    // 演出的な目的で一度映像を止めてSEを再生する
    video.pause();  // 映像を停止
    se.play();      // シャッター音
    setTimeout( () => {
      video.play();    // 1.5秒後にカメラ再開
    }, 1500);


    // canvasに画像を貼り付ける
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);


    const c = document.getElementById('picture');
    c.toBlob((blob) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        document.body.appendChild(a);
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth()+1;
var date = nowDate.getDate();

var hours = nowDate.getHours();

var minutes = nowDate.getMinutes();

var Seconds = nowDate.getSeconds();


var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒';
        a.download = today + '.png';
        a.href = url;
        a.click();
        a.remove();
        setTimeout(() => {
            URL.revokeObjectURL(url);
        }, 1E4);
    }, 'image/png');

  });
};

</script>
</body>
</html>

<html>
<body>
<ol>
<pre>
<section class="area" id="area-3">

<h1>撮影します。</h1>
撮影したものは、右側の画面です。
<video id="camera" width="300" height="200"></video>
<canvas id="picture" width="300" height="200"></canvas>
<form>
  <button type="button" id="shutter">撮影する</button>

</form>

<audio id="se" preload="auto">
  <source src="camera-shutter1.mp3" type="audio/mp3">
</audio>

<script>
window.onload = () => {
  const video  = document.querySelector("#camera");
  const canvas = document.querySelector("#picture");
  const se     = document.querySelector('#se');

  /** カメラ設定 */
  const constraints = {
    audio: false,
    video: {
      width: 300,
      height: 200,
//    facingMode: "user"   // フロントカメラを利用する
     facingMode: { exact: "environment" }  // リアカメラを利用する場合
    }
  };

  /**
   * カメラを<video>と同期
   */
  navigator.mediaDevices.getUserMedia(constraints)
  .then( (stream) => {
    video.srcObject = stream;
    video.onloadedmetadata = (e) => {
      video.play();
    };
  })
  .catch( (err) => {
    console.log(err.name + ": " + err.message);
  });

  /**
   * 撮影
   */
   document.querySelector("#shutter").addEventListener("click", () => {
    const ctx = canvas.getContext("2d");

    // 演出的な目的で一度映像を止めてSEを再生する
    video.pause();  // 映像を停止
    se.play();      // シャッター音
    setTimeout( () => {
      video.play();    // 3秒後にカメラ再開
    }, 3000);


    // canvasに画像を貼り付ける
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);


    const c = document.getElementById('picture');
    c.toBlob((blob) => {
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        document.body.appendChild(a);
var nowDate = new Date();
var year = nowDate.getFullYear();
var month = nowDate.getMonth()+1;
var date = nowDate.getDate();

var hours = nowDate.getHours();

var minutes = nowDate.getMinutes();

var Seconds = nowDate.getSeconds();


var today = year + '年' + month + '月' + date + '日' + hours + '時' + minutes + '分' + Seconds +'秒';
        a.download = today + '.png';
        a.href = url;
        a.click();
        a.remove();
        setTimeout(() => {
            URL.revokeObjectURL(url);
        }, 1E4);
    }, 'image/png');

  });
};

</script>
</body>
</html>

<footer id="footer">
	<p class="js-scroll scroll-top scroll-view"><a href="#area-2">Scroll</a></p>
	<p class="js-pagetop scroll-top"><a href="#">Page Top</a></p>
	<small>&copy; copyright.</small>
	</footer>

すべてコピペで使用できます

まとめ

今回はフロントカメラ編を作成してみました 今度は、リアカメラ編を、投稿します お待ちください 参考になってくれると辛いです  
1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?