Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Пример работы с камерой / 17 сообщений из 17, страница 1 из 1
01.06.2015, 12:18
    #38973128
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
слизано здесь
позволяет делать фото с вебки
 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>Camera and Video Control with HTML5 Example</title>
        <meta name="description" content="">

        <style>

            body .one .bsa_it_ad {
                background: #f8f8f8;
                border: none;
                font-family: inherit;
                width: 200px;
                position: absolute;
                top: 0;
                right: 0;
                text-align: center;
                border-radius: 8px;
            }
            body .one .bsa_it_ad .bsa_it_i {
                display: block;
                padding: 0;
                float: none;
                margin: 0 0 5px;
            }
            body .one .bsa_it_ad .bsa_it_i img {
                padding: 10px;
                border: none;
                margin: 0 auto;
            }
            body .one .bsa_it_ad .bsa_it_t {
                padding: 6px 0;
            }
            body .one .bsa_it_ad .bsa_it_d {
                padding: 0;
                font-size: 12px;
                color: #333;
            }
            body .one .bsa_it_p {
                display: none;
            }

            .demo-frame header, .demo-frame h1, .demo-frame .demo-conversion {
                display: none;
            }

            .demo-wrapper {
                min-height: 500px;
            }

            video {
                border: 1px solid #ccc;
                display: block;
                margin: 0 0 20px 0;
            }
            #canvas {
                margin-top: 20px;
                border: 1px solid #ccc;
                display: block;
            }
        </style>
    </head>
    <body>
        <div class="demo-wrapper">
            <video id="video" width="640" height="480" autoplay="" src=""></video>
            <button id="snap">Snap Photo</button>
            <canvas id="canvas" width="640" height="480"></canvas>
            <script>
                // Put event listeners into place
                window.addEventListener("DOMContentLoaded", function () {
                    // Grab elements, create settings, etc.
                    var canvas = document.getElementById("canvas");
                    var context = canvas.getContext("2d");
                    var video = document.getElementById("video");
                    var videoObj = {
                        "video": true
                    };
                    var errBack = function (error) {
                        console.log("Video capture error: ", error.code);
                    };

                    // Put video listeners into place
                    if (navigator.getUserMedia) {
                        // Standard
                        navigator.getUserMedia(videoObj, function (stream) {
                            video.src = stream;
                            video.play();
                        }
                        , errBack);
                    } else if (navigator.webkitGetUserMedia) {
                        // WebKit-prefixed
                        navigator.webkitGetUserMedia(videoObj, function (stream) {
                            video.src = window.URL.createObjectURL(stream);
                            video.play();
                        }
                        , errBack);
                    } else if (navigator.mozGetUserMedia) {
                        // WebKit-prefixed
                        navigator.mozGetUserMedia(videoObj, function (stream) {
                            video.src = window.URL.createObjectURL(stream);
                            video.play();
                        }
                        , errBack);
                    }

                    // Trigger photo take
                    document.getElementById("snap").addEventListener("click", function () {
                        context.drawImage(video, 0, 0, 640, 480);
                    }
                    );
                }
                , false);
            </script>
        </div>
    </body>
</html>


посторался убрать лишее,
кто почисит блок <style> - будет молодцом...
проверено в хроме
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2015, 12:48
    #38973178
Музаффар
Музаффар
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
вадя,

странно ноу меня на хроме не сработало, а вот на мозилле да работает...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2015, 15:11
    #38973394
rema174
rema174
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
Музаффар,

аналогично
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2015, 15:46
    #38973431
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
действительно....
если я запускаю этот код из netbeans - то работает и в хроме и в ff
а если из файла .html то толькл в ff
какие-то права на камеру?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2015, 15:50
    #38973439
rema174
rema174
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
вадя,

есть пример, как передать из JS на сервлет сохраненную фотку?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2015, 16:12
    #38973482
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
счас разберусь, попробую сделать
есть готовый как загрузить фотки повернуть обрезать,....
и сохранить на сервере , только передача на сервер через websocket
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2015, 21:41
    #38973810
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
задача из непростых.

есть передающая сторона
Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
 <form name="uploadform" action="UpLoad" enctype="multipart/form-data" method="post" target="upload" id="form_id" style="display: block">
            <input type="file" name="fileName"  id="fileName"  >
  </form>

  var xhr = new XMLHttpRequest();
  var formElement = document.getElementById("form_id");

                var formData = new FormData(formElement);
                xhr.open("POST", "UpLoad", true);
                xhr.send(formData);





есть приёмная сторона (java)
Код: java
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        if (!ServletFileUpload.isMultipartContent(request)) {
            throw new ServletException("Content type is not multipart/form-data------------");
        }

        Part filePart = request.getPart("fileName"); // Retrieves <input type="file" name="file">
        InputStream filecontent = filePart.getInputStream();

        byte[] buffer = new byte[filecontent.available()];
        filecontent.read(buffer);
        Files.createDirectories(Paths.get(""ffffffffff"));

        File targetFile = new File("jjjjjjjjjjjjjjj");

        try (OutputStream outStream = new FileOutputStream(targetFile)) {
            outStream.write(buffer);
            outStream.flush();
        }

    }


на приемной стороне файл выбирается и передаётся, и соответственно принимается.


изменяем немного задачу
вместо файла имем картинку полученную из canvas.toDataURL('image/jpeg')
как её передать?
можно преобразовать в blob браузере, и передать - но как на приёмном конце принять?
ajax, websocket не предлагать
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
01.06.2015, 22:07
    #38973824
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
Музаффарвадя,
странно ноу меня на хроме не сработало, а вот на мозилле да работает...
скорее всего это всёж связано с каимо-то ограничениями в хроме, если загружаться с сайта ( сос воего к примеру ) камера будет доступна.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.06.2015, 09:37
    #38974891
Музаффар
Музаффар
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
rema174вадя,

есть пример, как передать из JS на сервлет сохраненную фотку?

вот как бы так 17723305 , но остается вопрос как эту фото инсертить в БД...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.06.2015, 10:18
    #38974937
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
там у тебя идет через base64 - т.е. передаётся строка, это тоже вариант, но я хотел в бинарном виде, типа файла.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.06.2015, 10:26
    #38974948
Музаффар
Музаффар
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
вадятам у тебя идет через base64 - т.е. передаётся строка, это тоже вариант, но я хотел в бинарном виде, типа файла.

а это на что то влияет (производительность, безопасность, и т.п.)?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.06.2015, 11:03
    #38974995
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
если подойти с цифроизмерителем - то влияет- несколько преобразований, плюс передача данных на треть больше,
но это всё будет влиять если у тебя приличное число клиентов одновременно делают это, так что поле для оптимизаций огромное
тут надо исходить из стоимости затраты/выгода.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.06.2015, 11:07
    #38975003
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
ну а безопасность - у тебя пока ни слова про это не было, для начала переход на https, потом авторизация (или наоборот)
а в общем- для реализации данной идеи в настоящее рабочее состояние - проблемой безопасности надо озаботиться не на шутку.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.06.2015, 11:11
    #38975007
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
я воспользовался http://findevelop.blogspot.ru/2013/10/web-spring-security-100.html правда заточил под себя
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.06.2015, 11:32
    #38975039
Музаффар
Музаффар
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
вадяно это всё будет влиять если у тебя приличное число клиентов одновременно делают это, так что поле для оптимизаций огромное
тут надо исходить из стоимости затраты/выгода.
на счет клиентов и одновременных заходов будет максимум 10 чел. и то меньше (имею ввиду будет доступ фоткать)

вадяя воспользовался http://findevelop.blogspot.ru/2013/10/web-spring-security-100.html правда заточил под себя
ну тут я не до рос до Spring'а ;)
пока сделал обычную авторизацию/аутентификацию пользователей...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.06.2015, 12:02
    #38975095
вадя
вадя
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
авторну тут я не до рос до Spring'а ;)
пока сделал обычную авторизацию/аутентификацию пользователей...
там от Spring'а только название...
это обыкновенный фильтр перед сервлетом
авторна счет клиентов и одновременных заходов будет максимум 10 чел. и то меньше (имею ввиду будет доступ фоткать)
тогда не заморачивайся ....
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
03.06.2015, 12:30
    #38975149
Музаффар
Музаффар
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Пример работы с камерой
вадятогда не заморачивайся ....

ОК... и так времени мало :)
вообще основную задачу уже выполнил, этот сабж про ФОТО это как бы для себя придумывал:) типа новые прибамбасы к проекту
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Пример работы с камерой / 17 сообщений из 17, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 431ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1445977]:
 0ms
get settings:
 10ms
get forum list:
 13ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 149ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 31ms
get tp. blocked users:
 1ms
others: 215ms
total:  431ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]