ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Пример работы с камерой
17 сообщений из 17, страница 1 из 1
Пример работы с камерой
    #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:18
| Ответить | Цитировать | Написать  
Пример работы с камерой
    #38973178
Музаффар
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Музаффар
Участник
вадя,

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

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

есть пример, как передать из JS на сервлет сохраненную фотку?
...
Рейтинг: 0 / 0
01.06.2015, 15:50
| Ответить | Цитировать | Написать  
Пример работы с камерой
    #38973482
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
счас разберусь, попробую сделать
есть готовый как загрузить фотки повернуть обрезать,....
и сохранить на сервере , только передача на сервер через websocket
...
Рейтинг: 0 / 0
01.06.2015, 16:12
| Ответить | Цитировать | Написать  
Пример работы с камерой
    #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, 21:41
| Ответить | Цитировать | Написать  
Пример работы с камерой
    #38973824
вадя
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
вадя
Участник
Музаффарвадя,
странно ноу меня на хроме не сработало, а вот на мозилле да работает...
скорее всего это всёж связано с каимо-то ограничениями в хроме, если загружаться с сайта ( сос воего к примеру ) камера будет доступна.
...
Рейтинг: 0 / 0
01.06.2015, 22:07
| Ответить | Цитировать | Написать  
Пример работы с камерой
    #38974891
Музаффар
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Музаффар
Участник
rema174вадя,

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

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

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

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

ОК... и так времени мало :)
вообще основную задачу уже выполнил, этот сабж про ФОТО это как бы для себя придумывал:) типа новые прибамбасы к проекту
...
Рейтинг: 0 / 0
03.06.2015, 12:30
| Ответить | Цитировать | Написать  
17 сообщений из 17, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Пример работы с камерой
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38973482&tid=1445977]:
 0ms
get settings:
 7ms
get forum list:
 18ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 201ms
get topic data:
 11ms
get forum data:
 3ms
get page messages:
 73ms
get tp. blocked users:
 2ms
others: 225ms
total:  546ms
созд. / загр.: 546ms
x
x
Закрыть


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