質問編集履歴
2
追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
この再生されているデータはどのようにしてダウンロードやサーバーへ送信するのですか？
|
|
3
3
|
blobに変換してサーバーへ送るのだと思いますが変換可能なのでしょうか
|
|
4
4
|
ファイル名をvideo.mp4などにして保存し、再生できるようにしたいです
|
|
5
|
+
|
|
6
|
+
currentSrc属性を持たないものは不可能なのでしょうか？
|
|
5
7
|
|
|
6
8
|
```ここに言語を入力
|
|
7
9
|
<canvas id="canvas" width="640" height="480"></canvas>
|
1
修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,22 +4,29 @@
|
|
|
4
4
|
ファイル名をvideo.mp4などにして保存し、再生できるようにしたいです
|
|
5
5
|
|
|
6
6
|
```ここに言語を入力
|
|
7
|
-
|
|
7
|
+
<canvas id="canvas" width="640" height="480"></canvas>
|
|
8
|
-
|
|
8
|
+
<video id="video" width="640" height="480" controls></video>
|
|
9
|
+
<script>
|
|
10
|
+
const canvas = document.getElementById('canvas');
|
|
11
|
+
const video = document.getElementById('video');
|
|
12
|
+
const img = new Image();
|
|
13
|
+
img.src = 'image.png';
|
|
14
|
+
img.onload = function() {
|
|
15
|
+
const ctx = canvas.getContext('2d');
|
|
16
|
+
ctx.drawImage(img, 0, 0);
|
|
17
|
+
const stream = canvas.captureStream(25);
|
|
18
|
+
video.srcObject = stream;
|
|
19
|
+
video.play();
|
|
9
20
|
|
|
10
|
-
<script>
|
|
11
|
-
const canvas = document.getElementById('canvas');
|
|
12
|
-
|
|
21
|
+
let link = document.createElement('a');
|
|
13
|
-
const img = new Image();
|
|
14
|
-
|
|
22
|
+
link.download = 'video.mp4';
|
|
23
|
+
let blob = new Blob([stream], {type: 'video/mp4'});
|
|
24
|
+
let reader = new FileReader();
|
|
25
|
+
reader.readAsDataURL(blob);
|
|
15
|
-
|
|
26
|
+
reader.onload = function() {
|
|
16
|
-
const ctx = canvas.getContext('2d');
|
|
17
|
-
ctx.drawImage(img, 0, 0);
|
|
18
|
-
const stream = canvas.captureStream(25);
|
|
19
|
-
|
|
27
|
+
link.href = reader.result;
|
|
20
|
-
|
|
28
|
+
link.click();
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
29
|
+
}
|
|
30
|
+
}
|
|
24
|
-
|
|
31
|
+
</script>
|
|
25
32
|
```
|