Flutter Web Plugin for HTML and JS

Viewed 602

I couldn't find plugin html and js for Flutter Web. My purpose is open camera and capture a picture. But it is working on Flutter Web. I wrote html and js camera codes. But it can't working on Flutter Web app. . I tried flutter_html plugin. But has just a few meaningless line in Chrome Web Emulator. Please help me or suggestion to me other plugins.

import "package:flutter/material.dart";
import 'package:flutter_html/flutter_html.dart';


class kamera extends StatefulWidget {
  @override
  _kameraState createState() => _kameraState();
}
class _kameraState extends State<kamera> {
  @override
  Widget build(BuildContext context) {
    return Html(data:
    """
      <video id="video" width="640" height="480" autoplay></video><br>
      <button id="snap">Snap Photo</button><br>
      <canvas id="canvas" width="640" height="480"></canvas><br>
      <script>
        var video = document.getElementById('video');
        // Get access to the camera!
        if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // Not adding `{ audio: true }` since we only want video now
        navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
        //video.src = window.URL.createObjectURL(stream);
        video.srcObject = stream;
        video.play();
     });
     }
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');
        // Trigger photo take
        document.getElementById("snap").addEventListener("click", function() {
              context.drawImage(video, 0, 0, 640, 480);
      });
      </script>
           """);

  }
}
0 Answers
Related