1
4

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.

JavaScript でデバイスのカメラ使って録画した動画を取得

Posted at

デバイスのカメラ使って撮影した動画取得までやってみる
サンプルは以下のページ(写真撮影も一緒に)

JavaScript

  • 撮影カメラ表示用の video タグを取得(変数 video に設定)
  • 録画動画表示用の video タグを取得(変数 movie に設定)
  • デバイスのカメラを navigator.mediaDevices.getUserMedia({ video: true, audio: true }) 取得
    • ブラウザ側でカメラ使用の許可求められるので許可する必要あり
    • 取得後に streamvideo.srcObject に設定して video.play() でカメラの画像を video に表示
    • 取得後に stream を引数にして MediaRecorder のインスタンス生成
    • MediaRecorder のインスタンスにdataavailable のイベント追加して以下を処理
      • movie.src URL.createObjectURL(event.data) を設定
  • MediaRecorder のインスタンスの start 関数使って録画開始
  • MediaRecorder のインスタンスの stop 関数使って録画終了
const video = document.querySelector('#video');
const movie = document.querySelector('#movie');
let mediaRecorder;

initVideoCamera();
document.querySelector('#recode-start').addEventListener('click', recodeStart);
document.querySelector('#recode-stop').addEventListener('click', recodeStop);

/**
 * ビデオのカメラ設定(デバイスのカメラ映像をビデオに描画)
 */
function initVideoCamera() {
    navigator.mediaDevices.getUserMedia({ video: true, audio: true })
        .then((stream) => {
            video.srcObject = stream;
            video.play();
            mediaRecorder = new MediaRecorder(stream);
            mediaRecorder.addEventListener(
                'dataavailable'
                , e => movie.src = URL.createObjectURL(e.data));
        })
        .catch(e => console.log(e));
}

/**
 * 動画撮影の開始
 */
function recodeStart() {
    mediaRecorder.start();
    document.querySelector('#recode-start').classList.add('hidd');
    document.querySelector('#recode-stop').classList.remove('hidd');
}

/**
 * 動画撮影の停止
 */
function recodeStop() {
    mediaRecorder.stop();
    document.querySelector('#recode-start').classList.remove('hidd');
    document.querySelector('#recode-stop').classList.add('hidd');
}

HTML

video タグを2つ、撮影カメラ表示用(id : video )と録画動画表示用( id : movie )を用意する
あとは録画開始、停止のタグを用意する

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <h3>カメラ画像取得</h3>
    <div class="flex-row">
        <div class="camera">
            <video id="video"></video>
            <div id="recode-start">録画開始</div>
            <div id="recode-stop" class="hidd">録画停止</div>
        </div>
        <div class="movie">
            <video id="movie" controls playsinline></video>
            <p class="ret-element">動画</p>
        </div>
    </div>
</body>

<script src="script.js"></script>

</html>

1
4
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
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?