Javascript Android webview视频标签截图白色屏幕_Javascript_Android_Video_Webview

Javascript Android webview视频标签截图白色屏幕

javascript android video webview

Javascript Android webview视频标签截图白色屏幕,javascript,android,video,webview,Javascript,Android,Video,Webview,我想从webview中的标记中的流截图我已经在framelayout中创建了带有webview控件的简单项目。在清单中，我添加了一行： android:hardwareAccelerated=“true” webview的配置 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (Build.VERSION.SDK_INT &

我想从webview中的

标记中的流截图

我已经在framelayout中创建了带有webview控件的简单项目。在清单中，我添加了一行： android:hardwareAccelerated=“true”

webview的配置

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
        WebView.enableSlowWholeDocumentDraw();
    }
    setContentView(R.layout.activity_main);

    mWebView = (WebView) findViewById(R.id.webView1);

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
        WebView.setWebContentsDebuggingEnabled(true);
    }

    mWebView.getSettings().setJavaScriptEnabled(true);
    mWebView.getSettings().setDomStorageEnabled(true);
    mWebView.getSettings().setAppCacheEnabled(true);
    mWebView.getSettings().setAppCacheMaxSize(1024 * 1024 * 5);
    mWebView.getSettings().setAppCachePath(getCacheDir().getAbsolutePath());
    mWebView.getSettings().setAllowFileAccess(true);
    mWebView.getSettings().setDatabaseEnabled(true);
    String sDataPath = getApplicationContext().getDir("databases", Context.MODE_PRIVATE).getPath();
    mWebView.getSettings().setDatabasePath(sDataPath);
    mWebView.getSettings().setDatabaseEnabled(true);
    mWebView.setScrollBarStyle(mWebView.SCROLLBARS_OUTSIDE_OVERLAY);
    mWebView.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
    mWebView.setWebChromeClient(new WebChromeClient() {
        @Override
        public void onExceededDatabaseQuota(String url,
                                            String databaseIdentifier, long quota,
                                            long estimatedDatabaseSize, long totalQuota,
                                            WebStorage.QuotaUpdater quotaUpdater) {

            quotaUpdater.updateQuota(5 * 1024 * 1024);
        }
    });
    WebViewClient client = new WebViewClient() {
        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
                 ...
        }
    };
    mWebView.setWebViewClient(client);
}

@Override
protected void onResume() {
    mWebView.loadUrl("file:///android_asset/video.html");
    super.onResume();
}

Android测试解决方案：

一,

二,

三,

四,

五,

我使用此方法将上述所有解决方案保存到文件中：

public static Bitmap saveBitmap(Bitmap bitmap, String filename) {
FileOutputStream fos1 = null;
                try {

                    fos1 = new FileOutputStream(Environment.getExternalStorageDirectory() + "/" + filename);
                    if (fos1 != null) {
                        bitmap.compress(Bitmap.CompressFormat.JPEG, 100, fos1);

                        fos1.close();
                    }
                } catch (Exception e) {

                }
}

带有Javascript解决方案的HTML文件：

<!DOCTYPE html>
    <html>
    <body>
    <div id="input" width="250" height="250">
        <video width="250" height="250" id="video" controls>
            <source src=http://clips.vorwaerts-gmbh.de/VfE_html5.mp4 type="video/mp4">
        </video>
    </div>
    <canvas id="canvas" width="250" height="250">
        Your browser does not support the canvas element.
    </canvas>
    <div id="output" width="250" height="250">
        <button id="snap" onclick="snap()">Snap Photo</button>
    </div>

    <script type='text/javascript'>
            var video = document.querySelector('video');
            var canvas = document.querySelector('canvas');
            var context = canvas.getContext('2d');
            var w, h, ratio;

            video.addEventListener('loadedmetadata', function() {
                ratio = video.videoWidth / video.videoHeight;

                w = video.videoWidth - 100;
                h = parseInt(w / ratio, 10);

                canvas.width = w;
                canvas.height = h;
            }, false);

            function snap() {
                        context.fillRect(0, 0, 200, 200);
                        context.drawImage(video, 0, 0, w, h);
            }
    </script>
    </body>
    </html>


您的浏览器不支持画布元素。
快照
var video=document.querySelector（'video'）；
var canvas=document.querySelector（'canvas'）；
var context=canvas.getContext（'2d'）；
var w，h，比率；
video.addEventListener（'loadedmetadata'，function（）{
比率=video.videoWidth/video.videoHeight；
w=video.videoWidth-100；
h=parseInt（w/比，10）；
画布宽度=w；
canvas.height=h；
}，假）；
函数snap（）{
fillRect（0,0200200）；
drawImage（视频，0，0，w，h）；
}

上述解决方案已经在8部手机上进行了测试（范围从安卓4.4到6.0），但在所有手机上，安卓解决方案都不起作用。这取决于解决方案，但基本上我有文件与'快照'按钮，视频播放器元素和白色屏幕的看法流。Javascript解决方案可以在一半的设备上运行，但与Android版本没有任何连接。我也改变了视频类型，但没有成功

我做错了什么？

我发现问题出在webview版本上：不幸的是，谷歌的远程webview更新只适用于nexuses和其他一些手机，手机制造商在这些手机上没有更改webview配置。链接到这些信息：同样的问题，到目前为止还没有解决方案……我发现问题出在webview版本上：不幸的是，谷歌的远程webview更新只适用于nexuses和其他一些手机，手机制造商在这些手机上没有更改webview配置。此信息的链接：相同的问题，到目前为止没有解决方案。。。

 Picture picture = mWebView.capturePicture();
                Bitmap b1 = Bitmap.createBitmap(picture.getWidth() / 2, picture.getHeight() / 2, Bitmap.Config.ARGB_8888);
                Canvas c = new Canvas(b1);
                mWebView.draw(c);

        View view = mWebView.getRootView();
        view.setDrawingCacheEnabled(true);
        Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
        view.setDrawingCacheEnabled(false);

@Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);

                Handler handler = new Handler();
                handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        Picture picture = mWebView.capturePicture();
                        Bitmap b = Bitmap.createBitmap(picture.getWidth(),
                                picture.getHeight(), Bitmap.Config.ARGB_8888);
                        Canvas c = new Canvas(b);
                        picture.draw(c);
...

public static Bitmap saveBitmap(Bitmap bitmap, String filename) {
FileOutputStream fos1 = null;
                try {

                    fos1 = new FileOutputStream(Environment.getExternalStorageDirectory() + "/" + filename);
                    if (fos1 != null) {
                        bitmap.compress(Bitmap.CompressFormat.JPEG, 100, fos1);

                        fos1.close();
                    }
                } catch (Exception e) {

                }
}

<!DOCTYPE html>
    <html>
    <body>
    <div id="input" width="250" height="250">
        <video width="250" height="250" id="video" controls>
            <source src=http://clips.vorwaerts-gmbh.de/VfE_html5.mp4 type="video/mp4">
        </video>
    </div>
    <canvas id="canvas" width="250" height="250">
        Your browser does not support the canvas element.
    </canvas>
    <div id="output" width="250" height="250">
        <button id="snap" onclick="snap()">Snap Photo</button>
    </div>

    <script type='text/javascript'>
            var video = document.querySelector('video');
            var canvas = document.querySelector('canvas');
            var context = canvas.getContext('2d');
            var w, h, ratio;

            video.addEventListener('loadedmetadata', function() {
                ratio = video.videoWidth / video.videoHeight;

                w = video.videoWidth - 100;
                h = parseInt(w / ratio, 10);

                canvas.width = w;
                canvas.height = h;
            }, false);

            function snap() {
                        context.fillRect(0, 0, 200, 200);
                        context.drawImage(video, 0, 0, w, h);
            }
    </script>
    </body>
    </html>