cm-chessboard 5.5.15 → 5.5.17

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/examples/extensions/chessboard-render-video-extension.html +1 -1
  2. package/package.json +1 -1
  3. package/src/cm-chessboard/extensions/render-video/RenderVideo.js +11 -16
package/examples/extensions/chessboard-render-video-extension.html CHANGED
@@ -10,7 +10,7 @@
10
10
  <body>
11
11
  <h1><a href="../..">cm-chessboard</a></h1>
12
12
  <h2>Example: RenderVideo extension</h2>
13
- <p>Works in Chrome (webm) and Safari (mp4).</p>
13
+ <p>Works best in Chrome with webm format.</p>
14
14
  <div class="board board-small" id="board"></div>
15
15
  <video id="videoOut" controls="controls"></video>
16
16
  <script type="module">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cm-chessboard",
3
- "version": "5.5.15",
3
+ "version": "5.5.17",
4
4
  "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
5
5
  "keywords": [
6
6
  "chess",
package/src/cm-chessboard/extensions/render-video/RenderVideo.js CHANGED
@@ -26,11 +26,9 @@ export class RenderVideo extends Extension {
26
26
  }
27
27
  }
28
28
  console.log("recorder mediaType", this.props.mediaType)
29
- this.image = new Image()
30
- document.body.append(this.image)
31
29
  this.makeSpriteInline()
32
30
  this.registerExtensionPoint(EXTENSION_POINT.animation, async (event) => {
33
- if(event.event = "frame") {
31
+ if(event.event === "frame") {
34
32
  if (this.recorder && this.recorder.state === "recording") {
35
33
  await this.cloneImageAndRender()
36
34
  }
@@ -58,8 +56,9 @@ export class RenderVideo extends Extension {
58
56
  this.image.style.visibility = "hidden"
59
57
  document.body.append(this.image)
60
58
 
61
- this.stream = this.canvas.captureStream(60)
62
- this.recorder = new MediaRecorder(this.stream, {mimeType: this.props.mediaType})
59
+ this.stream = this.canvas.captureStream(50)
60
+ this.recorder = new MediaRecorder(this.stream, {
61
+ mimeType: this.props.mediaType})
63
62
  this.recorder.ondataavailable = (event) => {
64
63
  if (event.data && event.data.size) {
65
64
  this.recordedData.push(event.data)
@@ -77,7 +76,7 @@ export class RenderVideo extends Extension {
77
76
  return
78
77
  }
79
78
  this.recordedData = []
80
- this.recorder.start()
79
+ this.recorder.start(100)
81
80
  console.log("recorder", this.recorder.state)
82
81
  resolve()
83
82
  })
@@ -114,21 +113,17 @@ export class RenderVideo extends Extension {
114
113
  }
115
114
 
116
115
  async cloneImageAndRender() {
117
- return new Promise((resolve, reject) => {
118
- if(this.rendering) {
119
- resolve()
120
- }
121
- this.rendering = true
116
+ return new Promise((resolve) => {
122
117
  let serialized = new XMLSerializer().serializeToString(this.chessboard.view.svg)
123
118
  const blob = new Blob([serialized], {type: "image/svg+xml"})
124
119
  const blobURL = URL.createObjectURL(blob)
125
- this.image.onload = () => {
126
- this.context.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height, 0, 0, this.canvas.width, this.canvas.height)
127
- this.recorder.requestData()
128
- this.rendering = false
120
+ // strange Safari "bug" that the content has only 300x150px
121
+ const image = this.props.mediaType === "video/mp4" ? this.image : new Image()
122
+ image.onload = () => {
123
+ this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height, 0, 0, this.canvas.width, this.canvas.height)
129
124
  resolve()
130
125
  }
131
- this.image.src = blobURL
126
+ image.src = blobURL
132
127
  })
133
128
  }
134
129