■90870 / inTopicNo.1) |
異なるシステム間での画像の受け渡し |
□投稿者/ passop (1回)-(2019/05/09(Thu) 14:51:51)
|
分類:[JavaScript]
システムAとシステムBの2つのシステムがあって、
それぞれ別のサーバーで動作するものとします。
システムAで動画から静止画像を作成して、
システムBでその静止画像を取り込んで、他の人が参照できるようにしたいと
考えています。
システムAで静止画像を作成したときに
共通フォルダーに画像をアップロードして
システムBでその画像を読み込めば1番手っ取り早いと思いますが、
システムAとシステムBは同一ネットワークにないため、
共通フォルダーは作成できません。
システムAで動画から静止画像を作成後にダウンロードして、
システムBの方でその画像を取り込めば、できそうですが、
ダウンロードファルダから画像を探すのは間違いの原因となりそうなので
もっと違う方法がないか考えています。
システムAからシステムBを呼び出すような感じで良いと考えていますが、
システムBで良い知恵があれば教えてください。
以下、システムAのサンプルソースです。
(クライアント側ソース)
<video id="video" src="<%=ResolveUrl("~/Videos/Butterfly.mp4") %>" width="400" height="300">
</video>
<canvas id="snapshot_canvas" style="width:320px; height:240px ; border: 1px solid black;"></canvas>
<div style="width:400px; background-color:#333333; color:#ffffff;">
<input type="button" value="再生" onclick="playVideo()"/>
<input type="button" value="一時停止" onclick="pauseVideo()"/>
<input type="button" value="静止画" onclick="TakeSnap()"/>
<input type="button" value="紹介システムに静止画UP" onclick="Other()"/>
現在(秒):<span id="ichi">0</span><br>
全体(秒):<span id="nagasa"></span><br>
<span id="kanryou"></span>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var localVideo = document.getElementById("video");
var localStream = null;
var snapshotCanvas = document.getElementById('snapshot_canvas');
var ctx = snapshotCanvas.getContext('2d');
$(function () {
var canvas = document.getElementById('snapshot_canvas');
});
function getDuration() {
//動画の長さ(秒)を表示
document.getElementById("nagasa").innerHTML = localVideo.duration;
}
function playVideo() {
//再生完了の表示をクリア
document.getElementById("kanryou").innerHTML = "";
//動画を再生
localVideo.play();
//現在の再生位置(秒)を表示
localVideo.addEventListener("timeupdate", function () {
document.getElementById("ichi").innerHTML = localVideo.currentTime;
}, false);
getDuration();
//再生完了を知らせる
localVideo.addEventListener("ended", function () {
document.getElementById("kanryou").innerHTML = "動画の再生が完了しました。";
}, false);
}
function pauseVideo() {
//動画を一時停止
localVideo.pause();
}
//静止画を撮る
function TakeSnap() {
var canvas = document.getElementById('snapshot_canvas');
var dataURI = canvas.toDataURL();
ctx.drawImage(localVideo, 0, 0, 400, 300);
}
</script>
|
|