質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

795閲覧

[JS]カメラで撮影した画像をプレビュー表示させたいです。

yurika_21

総合スコア12

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/03/24 00:51

前提

写真撮影機能を実装しております。
Shutterボタンを押すと撮影したデータをプレビュー表示させたいのですが、その方法がわかりません。
どのように実現することが可能でしょうか?

以下がCodePenの環境になります。
リンク内容

実現したいこと

Shutterボタンを押すと撮影したデータをプレビュー表示させたい

発生している問題・エラーメッセージ

データの取得・表示方法がわからない。

該当のソースコード

HTML

1<html> 2<head> 3<meta charset="utf8"/> 4<title>HTML Camera Inside</title> 5<script src="//code.jquery.com/jquery-2.0.3.min.js"></script> 6<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" rel="stylesheet"/> 7<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.3.0/js/bootstrap.min.js"></script> 8<meta name="viewport" content="width=device-width,initial-scale=1"/> 9<style> 10body{ 11 background-color: #fcc; 12} 13</style> 14</head> 15<body> 16 <!-- video(visible) --> 17 <div class="container" id="videoPreview" style="text-align: center;"> 18 <button>shutter</button> 19 <h4>Video Preview</h4> 20 </div> 21 <div class"container" style="text-align: center;"> 22 <h4>Shutter Preview Area</h4> 23 <div class="preview"> 24 </div> 25 </div> 26 27 <!-- canvas(invisible) --> 28 <div class="container" id="canvasPreview" style="text-align: center; display: none;"> 29 <h4>Canvas Preview</h4> 30 </div> 31</body> 32</html>

JS

1var cameraSize = { w: 360, h: 240 }; 2var canvasSize = { w: 360, h: 240 }; 3var resolution = { w: 1080, h: 720 }; 4var video = null; 5var media = null; 6var canvas = null; 7var ctx = null; 8$(function(){ 9 //. video 10 video = document.createElement( 'video' ); 11 video.id = 'video'; 12 video.width = cameraSize.w; 13 video.height = cameraSize.h; 14 video.setAttribute( 'autoplay', true ); //. #1 15 video.setAttribute( 'muted', '' ); //. #1 16 video.setAttribute( 'playsinline', '' ); //. #1 17 document.getElementById( 'videoPreview' ).appendChild( video ); 18 19 //. media 20 var data = { 21 audio: false, //. no voice/mic 22 video: { 23 facingMode: 'user', //. front 24 width: { ideal: resolution.w }, 25 height: { ideal: resolution.h } 26 } 27 }; 28 if( isMobile() ){ 29 data.video.facingMode = 'environment'; //. back 30 } 31 media = navigator.mediaDevices.getUserMedia( data ).then( function( stream ){ 32 video.srcObject = stream; 33 }).then( function( err ){ 34 }); 35 36 //. canvas 37 canvas = document.createElement( 'canvas' ); 38 canvas.id = 'canvas'; 39 canvas.width = canvasSize.w; 40 canvas.height = canvasSize.h; 41 document.getElementById( 'canvasPreview' ).appendChild( canvas ); 42 43 //. context 44 ctx = canvas.getContext( '2d' ); 45 46 //. render video stream into canvas 47 _canvasUpdate(); 48}); 49 50//. render video stream into canvas 51function _canvasUpdate(){ 52 //. video to canvas(animation) 53 ctx.drawImage( video, 0, 0, canvas.width, canvas.height ); 54 55 //. check QR code 56 var img = ctx.getImageData( 0, 0, canvas.width, canvas.height ); 57 58 requestAnimationFrame( _canvasUpdate ); 59}; 60 61function isMobile(){ 62 var b = false; 63 var ua = navigator.userAgent; 64 if( ( ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 ) && ua.indexOf( 'Mobile' ) > 0 ){ 65 b = true; 66 } 67 68 return b; 69}

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2022/03/24 04:48 編集

それなりに作りこまれたコードに見受けられますが、起きている問題に対して自身で調べたこと試したことはないですか?(質問本文に追記してください)
guest

回答1

0

ボタンが押されたら、<canvas>をもう一つ作って、既存の <canvas> から画像をコピーすればいいんじゃないでしょうか。

投稿2022/03/24 01:12

int32_t

総合スコア20670

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問