cm-chessboard 5.5.16 → 5.5.18

package/examples/extensions/chessboard-render-video-extension.html

@@ -13,6 +13,8 @@
 <p>Works best in Chrome with webm format.</p>
 <div class="board board-small" id="board"></div>
 <video id="videoOut" controls="controls"></video>
+<br/>
+<a href="" style="visibility: hidden" id="download-link">Download video</a>
 <script type="module">
     import {RenderVideo} from "../../src/cm-chessboard/extensions/render-video/RenderVideo.js"
     import {Chessboard} from "../../src/cm-chessboard/Chessboard.js"
@@ -38,6 +40,8 @@
     chessboard.recorderStop().then((url) => {
         const video = document.getElementById("videoOut")
         video.src = url
+        document.getElementById("download-link").href = url
+        document.getElementById("download-link").style.visibility = "visible"
     })
 
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cm-chessboard",
-  "version": "5.5.16",
+  "version": "5.5.18",
   "description": "A JavaScript chessboard which is lightweight, ES6 module based, responsive, SVG rendered and without dependencies.",
   "keywords": [
     "chess",

package/src/cm-chessboard/extensions/render-video/RenderVideo.js

@@ -11,24 +11,27 @@ export class RenderVideo extends Extension {
     constructor(chessboard, props) {
         super(chessboard, props)
         this.props = {
-            mediaType: "auto"
+            mediaType: "auto",
+            safariMode: true
         }
         Object.assign(this.props, props)
         if(this.props.mediaType === "auto") {
-            if(MediaRecorder.isTypeSupported("video/mp4")) {
-                this.props.mediaType = "video/mp4"
-            } else if(MediaRecorder.isTypeSupported("video/webm;codecs=H264")) {
+            if(MediaRecorder.isTypeSupported("video/mp4;codecs:h264,aac")) {
+                this.props.mediaType = "video/mp4;codecs:h264,aac"
+            } else if(MediaRecorder.isTypeSupported("video/webm;codecs=h264")) {
                 this.props.mediaType = "video/webm;codecs=H264"
             } else if(MediaRecorder.isTypeSupported("video/webm")) {
                 this.props.mediaType = "video/webm"
-            } else {
+            } else if(MediaRecorder.isTypeSupported("video/mp4")) {
+                this.props.mediaType = "video/mp4"
+            }else {
                 console.error("no suitable mediaType found")
             }
         }
         console.log("recorder mediaType", this.props.mediaType)
         this.makeSpriteInline()
         this.registerExtensionPoint(EXTENSION_POINT.animation, async (event) => {
-            if(event.event = "frame") {
+            if(event.event === "frame") {
                 if (this.recorder && this.recorder.state === "recording") {
                     await this.cloneImageAndRender()
                 }
@@ -48,16 +51,17 @@ export class RenderVideo extends Extension {
                 this.canvas.height = dimensions.height
                 this.context = this.canvas.getContext('2d')
                 document.body.append(this.canvas)
-/*
+
                 this.image = new Image()
                 this.image.width = this.canvas.width
                 this.image.height = this.canvas.height
                 this.image.style.position = "absolute"
                 this.image.style.visibility = "hidden"
                 document.body.append(this.image)
-*/
-                this.stream = this.canvas.captureStream(60)
-                this.recorder = new MediaRecorder(this.stream, {mimeType: this.props.mediaType})
+
+                this.stream = this.canvas.captureStream(50)
+                this.recorder = new MediaRecorder(this.stream, {
+                    mimeType: this.props.mediaType})
                 this.recorder.ondataavailable = (event) => {
                     if (event.data && event.data.size) {
                         this.recordedData.push(event.data)
@@ -75,7 +79,7 @@ export class RenderVideo extends Extension {
                     return
                 }
                 this.recordedData = []
-                this.recorder.start()
+                this.recorder.start(100)
                 console.log("recorder", this.recorder.state)
                 resolve()
             })
@@ -112,14 +116,14 @@ export class RenderVideo extends Extension {
     }
 
     async cloneImageAndRender() {
-        return new Promise((resolve, reject) => {
+        return new Promise((resolve) => {
             let serialized = new XMLSerializer().serializeToString(this.chessboard.view.svg)
             const blob = new Blob([serialized], {type: "image/svg+xml"})
             const blobURL = URL.createObjectURL(blob)
-            const image = new Image()
+            // strange Safari "bug" that the content has only 300x150px
+            const image = this.props.safariMode ? this.image : new Image()
             image.onload = () => {
-                this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height)
-                this.recorder.requestData()
+                this.context.drawImage(image, 0, 0, this.canvas.width, this.canvas.height, 0, 0, this.canvas.width, this.canvas.height)
                 resolve()
             }
             image.src = blobURL