社区首页 >专栏 >使用H5的video标签播放视频，拍照保存和上传

使用H5的video标签播放视频，拍照保存和上传

张云飞Vir

发布于 2021-04-27 08:25:22

2.1K00

代码可运行

文章被收录于专栏：写代码和思考写代码和思考

运行总次数：0

代码可运行

播放视频

HTML <video> 元素用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放

<video controls width="250">

    <source src="/media/cc0-videos/flower.webm"
            type="video/webm">

    <source src="/media/cc0-videos/flower.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

对视频截图（拍照）

通过canvas 来对正在视频截图，即在 canas 上绘制 video 标签内的视频图像，然后使用 canvas.toDataURL() 方法输出 base64 文本描述的图像。
canvas.toDataURL() 方法返回一个包含图片展示的 data URI 。默认为 PNG 格式。图片的分辨率为96dpi。文本以“data:image/png”开头

        var canvas = document.createElement("canvas");
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        canvas.getContext('2d')
           .drawImage(video, 0, 0, canvas.width, canvas.height);
        var img = document.createElement("img");
        //console.log(canvas.toDataURL());
        //方法返回一个包含图片展示的 data URI 。默认为 PNG 格式。图片的分辨率为96dpi
        img.src = canvas.toDataURL();
        $output.prepend(img);

将对视频拍照的图片保存到本地

简单来说就是创建一个隐藏的link 标签，补充它的属性，在点击它。

        //下面是保存到 本地的方法
        var link = document.getElementById('link');
        link.setAttribute('download', 'img_.png');
        link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
        link.click();

将拍照后的base64 图片上传到后台

前端代码如下：

  //下面是 上传的方法
        //删除字符串前的提示信息 "data:image/png;base64,"
        var data = canvas.toDataURL();
        var img_base64 = data.substring(22);
        $.ajax({type:"POST", url: "/uploadfile", data: { data: img_base64, name: 'file' }, success:
             function (){
               $output.prepend("upload done!");
             }
         });
      };

接收图片的后端代码

/**
 * @description:
 * @author: zhangyunfei
 * @date: 2021/4/25 19:22
 */
@RestController
@RequestMapping()
public class UploadFileController {
    public static final String IMAGE_STORE_DIR = "/Users/zhangyunfei/Downloads/video/public";
    private static final String TAG = UploadFileController.class.getSimpleName();

    @PostMapping(value = "/uploadfile", name = "接收上传文件")
    public String cleanAlarm(String name, String data) {
        LogUtil.d(TAG, "name=%s, data=%s", name, data);
        saveFile(data);
        return "ok";
    }

    private void saveFile(String data) {
        try {
            Base64.Decoder decoder = Base64.getDecoder();
            byte[] bytes1 = decoder.decode(data);
            String fileName = UUID.randomUUID().toString() + ".png";
            File path = new File(IMAGE_STORE_DIR, fileName);
            FileOutputStream writer = new FileOutputStream(path);
            writer.write(bytes1);
            writer.close();
            LogUtil.d(TAG, "## 保存文件成功，路径=%s", path.getPath());
        } catch (IOException e) {
            e.printStackTrace();
            LogUtil.d(TAG, "## 保存文件失败，%s", e);
        }
    }

附录

补充：准备一个mp4的视频源 后端采用java实现，首先准备一个 mp4 的视频文件。新建一个springboot 工程，将某个文件夹映射为静态资源目录，代码如下。

@Configuration
public class ResourceConfig {
    private static final String TAG = "## ResourceConfig";

    // 图片URL 路径映射的 根
    public static final String IMAGE_PATH_PATTERNS = "/img";
    public static final String IMAGE_STORE_DIR = "/Users/zhangyunfei/Downloads/video/public";

    public ResourceConfig() {
        LogUtil.d(TAG, "instance !");
    }

    @Bean
    public WebMvcConfigurer resourceConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addResourceHandlers(ResourceHandlerRegistry registry) {
                // 将整个 img 文件配置成静态资源
                String pathPatterns = IMAGE_PATH_PATTERNS + "/**";
                String locations = "file:" + IMAGE_STORE_DIR + "//";
                registry.addResourceHandler(pathPatterns)
                        .addResourceLocations(locations);

                LogUtil.d(TAG, "## 静态资源路径映射：%s --> %s", pathPatterns, locations);
            }
        };
    }
}

补充：最后贴出完整的前端代码

<html>
<head>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

  <script type="text/javascript">

    $(document).ready(function(){
      let $output, video;
      let scale = 1;// 控制 图片的缩放比率

      var initialize = function() {
        $output = $("#output");
        video = $("#video").get(0);
        $("#capture").click(captureImage);
      };

      var captureImage = function(){
        console.log("video.videoWidth=%s, video.videoHeight=%s",video.videoWidth,video.videoHeight)

        var canvas = document.createElement("canvas");
        canvas.width = video.videoWidth * scale;
        canvas.height = video.videoHeight * scale;
        canvas.getContext('2d')
           .drawImage(video, 0, 0, canvas.width, canvas.height);
        var img = document.createElement("img");
        //console.log(canvas.toDataURL());
        //方法返回一个包含图片展示的 data URI 。默认为 PNG 格式。图片的分辨率为96dpi
        img.src = canvas.toDataURL();
        $output.prepend(img);

        //下面是保存到 本地的方法
        //var link = document.getElementById('link');
        //link.setAttribute('download', 'img_.png');
        //link.setAttribute('href', canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"));
        //link.click();

        //下面是 上传的方法
        //删除字符串前的提示信息 "data:image/png;base64,"
        var data = canvas.toDataURL();
        var img_base64 = data.substring(22);
        $.ajax({type:"POST", url: "/uploadfile", data: { data: img_base64, name: 'file' }, success:
             function (){
               $output.prepend("upload done!");
             }
         });
      };

      initialize();

    });
  </script>
</head>

<body>
    <video id="video" controls autoplay>
      <source src="http://localhost:8080/img/hmbb.mp4"/>
       您的浏览器不支持 video 标签。
    </video>
    <p/>
    <button id="capture">Capture</button>
    <div id="output"></div
    <!-- 故意不显示这个按钮 -->
    <a id="link" style="display:none">保存图片</a>
</body>

</html>