javascript（JQuery）でINPUTタグに画像をセットしたい

###はじめに
javascriptに対する理解が不足しているので、基本的な質問とは思われるのですが、識者の方々の意見を頂ければ幸いと思います。
ソースコードから載せた方が分かりやすいと思いましたので以下最初にソースの抜粋を掲載します。

###ソースコード

html
1<!DOCTYPE html>
2<html xmlns:th="http://www.thymeleaf.org">
3<head>
4<meta http-equiv="content-type" charset="UTF-8">
5<meta name="viewport" content="width=device-width">
6<title>アップロード</title>
7<link href="/css/ress.css" th:href="@{/css/ress.css}" rel="stylesheet" type="text/css" >
8<link href="/css/style.css" th:href="@{/css/style.css}" rel="stylesheet" type="text/css">
9<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
10<script type="text/javascript" th:inline="javascript">
11$(window).on('load', function(){
12
13    $('#set').on('click', function(){
14
15        const ctx = canvas.getContext('2d');
16
17	    /**
18	     * カメラの画像サイズを取得
19	     */
20        var w = video.offsetWidth;
21        var h = video.offsetHeight;
22
23        canvas.setAttribute('width', w);
24        canvas.setAttribute('height', h);
25        ctx.drawImage(video, 0, 0, w, h);
26
27        canvas.toBlob(function(blob){
28            var img = document.getElementById('picture');
29            img.src = window.URL.createObjectURL(blob);
30
31            console.log(img.src);
32
33            // １．INPUTタグに画像をセット
34            $('#image').val(img.src);
35
36            /*
37            var request = new XMLHttpRequest();
38            request.open('POST', '/hogehoge/send.xhtml');
39            request.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'));
40            var formData = new FormData();
41            formData.append('image', blob, 'tmp.jpeg');
42            request.send(formData);
43            */
44
45        }, 'image/jpeg', 0.95);
46
47    })
48});
49</script>
50</head>
51<body>
52    <form id="sendForm" th:action="@{../send.xhtml}" method="post" enctype="multipart/form-data">
53        <table>
54            <tr>
55                <td>写真画像</td>
56                <td>
57                    <input name="image" id="image" type="file" accept="image/*" value="選択">
58                </td>
59            </tr>
60            <tr>
61                <td class="table_title">プレビュー</td>
62                <td>
63                    <video id="camera" th:width="${camWidth}" th:height="${camHeight}"></video>
64                </td>
65            </tr>
66            <tr>
67                <td class="table_title">撮影画像</td>
68                <td>
69                    <canvas id="picture" th:width="${camWidth}" th:height="${camHeight}"></canvas>
70                </td>
71            </tr>
72            <tr>
73                <td><br/></td>
74                <td><br/></td>
75            </tr>
76            <tr>
77                <td></td>
78                <td><input id="shutter" class="btn-square-shadow" type="submit" value="送信"></td>
79            </tr>
80            <tr>
81                <td></td>
82                <td><input id="set" class="btn-square-shadow" type="button" value="画像セット"></td>
83            </tr>
84        </table>
85    </form>
86</body>
87</html>

###実現したい事
元々は

html
1<input name="image" id="image" type="file" accept="image/*" value="選択">

ここにセットされた画像をsubmitして処理するだけだったのですが、デスクトップブラウザ上でカメラ撮影した画像も送信したいとなりました。
WebRTCを使って画像を取得し、上記INPUTタグに画像をセットすれば良いのではと思っています。
そこで

javascript
1            // １．INPUTタグに画像をセット
2            $('#image').val(img.src);

とか色々書いてみたのですが、どうしてもうまくセットできない状態です。
そもそもできるのかすらわかってないので、考え方そのものが間違っているかもしれないのですが、ここをご教授いただけると幸いです。

###補足
javascriptでコメントアウトしているコードで送信すると正常に画像は送られているので画像取得までは正常にできていると思います。

###開発環境

OS Windows10 professional x64
IDE Eclipse 2019-12
言語 Java
プロジェクト形式 Spring MVC

m.ts10806

2020/10/07 07:03

一応、Spring MVC、thymeleafはタグとしてあったほうが良いかと思います。

makoyang

2020/10/07 07:07

追加いたしました

Lhankor_Mhy

2020/10/07 07:20

video には WebRTCのなんらかのオブジェクトが入っている、という想定でいいですか？

makoyang

2020/10/07 07:27

はい。コードを抜粋しすぎたかもですが、入ってきています。

Lhankor_Mhy

2020/10/07 07:28

あ、違うのかな？ #camera のDOMオブジェクトですか？

Lhankor_Mhy

2020/10/07 07:32

あ、WebRTCのオブジェクトで合ってるんですね。 MediaStream オブジェクトですか？

makoyang

2020/10/07 07:37

はい。抜粋しちゃっていたんですけど、以下のように書いています。（CODEタグ使えるのかな...） ```javascript const video = document.querySelector('#camera'); /** カメラ設定 */ const constraints = { audio: false, video: { width: camWidthNum, height: camHeightNum, facingMode: 'user' // フロントカメラを利用するリアカメラ使用：facingMode: { exact: "environment" } } }; /** * カメラを<video>と同期 */ navigator.mediaDevices.getUserMedia(constraints) .then( (stream) => { video.srcObject = stream; video.onloadedmetadata = (e) => { video.play(); }; }) ```

Lhankor_Mhy

2020/10/07 07:50

ああ、MediaStream オブジェクトではなくて、やっぱり#camera のDOMオブジェクトなんですね。であれば、原因はkuma_kuma_さんのご回答の通りですね。ご提示のようにXHR で送信するか、formDataに追加してポストするか、ぐらいしかないのではないかと思います。