Gibt es eine Möglichkeit, eine verschmutzte Leinwand zu speichern?

Question

Ich mache Screenshots von Videos mit HTML5 Canvas, das Video wird anderswo gehostet, alles funktioniert außer toDataURL(), weil die Leinwand schmutzig ist. Also, ich frage mich, gibt es eine Möglichkeit, wie ich diese Leinwand Bild auf dem Computer speichern kann?

Ich nehme an, die Antwort ist nein, aber in der Hoffnung für einige hack, um dies zu tun, gut jede Idee abgesehen von dem Herunterladen des Videos auf meinem Server und dienen es von dort ...

Answer 1

Die kurze Antwort lautet "Nein".

Die längere Antwort könnte ja lauten.

Vielleicht kann Ihr Server das Video herunterladen und hosten und es dann von derselben Domain aus abspielen?

Wenn Sie den Server kontrollieren, auf dem das Video gehostet wird, können Sie Korsett aktivieren .

(Oder Sie können beides kombinieren und das Video auf eine nicht von Ihnen betriebene Website hochladen lassen).

Ansonsten haben Sie Pech.

Answer 2

Wie wäre es, ich habe es noch nicht ausprobiert, wenn Sie die ursprüngliche Leinwand auf einer anderen Leinwand neu zeichnen, die Sie dann als Bild speichern. (und css verwenden oder die Leinwände übereinander positionieren, um die zweite Leinwand "auszublenden").

Wird die zweite Leinwand schmutzig sein?

( über eine Technik wie diese nachzudenken )

Answer 3

Ich habe versucht, die Leinwand zu kopieren, aber das führte zu demselben Fehler wie die verschmutzte Leinwand.

Um dies zu bewerkstelligen, habe ich einen kleinen Dienst implementiert, der entfernte Quellen (Videos) extrahiert und sie so aussehen lässt, als wären sie lokal, d.h. indem er die Quelle serverseitig liest und auf meine HTML/JS-Seite überträgt. Sobald dies geschehen war, funktionierte alles einwandfrei.

Ich habe Python / Flask verwendet, um dies zu tun, hier ist das Snippet. Nicht perfekt in Bezug auf die Handhabung partieller Inhalt Anfragen, aber sollte jemand gehen.

Um es zu benutzen, greife ich auf meine Videos über: /remote?url=

from datetime import timedelta
from flask import make_response, request, current_app, Flask, url_for, render_template, Response
from functools import update_wrapper
import requests
import logging
import json
from werkzeug.datastructures import Headers
import httplib
import os
import subprocess
import base64
httplib.HTTPConnection.debuglevel = 1

app = Flask(__name__)

logging.basicConfig() 
logging.getLogger().setLevel(logging.DEBUG)
requests_log = logging.getLogger("requests.packages.urllib3")
requests_log.setLevel(logging.DEBUG)
requests_log.propagate = True

def crossdomain(origin=None, methods=None, headers=None,
                max_age=21600, attach_to_all=True,
                automatic_options=True):
    if methods is not None:
        methods = ', '.join(sorted(x.upper() for x in methods))
    if headers is not None and not isinstance(headers, basestring):
        headers = ', '.join(x.upper() for x in headers)
    if not isinstance(origin, basestring):
        origin = ', '.join(origin)
    if isinstance(max_age, timedelta):
        max_age = max_age.total_seconds()

    def get_methods():
        if methods is not None:
            return methods

        options_resp = current_app.make_default_options_response()
        return options_resp.headers['allow']

    def decorator(f):
        def wrapped_function(*args, **kwargs):
            if automatic_options and request.method == 'OPTIONS':
                resp = current_app.make_default_options_response()
            else:
                resp = make_response(f(*args, **kwargs))
            if not attach_to_all and request.method != 'OPTIONS':
                return resp

            h = resp.headers

            h['Access-Control-Allow-Origin'] = origin
            h['Access-Control-Allow-Methods'] = get_methods()
            h['Access-Control-Max-Age'] = str(max_age)
            if headers is not None:
                h['Access-Control-Allow-Headers'] = headers
            return resp

        f.provide_automatic_options = False
        return update_wrapper(wrapped_function, f)
    return decorator

def stream_remote(url, headers=None):
    logging.debug(headers) 
    range = headers["Range"]
    logging.debug(range)
    r = requests.get(url, stream=True, headers={"range":range})
    logging.debug(r.headers)
    for block in r.iter_content(1024):
        if not block:
            break
        yield block

@app.route('/remote/')
def get_remote():
    # Gets a remote file to make it look like it is local for CORS purposes
    url = request.args.get("url", None)
    resp_headers = Headers()
    resp_headers.add('Accept-Ranges','bytes')

    if url is None:
        return "Error. No URL provided"
    else:
        headers = request.headers
        logging.debug(headers)
        return Response(stream_remote(url, headers),mimetype='video/mp4',headers=resp_headers)

if __name__ == '__main__':
    app.debug = True
    app.run(host="127.0.0.1", port=9001)