baoshi-was/resources/views/rejected/videoTest.blade.php

@extends('layouts.app')
@section('title')查询-退货管理@endsection

@section('content')
    <div class="container-fluid">
        <div class="d-none" id="list">
            <div class="row">
                <div class="left col-4 p-0">
                    <h2>录制</h2>
                    <div class="videoPreview">
                        <video id="preview" width="50%" height="auto" autoplay muted controls></video>
                    </div>
                    <button class="btn-info btn" @click="startRecord(true)">录制</button>
                    <button class="btn-danger btn" @click="stopRecord()">停止</button>
                </div>
                <div class="right col-4 p-0">
                    <h2>播放</h2>
                    <div class="videoRecording">
                        <video id="recording" width="50%" height="auto" controls></video>
                    </div>
                    <button class="btn-success btn" @click="playRecord()">播放</button>
                    <button class="btn btn-outline-secondary" @click="downloadRecord()">下载</button>
                </div>
                <div class="right col-4 p-0">
                    <h2>拍照</h2>
                    <div id="drag" class="col-4 p-0" style="position:fixed;bottom: 30px;left: 10px;">
                        <video id="photo" width="50%" height="auto" controls></video>
                    </div>
                    <div>
                        <canvas id='canvas'width='400' height='300'></canvas>
                        <img id='img' src=''>
                    </div>
                    <button class="btn-success btn" @click="enableCamera(true)">开启摄像头</button>
                    <button class="btn-success btn" @click="takePhoto()">拍照</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('lastScript')
    <script>
        $(function() {
            let posX;
            let posY;

            let drag = document.getElementById("drag");
            drag.onmousedown = function(e) {
                posX = event.x - drag.offsetLeft; //获得横坐标x
                posY = event.y - drag.offsetTop; //获得纵坐标y
                document.onmousemove = mousemove; //调用函数，只要一直按着按钮就能一直调用
            }
            document.onmouseup = function() {
                document.onmousemove = null; //鼠标举起，停止
            }

            function mousemove(ev) {
                if (ev == null) ev = window.event; //IE
                console.log(window.event)
                drag.style.left = (ev.clientX - posX) + "px";
                drag.style.top = (ev.clientY - posY) + "px";
            }

        })



        let MediaUtils = {
            /**
             * 获取用户媒体设备(处理兼容的问题)
             * @param videoEnable {boolean} - 是否启用摄像头
             * @param audioEnable {boolean} - 是否启用麦克风
             * @param callback {Function} - 处理回调
             */
            getUserMedia: function (videoEnable, audioEnable, callback) {
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
                    || navigator.msGetUserMedia || window.getUserMedia;
                let constraints = {video: videoEnable, audio: audioEnable};
                if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                    navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
                        callback(false, stream);
                    })['catch'](function (err) {
                        callback(err);
                    });
                } else if (navigator.getUserMedia) {
                    navigator.getUserMedia(constraints, function (stream) {
                        callback(false, stream);
                    }, function (err) {
                        callback(err);
                    });
                } else {
                    callback(new Error('Not support userMedia'));
                }
            },
            /**
             * 关闭媒体流
             * @param stream {MediaStream} - 需要关闭的流
             */
            closeStream: function (stream) {
                if (typeof stream.stop === 'function') {
                    stream.stop();
                } else {
                    let trackList = [stream.getAudioTracks(), stream.getVideoTracks()];

                    for (let i = 0; i < trackList.length; i++) {
                        let tracks = trackList[i];
                        if (tracks && tracks.length > 0) {
                            for (let j = 0; j < tracks.length; j++) {
                                let track = tracks[j];
                                if (typeof track.stop === 'function') {
                                    track.stop();
                                }
                            }
                        }
                    }
                }
            }
        };

        // 用于存放 MediaRecorder 对象和音频Track，关闭录制和关闭媒体设备需要用到
        let recorder, mediaStream;

        // 用于存放录制后的音频文件对象和录制结束回调
        let recorderFile, stopRecordCallback;

        // 用于存放是否开启了视频录制
        let videoEnabled = false;

        let vueList = new Vue({
            el: "#list",
            data: {

            },
            mounted: function () {
                $(".tooltipTarget").tooltip({'trigger': 'hover'});
                $('#list').removeClass('d-none');
            },
            methods: {
                // 录制视频
                startRecord(enableVideo) {
                    videoEnabled = enableVideo;
                    MediaUtils.getUserMedia(enableVideo, true, function (err, stream) {
                        if (err) {
                            throw err;
                        } else {
                            let preview=document.getElementById('preview');
                            // 通过 MediaRecorder 记录获取到的媒体流
                            recorder = new MediaRecorder(stream);
                            mediaStream = stream;
                            preview.srcObject = stream;
                            preview.captureStream =
                                preview.captureStream || preview.mozCaptureStream;
                            let chunks = [], startTime = 0;
                            recorder.ondataavailable = function (e) {
                                chunks.push(e.data);
                            };
                            recorder.onstop = function (e) {
                                recorderFile = new Blob(chunks, {'type': recorder.mimeType});
                                chunks = [];
                                if (null != stopRecordCallback) {
                                    stopRecordCallback();
                                }
                            };
                            recorder.start();
                        }
                    });
                },
                // 停止录制
                stopRecord(callback) {
                    stopRecordCallback = callback;
                    // 终止录制器
                    recorder.stop();
                    // 关闭媒体流
                    MediaUtils.closeStream(mediaStream);
                },
                // 播放录制的视频
                playRecord() {
                    let url = URL.createObjectURL(recorderFile);
                    // let dom = document.createElement(videoEnabled ? 'video' : 'audio');
                    let dom = document.getElementById('recording');
                    dom.autoplay = true;
                    dom.src = url;
                },
                // 下载录制视频
                downloadRecord(){
                    let url = URL.createObjectURL(recorderFile);
                    // 创建隐藏的可下载链接
                    let eleLink = document.createElement('a');
                    eleLink.download = new Date().getFullYear()+'download.mp4';
                    // 字符内容转变成blob地址
                    eleLink.href = url
                    // 触发点击
                    document.body.appendChild(eleLink);
                    eleLink.click();
                    // 然后移除
                    document.body.removeChild(eleLink);
                },
                // 开启摄像头
                enableCamera(enableVideo) {
                    videoEnabled = enableVideo;
                    MediaUtils.getUserMedia(enableVideo, false, function (err, stream) {
                        if (err) {
                            throw err;
                        } else {
                            let photo=document.getElementById('photo');
                            photo.srcObject = stream;
                            photo.play();
                        }
                    });
                },
                // 关闭摄像头
                closeCamera() {
                    let stream = document.getElementById('photo').srcObject;
                    let tracks = stream.getTracks();
                    tracks.forEach(function(track) {
                        track.stop();
                    });
                    document.getElementById('photo').srcObject = null;
                },
                //拍照
                takePhoto(){
                    let photo=document.getElementById('photo');
                    let canvas=document.getElementById('canvas');
                    //绘制canvas图形
                    canvas.getContext('2d').drawImage(photo, 0, 0, 400, 300);

                    let img = document.getElementById('canvas').toDataURL();
                    // 这里的img就是得到的图片
                    console.log('img-----', img);
                    // document.getElementById('img').src=img;
                    this.closeCamera();
                }
            }
        })

    </script>
@endsection