デモページ WEBカメラの画像をローカルに保存する事が目的です(IE は WebRTC が使えないので、通常動画で代替)。Webカメラが無い場合は、動画で代替えます。 IE 以外は toDataURL を アンカーの href にセットしてダウンロードする事ができますが、例によって IE は特別な方法を取ります。 IE11 は長い URL がダメ 根本的に IE は無理です。このあたりの制限はずっと昔からありました。Edge は正しくデータとして取れるのですが、アンカーの href としては使えず、img の src としてならば使えます。いずれにしても、ダウンロードは別の方法である Blob を使うのですが、jpeg としてダウンロードするには、さらにひと工夫が必要そうです。できそうな資料はありましたが、動作は未確認です。動作確認しました。IE11 で JPEG 保存可能です。
// IE の場合
if ( typeof(MSBlobBuilder) != "undefined" ) {
var jpeg = canvas.toDataURL("image/jpeg") // JPEG
var bin = atob(jpeg.split(',')[1]);
var buffer = new Uint8Array(bin.length);
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
var blob = new Blob([buffer.buffer], {type: "image/jpeg"});
navigator.msSaveBlob(blob, "canvas.jpg" );
}
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="shortcut icon" href="https://lightbox.sakura.ne.jp/homepage/WinOfSql.ico">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.js"></script>
<style>
input {
font-size: 20px;
}
#camera {
width: 400px;
height: 300px;
}
#canvas,#camera {
border: 1px solid #000;
}
</style>
<input id="copy" type="button" value="copy">
<input id="save" type="button" value="save">
<br>
<br>
<video id="camera" autoplay></video>
<canvas id="canvas" width="400" height="300"></canvas>
<script>
jQuery.isMobile = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));
toastr.options.positionClass = "toast-top-center";
if ( $.isMobile ) {
$("#camera").css("width","100%");
$("#canvas").css("width","100%");
}
// カメラ用 video 要素(DOM オブジェクト)
var camera;
// 静止画用 canvas 要素(DOM オブジェクト)
var cancas;
check();
// *************************************
// Canvas へコピー
// *************************************
$("#copy").on( "click", function(){
camera = $("#camera").get(0);
canvas = $("#canvas").get(0);
var ctx = canvas.getContext('2d');
// カメラから キャンバスに静止画を描く
ctx.drawImage(camera, 0, 0, 400, 300);
});
// *************************************
// Canvas の画像を保存
// *************************************
$("#save").on( "click", function(){
// IE の場合
if ( typeof(MSBlobBuilder) != "undefined" ) {
// var blobBuilderObject = new MSBlobBuilder();
// blobBuilderObject.append( canvas.msToBlob() );
// navigator.msSaveBlob(blobBuilderObject.getBlob(), "canvas.png" ); // PNG
var jpeg = canvas.toDataURL("image/jpeg") // JPEG
var bin = atob(jpeg.split(',')[1]);
var buffer = new Uint8Array(bin.length);
for (var i = 0; i < bin.length; i++) {
buffer[i] = bin.charCodeAt(i);
}
var blob = new Blob([buffer.buffer], {type: "image/jpeg"});
navigator.msSaveBlob(blob, "canvas.jpg" );
}
else {
var jpeg = canvas.toDataURL("image/jpeg") // JPEG
var download = $("<a></a>").appendTo("body").css("display","none");
download.prop({"href" : jpeg, "download": "canvas.jpg" });
download.get(0).click();
download.remove();
}
});
// *************************************
// navigator.getUserMedia チェック
// *************************************
function check() {
if ( !navigator.mediaDevices ) {
var api = [
"webkitGetUserMedia", "mozGetUserMedia","msGetUserMedia"
]
$.each(api,function(idx){
if (navigator.getUserMedia = navigator.getUserMedia || navigator[api[idx]]) {
return false;
}
});
if ( !navigator.getUserMedia ) {
error("WebRTC を使用できません");
return;
}
}
// WEBカメラの初期化
init();
}
// *************************************
// カメラストリーム
// *************************************
function init() {
camera = $("#camera").get(0);
if ( navigator.mediaDevices ) {
console.log("navigator.mediaDevices.getUserMedia");
navigator.mediaDevices.getUserMedia({video: true})
.then(function(stream){
camera.src = window.URL.createObjectURL(stream);
})
.catch(function(err){
error(err.name);
}); }
else {
console.log("navigator.getUserMedia");
navigator.getUserMedia(
{video: true},
function(stream) {
camera.src = window.URL.createObjectURL(stream);
},
function(err){
error(err.name);
}
);
}
}
// *************************************
// エラー処理
// ※ 動画で代替
// *************************************
function error( message ) {
toastr.error( message + "<br>代替として動画を表示します" );
$("#camera")
.prop({
"loop" : true, "muted" : true, "controls" : true,
"src" : "https://lightbox.sakura.ne.jp/demo/mp4/waterfall-free-video9.mp4"
})
.css("border", "solid 1px #000");
}
</script>
</body>
</html>
関連する記事 WEB ブラウザで WEBカメラをテストするテンプレート / Android Chrome でテストすると【今は】カメラの front と back を切り替えできます 参考にすべき資料 Microsoft: キャンバスの画像をローカルに保存する Microsoft : BlobBuilder を使ってファイルを作成する Canvas に描いた画像を png などの形式の Blob に変換する方法
|
|
【WEBブラウザの最新記事】
- CSS の @media screen と IFRAME を使用して PC コンテンツとスマホページを完全に別作成して切り替える
- WEB ブラウザで WEBカメラをテストするテンプレート / Android Chrome でテストすると【今は】カメラの front と back を切り替えできます
- iPhone を EpocCam というアプリで Wi-Fi の WEBカメラにする場合のいろいろ知っておく事。
- ブラウザ別『Java 無効』
- IE、Firefox、Chrome、Opera、Safari で JavaScript を無効にする
- ブラウザの入力履歴の削除( 特にパスワード )
- IE、Firefox、Chrome、Opera、Safari のキャッシュ削除のショートカット
- ブラウザを使用した簡易パーセントエンコーディング変換
- 各ブラウザで、onbeforeunload を使おうとすると
- ２０１４年７月７日現在。WEBフォントの実際
- IE の占める割合の変遷と IE8 でないと動かないシステムの現実
- Flash Playerに危険な脆弱性( またかというかこっちもか )。13.0.0.206 である事を確認しましょう。
- デベロッパーツールを使用してクッキーの一覧を表示する
- Seesaa ブログの『保存ボタンが表示されない』
- Firefox のみのレイアウトトラブル / float:left と line-height
- ブラウザ毎の「開発者ツール」の起動と知っておくべき要点
- ブラウザ別『ソース』の表示
- 各ブラウザの現在の「document.charset」と「document.characterSet」
- Favicon の動的変更・または追加( IE8、Firefox、Chrome、Opera、Safari )
- Opera の window.open のバグ
