退货录入添加使用摄像头拍照功能

resources/views/rejected/create.blade.php

@@ -457,7 +457,8 @@
                 </div>
             </div>
         </div>
-        <div id="drag" class="col-4 p-0 " style="position:fixed;bottom: 30px;left: 10px;">
+        <div id="drag" class="col-4 p-0" style="position:fixed;bottom: 30px;left: 10px;">
+            <div class="text-left text-success">连接摄像头拍照</div>
             <video id="photo" width="50%" height="auto" controls></video>
             <canvas id='canvas'width='400' height='300' hidden></canvas>
         </div>

resources/views/rejected/edit.blade.php

@@ -392,6 +392,7 @@
             </div>
         </div>
         <div id="drag" class="col-4 p-0 " style="position:fixed;bottom: 30px;left: 10px;">
+            <div class="text-left text-success">连接摄像头拍照</div>
             <video id="photo" width="50%" height="auto" controls></video>
             <canvas id='canvas'width='400' height='300' hidden></canvas>
         </div>

resources/views/rejected/videoTest.blade.php

@@ -1,237 +0,0 @@
-@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

routes/web.php

@@ -444,7 +444,6 @@ Route::group(['middleware'=>'auth'],function ($route){
         });
         /** 主页 */
         Route::group(['prefix'=>'index'],function(){
-            Route::get('videoTest',function (){return view('rejected.videoTest');});
             Route::any('general','RejectedController@index');
             Route::any('analyze','RejectedController@indexAnalyze');
             Route::get('import', 'RejectedController@import');